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为后端返回的具体数据