EChart 繪製原理說明 - daniel-qa/Vue GitHub Wiki

整個 ECharts 的資料結構其實就是：

option
 ├─ xAxis   (X軸)
 ├─ yAxis   (Y軸)
 └─ series  (資料)

視覺化理解：

        series
          │
    ┌─────┼─────┐
    │     │     │
 教室數  教師數  學生數
  line    line    line

Vue component 的流程，其實就是 把資料 → 轉換成 ECharts options → 交給 ECharts 畫圖。

整個「繪製圖表」流程可以拆成 5 個步驟。

1️⃣ Vue 載入 component

Vue 先 render template：

<Echart
  :options="options"
  id="customLineChart"
  ref="myEcharts"
  height="100%"
  width="100%">
</Echart>

這裡其實就是：

Vue Component
      ↓
Echart wrapper component
      ↓
ECharts library

也就是說：

你的 component
  → 傳 options
  → Echart component
  → echarts.setOption()
  → 畫圖