自定折線圖 - daniel-qa/Vue GitHub Wiki

自定折線圖 customLineChart

元件簡化流程

props
   ↓
chartData / chartType / seriesConfig
   ↓
initChart()
   ↓
生成 xAxis
生成 series
   ↓
組合 options
   ↓
<Echart :options="options">

這是一個 ECharts 折線圖元件封裝。

簡單說：

這是一個「可配置的折線圖元件」

它的功能：

顯示週 / 月統計折線圖

支援多條折線

可以用 chartType（舊模式）

或 seriesConfig（新模式）

所以其實是：

Vue Component
     ↓
接收資料
     ↓
轉換成 ECharts options
     ↓
交給 <Echart /> 元件畫圖

Template 結構

重點只有一個：

:Echart :options="options"

意思是：

ECharts 的設定全部放在 options

所以這個元件其實只是負責 組裝 options

props（外部傳入）

這個 component 支援 4 種外部配置：

chartData（圖表資料）

  chartData = {
  weekNums: 12,
  rooms: [],
  teachs: [],
  students: [],
  classTimes: [],
  classStudenttimes: [],
  classRecords: []
}

這些會變成

series.data

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