Apache ECharts - daniel-qa/Vue GitHub Wiki

#

在 ECharts 裡，option.series 是 圖表的資料與圖形設定核心。

  • type

指定圖表類型。常用值：

'bar' → 柱狀圖

'line' → 折線圖

'pie' → 餅圖

'scatter' → 散點圖

  • series

series = 一組資料 + 它要怎麼被畫出來

例如：

教室數量 → 一條線

教師數量 → 一條線

學生數量 → 一條線

每一條線，就是一個 series。

series: [
  {
    name: '教室數',
    type: 'line',
    data: [10,12,15]
  },
  {
    name: '教師數',
    type: 'line',
    data: [5,7,8]
  }
]

透過 element ID，綁定 ECharts 圖表渲染位置

<div id="chart"></div> <!-- 圖表容器 -->

var myChart = echarts.init(document.getElementById('chart'));
  • 設定資料
var option = {
	title: { text: '精簡柱狀圖' },
	tooltip: {},
	xAxis: { data: ['A','B','C','D'] },
	yAxis: {},
	series: [{ name:'數量', type:'bar', data:[10, 20, 30, 15] }]
  };
  • 範例

alt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue2 + ECharts 簡易示例</title>
    <style>
      /* 容器位置與大小控制圖表 */
      #chart {
        width: 500px;
        height: 300px;
        position: absolute;  /* 可以自由定位 */
        top: 50px;
        left: 100px;
        border: 1px solid #ccc; /* 可選，方便看容器位置 */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="chart"></div> <!-- 圖表容器 -->
    </div>

    <script>
      new Vue({
        el: '#app',
        mounted() {
          // 1️⃣ 初始化圖表
          var myChart = echarts.init(document.getElementById('chart'));

          // 2️⃣ 設定資料與配置
          var option = {
            title: { text: '精簡柱狀圖' },
            tooltip: {},
            xAxis: { data: ['A','B','C','D'] },
            yAxis: {},
            series: [{ name:'數量', type:'bar', data:[10, 20, 30, 15] }]
          };

          // 3️⃣ 渲染圖表
          myChart.setOption(option);

          // 4️⃣ 視窗縮放自動調整圖表
          window.addEventListener('resize', () => myChart.resize());
        }
      });
    </script>
  </body>
</html>

  • 容器控制位置 ：<div id="chart" > + CSS (position, top, left)。

  • 初始化圖表：echarts.init(container) → 回傳圖表實例。

  • 設定資料：setOption(option) → 畫出圖表。

自動調整：resize() → 配合 window.resize。

⚠️ **GitHub.com Fallback** ⚠️