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

關于組件的選擇：

1.echarts-for-weixin,官方echarts的小程序版本。使用參考：echarts-for-weixin介紹，如果你是原生開發小程序版本，這個組件非常適合你，開發過程中可使用echarts官方提供的所有配置和Api,但并不適合mpvue項目。

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

3、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);   }  }, }};