vue+iview+echarts 实现报表 图表

/src/assets/echartsconfig.js

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>

renderEcharts具体方法

/**
 * 渲染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'));
},