vue+iview+echarts実装レポートグラフ

const options = {
  title: {},
  tooltip: {
    trigger: 'axis',
    padding: 15,
    textStyle: {
      color: '#686f79',
      fontSize: 12,
      fontFamily: 'Microsoft Yahei',
    },
    borderColor: '#eee',
    borderWidth: 1,
    backgroundColor: 'rgba(255,255,255,1)',
    axisPointer: {            //  ， 
      type: 'line',         //  ， ：'line' | 'shadow'
      lineStyle: {          //  
        color: '#ebecf1',
        width: 1,
        type: 'solid',
      },
      color: 'rgba(0,0,0,1)',
    },
  },
  legend: {
    data: [],
    itemHeight: 4,
    itemWidth: 12,
    trigger: 'axis',
    left: 'center',
    top: 'bottom',
    borderWidth: 0,
    textStyle: {
      fontSize: 12,
      fontFamily: 'Microsoft Yahei',
    },
    axisPointer: {            //  ， 
      type: 'line',         //  ， ：'line' | 'shadow'
      lineStyle: {          //  
        width: 2,
        type: 'solid',
      },
      color: 'rgba(0,0,0,1)',
    },
  },
  toolbox: {
    show: true,
    right: 20,
    feature: {
      mark: {
        show: false,
      },
      dataView: {
        show: false,
        readOnly: false,
      },
      dataZoom: {
        show: false,
      },
      magicType: {
        show: true,
        title: {
          line: ' - ',
          bar: ' - ',
        },
        type: ['line', 'bar'],
      },
      restore: {
        show: false,
      },
      saveAsImage: {
        show: true,
      },
    },
  },
  grid: {
    top: 30,
    left: '3%',
    right: '4%',
    bottom: 30,
    borderWidth: 1,
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    splitLine: false,
    //  
    axisLine: {
      lineStyle: {
        color: '#dcdfe4',
        opacity: 1,
      },
    },
    //  
    axisTick: {
      show: false,
    },
    data: [],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#333333',
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#dcdfe4',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#e3ecf3',
        },
      },
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#333333',
        },
      },
    },
    {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#dcdfe4',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#e3ecf3',
        },
        show: false,  //  y 
      },
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        textStyle: {
          color: '#333333',
        },
      },
    },
  ],
  dataZoom: [],
  series: [],
};

export default options;

<div style="position:relative">
  <div id="requestCharts"></div>
  <Spin fix
        v-show='loadingShow'></Spin>
</div>

/**
 *  echart
 * @param chartData {Object}  
 * @param chartsAddConfig {Object}  
 * @param id {String} DOM id
 **/
