echarts 创建多图表

<template>
  <div class="monitor-3">
    <div>
    </div>
    <div v-for="item in dataList">
      <div class="chart" :id="'echart-'+item.deviceId"></div>
    </div>

  </div>
</template>


<script>
  import http from "../../js/http/http.js";
  import api from "../../js/http/api.js";
  import CommonUtils from "../../js/common/common-utils.js";
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        deviceId: null,
        createTime: new Date(),
        chartShow: false,
        dataList: []
      };
    },
    methods: {
      getCraftPowerReport() {
        http.post(api.GET_CRAFT_POWER_REPORT, {
          craft: '前后片贴口袋',
          styleId: 52
        }, data => {
          this.dataList = data.data;
          for (var item of this.dataList) {
            var xData = [];
            var yData = [];
            var powerList = item.powerList;
            for (var i = 0; i < powerList.length; i++) {
              xData.push(i + 's');
              yData.push(powerList[i]);
            }
            this.initEchart('echart-' + item.deviceId, xData, yData);
          }
        });
      },

      dateChange() {
        this.getCraftPowerReport();
      },

      initEchart(chartId, xData, yData) {
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById(chartId));
          var option = CommonUtils.initLineChartOption('缝纫曲线', xData, yData);
          myChart.setOption(option);
        });
      },
      refreshClick() {
        this.getCraftPowerReport();
      }
    },
    created() {
      this.chartShow = true;
      this.deviceId = CommonUtils.getParam(this, 'deviceId', 'setDeviceId');
      this.getCraftPowerReport();
    },
    destroyed() {
      this.chartShow = false;
    }
  };
</script>

<style lang="scss" scoped>
  .monitor-3 {
    >div {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 20px;
      background-color: #ffffff;
      padding: 20px;
      border-radius: 5px;

      .chart {
        height: 250px;
        width: 100%;
      }
    }


    >div:nth-of-type(1) {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 20px;
      background-color: #ffffff;
      padding: 20px;
      border-radius: 5px;

      .div-handle-right {
        flex: 1;
        flex-direction: row-reverse;
        text-align: right;
        display: flex;
        align-items: center;

        >input:nth-of-type(1) {
          border: 1px solid #eeeeee;
          font-size: 15px;
          width: 150px;
          padding: 5px 8px;
          outline: none;
        }

        >button {
          color: #A866FF;
          margin-left: 10px;
          padding: 4px 20px;
        }
      }
    }



  }
</style>