mpvue-echarts折线图示例

安装
mpvue-echarts的github地址

https://github.com/F-loat/mpvue-echarts

$ cnpm install mpvue-echarts                          
$ cnpm install echarts 

demo 复制粘贴后即可看到效果

• 折线图

<template><div class="container"><div class="wrap"><mpvue-echarts :echarts="echarts" :onInit="onInit" /></div></div>
</template><script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {const chart = echarts.init(canvas, null, {width: width,height: height})canvas.setChart(chart)var option = {backgroundColor: '#fff',color: ['#37A2DA', '#67E0E3'],legend: {data: ['A', 'B']},grid: {containLabel: true},xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {x: 'center',type: 'value',splitLine: {lineStyle: {type: 'dashed'}}},series: [{name: 'A',type: 'line',smooth: true,data: [18, 36, 65, 30, 78, 40, 33]}, {name: 'B',type: 'line',smooth: true,data: [12, 50, 51, 35, 70, 30, 20]}]}chart.setOption(option)return chart
}
export default {data () {return {echarts,onInit: initChart}},components: {mpvueEcharts},onShareAppMessage () {}
}
</script><style scoped>
.wrap {width: 100%;height: 300px;
}
</style>

效果图

收藏了一些关于mpvue-echarts的博文
npm 在微信小程序中使用 ECharts:https://www.npmjs.com/package/mpvue-echarts

mpvue——引入echarts图表:https://www.cnblogs.com/wangyang0210/p/10671465.html
基于mpvue小程序使用echarts画折线图:https://segmentfault.com/a/1190000018971426
小程序开发-mpvue中使用图表库:https://www.jianshu.com/p/f2cdca74964b