把握机会，提升自我——Vue项目使用ECharts展示数据之左数值，右百分比显示，让你尽享成功体验

2023-09-06 13:16:06

导入依赖，迈出成功第一步

首先，我们需要通过npm指令在Vue项目中引入ECharts库：

npm install echarts

添加依赖后，即可在Vue组件中轻松使用ECharts进行数据展示。

2. 准备数据，为成功奠定基础

为了让ECharts能够展示数据，我们需要准备相应的数据格式。以展示请求次数、拦截次数和拦截率为例，我们可以定义如下数据结构：

const data = {
  dates: ['2023-03-01', '2023-03-02', '2023-03-03'],
  requestCounts: [100, 200, 300],
  interceptCounts: [50, 100, 150],
  interceptRates: ['50%', '50%', '50%']
};

在这个数据结构中，dates数组存储了日期，requestCounts数组存储了请求次数，interceptCounts数组存储了拦截次数，interceptRates数组存储了拦截率。

3. 构建ECharts实例，打开成功之门

在准备数据后，我们可以通过Vue组件的mounted生命周期钩子，创建ECharts实例：

mounted() {
  this.echartsInstance = echarts.init(this.$refs.echarts);
  this.drawChart();
},

其中，echartsInstance是ECharts实例，$refs.echarts是ECharts容器的引用，drawChart方法用于绘制图表。

4. 绘制图表，开启成功之旅

在创建ECharts实例后，就可以通过调用setOption方法来绘制图表：

drawChart() {
  this.echartsInstance.setOption({
    title: {
      text: '数据展示'
    },
    xAxis: {
      data: this.data.dates
    },
    yAxis: [
      {
        name: '数值',
        type: 'value'
      },
      {
        name: '百分比',
        type: 'value'
      }
    ],
    series: [
      {
        name: '请求次数',
        type: 'bar',
        data: this.data.requestCounts,
        yAxisIndex: 0
      },
      {
        name: '拦截次数',
        type: 'bar',
        data: this.data.interceptCounts,
        yAxisIndex: 0
      },
      {
        name: '拦截率',
        type: 'line',
        data: this.data.interceptRates,
        yAxisIndex: 1
      }
    ]
  });
},