可視化圖表 - ECharts.js (上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 27

自我挑戰組

Vue 元素美麗的轉變：前端小萌新勇闖套件的魔法陣系列第 27 篇

可視化圖表 - ECharts.js (上)

15th鐵人賽

kuku

2023-09-27 21:43:05

1469 瀏覽

分享至

ECharts.js 一個基於 JavaScript 的開源視覺化圖表庫，學原生 JavaScript 的時候用的是 C3.js (原自 D3.js 開源的圖表套件，設定方式和Chart.js挺相似的)，後來在學 Vue3 過程也認識 Amcharts 和 ECharts，3 種都是作圖套件，真要認真比起來 ECharts 真的是我認識套件中，官方文件最好懂且可客製化最高的套件。

#套件簡介

ECharts 是一個開源的 JavaScript 圖表庫，用於在網頁上創建動態和交互式的數據可視化。它允許開發者通過簡單的 JavaScript 代碼來生成各種類型的圖表，包括折線圖、柱狀圖、散點圖、餅圖等。
最大的優點就是...他有中文文件，內容很平易近人完全不會文謅謅，加上因為很多人使用所以分享資源相對非常廣，是我最喜歡的套件之一。

ECHARTS
https://echarts.apache.org/zh/index.html

#安裝流程

因為主要在 Vue 框架下引用，所以 Apache EChartsTM 並通過 tree-shaking 特性只打包需要的模塊以減少包體積。

npm install echarts --save

#開始方法

有 2 種安裝方法，全域註冊和按需引入，專案如果很大建議可以使用按需引入，只安裝需要的就好。

1. 全域註冊

如果是要整個套件安裝也可以，只是體積大，如果專案很大的時候編譯所需時間也相對會拉長，就看開發選擇和 PM 需求。
以下是官網文件的範例程式碼，其中 import * as echarts from 'echarts'; 就是整包套件全部下載，好處是不用擔心自己忘記註冊，壞處是真的好大...
當然也可以把 import * as echarts from 'echarts'; 放在 main.js 中引入，這樣也可以方便取用。

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

2. 按需引入

這是我個人比較常使用的方法，壞處就是...多人開發的時候會忘記註冊元件，然後一直不知道為什麼圖表就是不出來！？因為我犯傻過，所以可以很肯定跟各位說這個坑...

解決方法：

協同合作的時候，要確定專案用整包安裝還是按需引入
圖表跑不出來，但是很明顯 init 實例出現，圖沒問題有問題的是人
去 main.js 或是自己的元件註冊位置確認有沒有安裝相關元件
最大的重點...這只能逐一排查，因為 F12 不會發任何黃牌或紅牌提醒

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

#使用方法

環境：vue3 <script setup> + js
版本：ECharts 5.4 bar chart

<template>
  <div ref="chart" style="width: 100%; height: 400px" />
</template>
  
<script setup>
import { onMounted, ref } from 'vue'

// 在组件加载后初始化ECharts图表
import * as echarts from 'echarts'

// 模拟一些示例数据
const data = {
  categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  values: [5, 20, 36, 10, 10, 20]
}

const chart = ref(null)
function render() {
  const myChart = echarts.init(chart.value)

  const option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {},
    xAxis: {
      type: 'category',
      data: data.categories
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.values,
        type: 'bar'
      }
    ]
  }

  myChart.setOption(option)
}

onMounted(() => {
  render()
})
</script>

顯示畫面

- 細說主架構：

替 echarts 本體準備一個寬高的 DOM 容器 (這個坑很大，明天繼續說慘痛的教訓)
通常來說，需要在 HTML 中先定義一個 <div> 節點，並且通過 CSS 使得該節點具有寬度和高度。
初始化的時候，傳入該 DOM 節點，圖表的大小默認即為該 DOM 節點的大小。
```
<template>
  <div ref="container" style="width: 600px; height: 400px"></div>
</template>
```
(在 .vue 元件的 <template /> 給圖表建立寬高空間)

響應容器大小的變化，可以監聽頁面的 resize 事件獲取瀏覽器大小改變的事件，然後調用 echartsInstance.resize 改變圖表的大小。
```
window.addEventListener("resize", () => {
    resize();
});
```
使用這種方法在調用 echarts.init 時需保證容器已經有寬度和高度，如果沒設定就跑不出來！
另外，如果容器節點被銷毀或是重建的時候，需要重新 resize，不然圖表會變成 mini 化或是沒有圖表。
配置信息項
```
echarts.init(document.getElementById('container')).setOption(option);
```
(option 表示使用 JSON 數據格式的配置來繪製圖表)