基於mpvue小程序使用echarts畫折線圖

第一次使用mpvue框架來寫小程序，項目開發直接搬用 mpvue-shop（一個仿網易嚴選的小程序開發項目）,項目結構清楚,實現了大部分功能，對於初次使用mpvue的小夥伴們來講，是一個很好的選擇。

關於組件的選擇：

1.echarts-for-weixin,官方echarts的小程序版本。使用參考：echarts-for-weixin介紹，若是你是原生開發小程序版本，這個組件很是適合你，開發過程當中可以使用echarts官方提供的全部配置和Api,但並不適合mpvue項目。

二、wx-charts,一個我的開發的微信小程序圖表插件，體積只有30K,可用於mpvue項目和原生小程序項目,支持大部分圖表繪製，缺點是可配置化不強，對於UI沒有太大要求的可以使用此組件，比較適合於我的項目開發。

三、mpvue-echarts與echarts結合。特別適合mpvue項目,mpvue-echarts是一個基於mpvue開發的echarts組件，echarts的加入可徹底使用官方全部的圖表繪製功能，讓echarts在小程序當中獲得所有應用。

mpvue-echarts配合echarts的使用

下載相關包

npm install mpvue-echarts --save

echarts的下載可到官網上下載，因爲小程序中對文件大小有限制，建議經過勾選所須要的功能按需下載。

vue文件中使用

template:

<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" />

js:

import mpvueEcharts from 'mpvue-echarts';

let echarts = require("../../../static/lib/echarts.min.js"); //按需下載的壓縮文件放在項目文件夾中
import charts from './charts'; //本地mixin文件,圖表的全部配置

let chart = null;
export default {
  data() {
    return {
        echarts,
    };
  },
  async mounted() {
    let data = await post("/product/marketInfo",{
    });

    this.initCombineLineData(data.trendData);
    chart.setOption(this.trendChart);

  },
  mixins: [charts],
  methods: {
    initChart(canvas, width, height) {
      chart = echarts.init(canvas, null, {
          width: width,
          height: height
      });
      canvas.setChart(chart);
      chart.setOption(this.trendChart);
      return chart;

    }
  },
  components: {
    mpvueEcharts
  }
}

charts.js文件

export default {
  data() {
    return {
      //trend圖
      trendChart: {
        grid: {
            left: 'left',
            top: 50,
            containLabel: true,
            tooltip: {
              triggerOn: 'none',
              showConent: true,
              position: function (pt) {
                return [pt[0], pt[1]-50];
              }
            }
        },
        tooltip: {
          trigger: "none",
          showContent: false,
        },
        textStyle: {
          color: "#999",
          fontSize: 24
        },
        label: {
          fontSize: 22
        },
        xAxis: {
          name: "年份",
          type: "category",
          nameGap:10, //座標軸名稱與軸線之間的距離。
          boundaryGap: true, //座標軸兩邊留白策略
          nameTextStyle:{ //座標軸名稱樣式
              color:"#999",
              fontSize: 12,
              align: 'left',
              verticalAlign: 'bottom'
          },
          axisLine: { //座標軸軸線相關設置
            show: true, //是否顯示座標軸軸線。
            symbol: ['none','arrow'], //軸線兩邊的箭頭默認不顯示箭頭，即 'none'。兩端都顯示箭頭能夠設置爲 'arrow'，只在末端顯示箭頭能夠設置爲 ['none', 'arrow']。
            symbolSize: [10,8],//軸線兩邊的箭頭的大小
            symbolOffset: [0,5],//軸線兩邊的箭頭的偏移
            lineStyle: {
              color: "#ece9e2",//線條顏色
            },
          },
          axisTick: { //座標軸刻度相關設置
            show: false
          },
          axisLabel: { //座標軸刻度標籤的相關設置
            interval: 10000,
            showMinLabel: true,
            showMaxLabel: true,
            fontSize: 12,
            padding: [6, 0, 0, 0]
          },
          axisPointer: {  //座標軸指示器配置項
              value: '',
              snap: true,
              type: 'line', //指示器類型
              show: false, //豎線是否顯示，做用於每個點
              lineStyle: {
                  color: '#ece9e2',
                  width: 1
              },
              label: { //座標軸指示器的文本標籤
                  show: false,
              },
              handle: { //拖拽手柄，適用於觸屏的環境
                  show: true,
                  color: 'none'
              }
          },
          data: []
        },
        yAxis: {
          type: "value",
          name: "價格(元)",
          nameGap: 0,
          nameTextStyle:{
              color:"#999",
              fontSize: 12,
              align: 'right',
              verticalAlign: 'top',
              padding: [0,0,10,60]
          },
          axisLine: {
            show: true,
            length: 100,
            symbol: ['none','arrow'],
            symbolSize: [10,8],
            symbolOffset: [0,5],
            lineStyle: {
              color: "#ece9e2",
            },

          },
          axisLabel: {
            fontSize: 12,
            formatter: value => {
              return value;
            }
          },
          axisTick: {
            show: false
          },
          splitLine:{
              lineStyle: {
                  //網絡線設置（只做用於非類目鈾）
                  show: true,
                  color: "#ece9e2",
                  width: 0.5,
                  type: "solid"
              },
          },
          splitNumber: 5,
          min: 0,
          max: 4000,
          interval: 1000
        },
        series: [
          {
            type: "line",
            smooth: false,
            color: "#ca3c2e",
            showSymbol: true,
            lineStyle: {
              width: 1.5,
              color: "#c5936e",
            },
            itemStyle: {
                normal:{
                    borderWidth: 0.5,
                    label:{
                        show: true, //顯示值
                        borderWidth: 2,
                        color: '#c5936e',
                        fontSize: 12,
                    }
                }
            },
            data: []
          },
        ]
      },
    };
  },
  methods: {
      initCombineLineData(data) {
          this.trendChart.xAxis.axisPointer.value = data[data.length-1].date; //讓指示器定位在最後一個折線點上
          for(let i=0;i<=data.length;i++){
              let yData = {
                  symbol: 'none'  //折線上不顯示轉折點
              };
              if(i== data.length-1){
                  yData.symbol = "emptyCircle", //最後一個顯示轉折點
                  yData.symbolSize = 6
              }
              yData.value = data[i].price;

              this.trendChart.xAxis.data.push(data[i].date);
              this.trendChart.series[0].data.push(yData);

          }
      },
  }
};

最終效果