renderEcharts(chartData, chartsAddConfig, id) {
  if (this.echartsInstance1 && id === 'requestCharts') {
    this.echartsInstance1.dispose(); //  
  } else if (this.echartsInstance2 && id === 'searchCharts') {
    this.echartsInstance2.dispose(); // 
  }
  const chartDataRel = [];
  //  ,  reverse(),  
  for (let i = 0; i < chartData.length; i += 1) {
    chartDataRel[i] = chartData[chartData.length - i - 1];
  }

  const domId = id;
  const series = {
    totalCount: [], //  
    successCount: [], //  
    rate: [], //  
  };
  if (this.$route.query.type === 'api') {
    series.validRequest = [];
  }
  let reqCount = 0;
  let reqSucCount = 0;
  let validRequest = 0;
  let searchCount = 0;
  let searchSucCount = 0;
  //  x ， 
  echartsConfig.series = [];
  echartsConfig.legend.data = [];
  echartsConfig.xAxis.data = [];

  chartDataRel.forEach((data) => {
    echartsConfig.xAxis.data.push(Utils.timeStampLite(data.timeStamp)); // x 
    if (domId === 'requestCharts') {
      series.totalCount.push(data.accessRequest);
      series.successCount.push(data.successRequest);
      if (this.$route.query.type === 'api') {
        series.validRequest.push(data.validRequest);
      }
      // eslint-disable-next-line
      series.rate.push(Number(((data.successRequest / data.accessRequest) * 100).toFixed(2)) || 0);

      reqCount += data.accessRequest;
      reqSucCount += data.successRequest;
      validRequest += data.validRequest; //  
    } else {
      series.totalCount.push(data.inputCount);
      series.successCount.push(data.outputCount);
      series.rate.push(Number(((data.outputCount / data.inputCount) * 100).toFixed(2)) || 0);

      searchCount += data.inputCount;
      searchSucCount += data.outputCount;
    }
  });
  chartsAddConfig.forEach((data) => {
    echartsConfig.series.push({
      name: data.legend,
      type: 'line',
      barMaxWidth: '20',
      itemStyle: {
        normal: {
          color: data.dataColor,
        },
      },
      data: series[data.keyWord] || [0],
    });
    echartsConfig.legend.data.push({
      icon: 'rect',
      name: data.legend,
      borderColor: data.dataColor,
    });
    if (echartsConfig.series[chartsAddConfig.length - 1]) {
      echartsConfig.series[chartsAddConfig.length - 1].yAxisIndex = 1;
    }
  });

  // this.echartsInstance = echarts.init(document.getElementById(id));
  if (domId === 'requestCharts') {
    this.reqCount = reqCount;
    this.reqSucCount = reqSucCount;
    this.validRequest = validRequest;
    this.reqRate = (this.reqSucCount / this.reqCount) || 0;
    this.echartsInstance1 = echarts.init(document.getElementById(domId));
    this.echartsInstance1.setOption(echartsConfig);
  } else {
    this.searchCount = searchCount;
    this.searchSucCount = searchSucCount;
    this.searchRate = (this.searchSucCount / this.searchCount) || 0;
    this.echartsInstance2 = echarts.init(document.getElementById(domId));
    this.echartsInstance2.setOption(echartsConfig);
  }
  // const eCharts = echarts.init(document.getElementById(id));
  // eCharts.setOption(echartsConfig);
},

/**
 *  
 **/
getUsageStatistic() {
  //  div loading
  document.getElementById('requestCharts').innerHTML = '';
  document.getElementById('searchCharts').innerHTML = '';
  this.loadingShow = true;
  let requestAddConfig = [ //  
    {
      dataColor: '#349eff',
      legend: ' ',
      keyWord: 'totalCount',
    },
    {
      dataColor: '#00cc99',
      legend: ' ',
      keyWord: 'successCount',
    },
    {
      dataColor: '#EC611D',
      legend: ' (%)',
      keyWord: 'rate',
    },
  ];
  if (this.$route.query.type === 'api') {
    requestAddConfig = [ //  
      {
        dataColor: '#349eff',
        legend: ' ',
        keyWord: 'totalCount',
      },
      {
        dataColor: '#00cc99',
        legend: ' ',
        keyWord: 'successCount',
      },
      {
        dataColor: '#495060',
        legend: ' ',
        keyWord: 'validRequest',
      },
      {
        dataColor: '#EC611D',
        legend: ' (%)',
        keyWord: 'rate',
      },
    ];
  }
  // eslint-disable-next-line
  const searchAddConfig = [ //  
    {
      dataColor: '#349eff',
      legend: ' ',
      keyWord: 'totalCount',
    },
    {
      dataColor: '#00cc99',
      legend: ' ',
      keyWord: 'successCount',
    },
    {
      dataColor: '#EC611D',
      legend: ' (%)',
      keyWord: 'rate',
    },
  ];
  wsUsageChartStat({
    serviceId: this.$route.params.id,
    startTime: this.startDate,
    endTime: this.endDate,
    email: this.userName,
    strategy: this.strategy,
  }).then((data) => {
    if (data.status === 200) {
      this.loadingShow = false;
    }
    const rendData = data.data;
    this.renderEcharts(
      rendData,
      requestAddConfig,
      'requestCharts',
    );
    this.renderEcharts(
      rendData,
      searchAddConfig,
      'searchCharts',
    );
  });
},

mounted() {
  this.getUsageStatistic();
  this.echartsInstance1 = echarts.init(document.getElementById('requestCharts'));
  this.echartsInstance2 = echarts.init(document.getElementById('searchCharts'));
},