mpvue中echart渲染
//html <div v-for="(item,index) in data" :key="item"> <div class="pay" > <div class="pay"> <p></p> <p>{{item.name}}</p> </div> </div> <div class="names" > <mpvue-echarts :echarts="echarts" :onInit="ecPayInit" :canvasId="'pay'+index" /> </div> </div> //js let echarts = require("../../../static/echarts.min"); import mpvueEcharts from "mpvue-echarts"; let paychart mounted() { //调用页面接口数据加载 }, methods: { PayInit: function(canvas, width, height) { var that = this; var index = canvas.canvasId.substring(3); paychart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(paychart); paychart.setOption({ title: {}, tooltip: { trigger: "axis" }, legend: { data: ["1", "2", "3"], bottom: 10 }, grid: { top: "8%", left: "3%", right: "6%", bottom: "14%", height: "70%", containLabel: true }, xAxis: [ { type: "category", boundaryGap: false, data: that.data[index].time } ], yAxis: [ { type: "value" } ], series: [ { name: "1", type: "line", data: that.data[index].age, color: "#1296db" //蓝色 }, { name: "2", type: "line", data: that.data[index].sex, color: "red" //红色 }, { name: "3", type: "line", data: that.data[index].name, color: "green" //绿色 } ] }); return paychart; } } //that.data为后端返回的具体数据