Echarts Note

11月 2 2022 Plug-in

第一次嘗試圖表應用。

基本資料結構與觀念

觀念

echarts 其實就是一個幫你處理「圖表實現（implement）」 的套件，你只要依照文件上的 配置 來做設定就會自動幫你產生對應的圖表，所以你不需要花心思在「如何建立圖表」這件事情上（一個實際案例是 D3.js）。

基本配置範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const option = {
  title: {
    text: '圖表的標題'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}

這邊的配置你搭配下圖一起看以後大概就能理解兩者之間的對應關係：

data-structure

補充：

  • tooltip hover 時會有 popup 顯示訊息
  • legend 是用來過切換單一圖表的顯示 or 隱藏（需在 series.name 設置對應名稱 ）
  • series 主要是用來代表「資料」。也包含其他的設定，像是 type: bar 代表以柱狀圖呈現，而 name 則代表該資料的名稱，以此類推此。

最基本的配置其實就大概包含以上這些，其他的都只是往後延伸而已。當你碰到任何疑惑時，請務必參考 API Spec 來學習與練習。不需要死記硬背，當你用的多時就會慢慢記住了。

圖表尺寸

圖表預設會填滿容器的寬與高，例如：

1
2
3
4
.wrapper {
  width: 400px;
  height: 400px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

const option = {
  title: {
    text: '圖表的標題'
  },
  tooltip: {},
  legend: {
    data: ['銷量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '銷量',
      type: 'bar',
      data: [5, 50, 36, 10, 10, 20]
    }
  ]
}

function App() {
  const chartWrapper = useRef(null)

  useEffect(() => {
    const myChart = echarts.init(chartWrapper.current)
    myChart.setOption(JSON.parse(JSON.stringify(option)))
  }, [])

  return <div ref={chartWrapper} className='chat-wrapper'></div>
}

export default App

這樣子圖表就會是 400x400 的大小。

自動調整大小

如果要手動調整圖表大小的話，可以用在 init 時加上 config：

1
2
3
4
const myChart = echarts.init(chartWrapper.current, null, {
  width: 600,
  height: 600
})

如果要隨視窗改變時調整大小的話，可以用在 window.onResize 時呼叫chart.resize() 來改變圖表大小：

1
2
3
4
5
6
7
8
9
window.onresize = () => {
  const myChart = echarts.init(chartWrapper.current)
  myChart.setOption(JSON.parse(JSON.stringify(option)))
  // 根據 body 的寬高來調整大小
  myChart.resize({
    width: document.body.clientWidth - 20,
    height: document.body.clientHeight - 20
  })
}

圖表樣式

設定樣式的方法是透過在 option 中做設定，可以設定在「global」或「series」身上。

style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const option = {
  // global
  color: ['#003366', '#006699', '#4cabce'],
  legend: {
    orient: 'vertical',
    top: 'center',
    right: 0
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar' },
    { type: 'bar' },
    // series 會覆蓋掉 global 的設定
    { type: 'bar', color: 'red' }
  ]
}

Dataset

Dataset 是一種「設定資料」的方式，官方沒有規定你一定要這樣子做，不過這樣子做會為你帶來一些好處，像是提高可重用性、資料格式會更好閱讀等等。

先來看一下原本的寫法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {
    type: 'value',
    position: 'right'
  },
  series: [
    {
      name: '2015',
      type: 'bar',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      name: '2016',
      type: 'bar',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      name: '2017',
      type: 'bar',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
}

改用 Dataset 的形式來寫會變這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const option = {
  tooltip: {},
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value',
    position: 'right'
  },
  // 可以 "直排" 的方式來看會更好理解
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 89.3, 92.1, 94.4, 85.4],
      ['Milk Tea', 95.8, 89.4, 91.2, 76.9],
      ['Cheese Cocoa', 97.7, 83.1, 92.5, 78.1],
      ['Walnut Brownie', 66.7, 75.1, 88.5, 69.1]
    ]
  },
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

我覺得這樣寫的另一個好處是「把資料抽離」，現在所有跟資料有關的東西都只放在 dataset.source 裡，而 series 的職責只剩下呈現方式。換句話說就有點像是把資料從畫面上抽離出去的感覺。

總之這兩種的輸出結果都會一樣：

dataset

座標軸（Axis）

這邊是想讓你理解底下的配置項目分別代表什麼：

  • xAxis X 軸
  • yAxis Y 軸
  • axisLine 座標軸的「線」
  • axisTick 座標軸的「刻度」

axis

搭配官方的這張圖我覺得應該就很好懂了。

現在如果我想調 X 軸的「刻度」顏色，我可以這樣配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const option = {
  xAxis: {
    name: 'products',
    type: 'category',
    axisTick: {
      length: 10,
      lineStyle: {
        color: 'red'
      }
    }
  },
  yAxis: {
    name: 'sales',
    type: 'value'
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 89.3, 92.1, 94.4, 85.4],
      ['Milk Tea', 95.8, 89.4, 91.2, 76.9],
      ['Cheese Cocoa', 97.7, 83.1, 92.5, 78.1],
      ['Walnut Brownie', 66.7, 75.1, 88.5, 69.1]
    ]
  },
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

axis-tick

其他像「軸線標題」、「軸線文字」和「軸線標籤」的改法也是以此類推。

圖例（legend）

圖例可以想成是每一筆資料的標題，常見的用途是拿來切換顯示 / 隱藏某筆資料：

legend

底下會介紹幾個我覺得開發上可能會用到的設定。

設定圖例的位置

legend-position

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const option = {
  legend: {
    orient: 'vertical',
    top: 'center',
    right: 0
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

設定不同的圖例

legend-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const option = {
  legend: {
    data: [
      {
        name: '2015',
        icon: 'rect' // 第一個
      },
      {
        name: '2016',
        icon: 'circle' // 第二個
      },

      {
        name: '2017',
        icon: 'diamond' // 第三個
      }
    ]
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

設定預設隱藏 / 顯示

legend-default-selected

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const option = {
  legend: {
    selected: {
      2015: false,
      2016: true,
      2017: true
    }
  },,
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
Gsap－context 與 revert（寫 React 的必備知識） React-Environment-Variable
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×