首次使用mpvue框架编写小程序，直接使用mpvue-shop(一个模仿网易YEATION的小程序开发项目)进行项目开发。项目结构清晰，大部分功能都实现了，对于初次使用mpvue的小伙伴来说是个不错的选择。

组件选择：

1 . echarts for-weixin，官方e charts的小程序版本。使用参考：e-charts-for-weixin介绍，如果你是原生开发小程序版本，这个组件非常适合你，而且e-charts提供的所有配置和Api都可以在开发过程中使用，但是不适合mpvue项目。

2.wx-charts是一款自主开发的微信小程序图表插件，体积只有30K，可用于mpvue项目和原生小程序项目，支持大部分图表绘制。缺点是不可配置。如果对UI没有太多要求，可以使用这个组件，更适合个人项目开发。

MP vue-echart和echart的结合。mpvue-echart是一个基于mpvue开发的echart组件，特别适用于MP vue项目。有了ech art的加入，所有官方制图功能都可以充分利用，让ech art在小程序中得到充分应用。

将MP vue-echart与echart一起使用

下载相关包

下载NPM安装mpvue-e图表-保存图表可以从官方网站下载。由于小程序对文件大小有限制，建议通过检查所需功能按需下载。

在vue文件中使用

模板：

mpvue-echart : echart=' echart ' : oninit=' initChart ' canvasId=' demo-canvas '/js :

从“mpvueEcharts”导入mpvueEcharts让echarts=require('./././static/lib/echart . min . js’；//按需下载的压缩文件放在项目文件夹中。从“”导入图表。/charts '；//本地mixin文件，图表的所有配置让图表=null导出默认值{ data(){ return { echart，}；}，async mounted(){ let data=wait post('/product/market info '，{ })；this . initcombinelinedata(data . trenddata)；图表.设置选项(this . trendchart)；}，mixins: [charts]，methods: { initChart(canvas，width，height){ chart=echart . init(canvas，null，{ width: width，height : height })；canvas.setChart(图表)；图表.设置选项(this . trendchart)；返回图表；}}，components 3360 { mpvueecharts } } charts . js文件

导出默认{ data() { return { //trend图trendchart : { grid : { left : ' left '，top: 50，containLabel: true，tooltip : { trigger on : ' 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: '年份，类型： '类别，名称Gap:10，//坐标轴名称与轴线之间的距离边界间隙：为真，//坐标轴两边留白策略名称文本样式：{ //坐标轴名称样式color:'#999 '，fontSize: 12，align: '左侧，垂直对齐： '底部}，axis lene : {//坐标轴轴线相关设置show: true，//是否显示坐标轴轴线symbol: ['none '，' arrow']，//轴线两边的箭头默认不显示箭头，即没有。两端都显示箭头可以设置为箭头，只在末端显示箭头可以设置为['无','箭头】symbolSize: [10，8]，//轴线两边的箭头的大小symbolofset:[0，5]，//轴线两边的箭头的偏移line style : { color : ' # ece9e 2 '，//线条颜色}，}，axisTick: { //坐标轴刻度相关设置show: false }，axisLabel: { //坐标轴刻度标签的相关设置interval: 10000，showMinLabel: true，showMaxLabel: true，fontSize: 12，padd :[6，0，0，0] }，axis point : {//坐标轴指示器配置项value: ' '，snap: true，type: 'line '，//指示器类型show: false，//竖线是否显示，作用于每一个点线型： {颜色： ' # ece9e 2 '，宽度： 1 }，标签: { //坐标轴指示器的文本标签show: false，}，handle: { //拖拽手柄，适用于触屏的环境show: true，color: 'none' } }，data: [] }，yAxis: { type: 'value '，name: '价格（元)',命名空间： 0,命名空间样式：{ color:'#999 '， fontSize: 12，align: '右，垂直对齐： '上，padd :[0，0，10，60] }，axisLine: { show: true，length: 100，symbol: ['none '，' arrow']，symbol 3360[10，8]，symbol offset 3360[0，5]，lineStyle: } }，axisTick: { show: false }，splitline : { linestyle网络线设置（只作用于非类目铀)show: true，color: '#ece9e2 '，width: 0.5，type: 'solid' }，}，splitNumber: 5，min : 0 0，max: 4000，interval: 1000 }，series: [ { type: 'line '，smooth: false，color: ' # ca3c2e '，showSymbol显示值borderWidth: 2，color: '#c5936e '，fontSize: 12，} } }，data: [] }，]}； }，方法： { initCombineLineData(数据){ this。趋势图。xaxis。axispointer。值=数据[数据。长度-1].日期；//让指示器定位在最后一个折线点上用于(设I=0；I=数据。长度；I){ let Ydata={ symbol : ' none '//折线上不显示转折点};if(I==数据。length-1){ ydata。符号=' emptyCircle '，//最后一个显示转折点ydata。symbolsize=6 } ydata。值=数据[1]。价格；这个。趋势图。Xaxis。数据。推送(数据[1]).日期);这个。趋势图。系列[0]。数据。push(yData)；} }, }};最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。