使用Echarts多個y軸輕鬆實現數據可視化分析

一、Echarts簡介

ECharts是一個使用JavaScript開發的，針對大規模數據可視化的開源庫。它支持多種圖表類型的展示，包括折線圖、散點圖、餅圖等，並且能夠非常容易地與其他的前端組件集成，例如React等。

二、多個y軸的作用

ECharts支持多個y軸的展示，這是非常有用的一個功能。通過多個y軸可以實現不同單位的數據展示在同一個圖表中，這樣可以方便地進行數據分析和比較。舉個例子，我們可以在同一個圖表中展示公司的銷售額和利潤，銷售額使用y軸1，利潤使用y軸2。

三、示例代碼

下面是一個使用ECharts多個y軸展示數據的示例代碼：

// 引入ECharts
import echarts from 'echarts';

// 初始化圖表
const chart = echarts.init(document.getElementById('chart'));

// 指定圖表的配置項和數據
const option = {
  // x軸數據
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  // y軸數據
  yAxis: [
    {
      // y軸1的配置
      type: 'value',
      name: '銷售額',
      // y軸1的數據
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      // y軸2的配置
      type: 'value',
      name: '利潤',
      // y軸2的數據
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ],
  // 圖表數據
  series: [
    {
      name: '銷售額',
      type: 'line',
      // 使用y軸1的數據
      yAxisIndex: 0,
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '利潤',
      type: 'line',
      // 使用y軸2的數據
      yAxisIndex: 1,
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

// 使用剛指定的配置項和數據顯示圖表。
chart.setOption(option);

上面的代碼中，我們定義了兩個y軸，分別是銷售額和利潤。在圖表數據中，我們分別指定了使用哪一個y軸的數據來展示銷售額和利潤。

四、小結

通過使用ECharts多個y軸的功能，我們可以非常方便地展示不同單位的數據，並且進行直觀的比較和分析。ECharts是一個非常優秀的數據可視化開源庫，它提供了非常豐富的圖表類型和功能，並且易於集成到其他的前端組件中。