數據報表 Apache ECharts 使用筆記

Juju 的自學筆記

11 min readMar 10, 2023

官網：https://echarts.apache.org/zh/index.html
官網提供的範例：https://echarts.apache.org/examples/zh/index.html

這篇文章會記錄自己在使用 Apache ECharts 過程中用到的功能，還有一些用來客製化調整的筆記。

我這次使用有調整到的都是在 option 內。

官網有關 option 的使用文件：https://echarts.apache.org/zh/option.html#title

需要的客製化改動幾乎在這個文件內都能找到解法👍

Title — 圖表的標題

官網文件說明：https://echarts.apache.org/zh/option.html#title
官網 demo：https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue

title: {
  text: 'Traffic Sources',
  left: 'center',
}

text 放標題。
left 放要置中或靠左、靠右。

Legend — 標記(symbol)

官網文件說明：https://echarts.apache.org/zh/option.html#legend
官網 demo：https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue

圖例組件展現了不同系列的標記(symbol)，顏色和名字。
可以通過點擊圖例控制哪些系列不顯示。

legend: {
  orient: 'vertical',
  left: 'left',
  data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
},

orient 排列方向要水平方向（horizontal）或垂直方向（vertical）。
left 置中或靠左、靠右。
data 對應的資料

Tooltip — 滑鼠 hover 在圖表上時會出現資訊

官網文件說明：https://echarts.apache.org/zh/option.html#tooltip
官網 demo：https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue

tooltip: {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
},

tooltip. trigger：觸發類型
- 'item' 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
- 'axis' 坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
在 ECharts 2.x 中只支持類目軸上使用 axis trigger，在 ECharts 3 中支持在直角座標系和極座標系上的所有類型的軸。
並且可以通過 axisPointer.axis 指定座標軸。
- 'none' 什麼都不觸發。
.
調整 tooltip 的 box model
預設會有 padding，可以利用以下方法調整 border 和 padding：

axisPointer. type ：滑鼠 hover 在項目上時，該項目的區域可出現底色。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  borderWidth: 0,
  padding: 0,
  textStyle: {
    fontSize: 12
  }
}

tooltip. formatter 客製化 tooltip

this.option.tooltip.formatter = (value, index) => this.setTooltips(value);

目標樣式：

設計 header：

    setTooltips(params) {
      let toolTipHTML = `
        <div style="
          display: flex;
          justify-content:
          space-between;
          align-items: center;
          width: 171px;
          height: 30px;
          padding: 6px 8px;
          font-size: 12px;
          background-color: #E9EBF1;
          border-radius: 4px 4px 0 0;
        ">
          <span style="color: #404040;">${params[0].name}</span>
          <span style="color: #1D2A44;">${params[0].data[1]} 人</span>
        </div>`;

      toolTipHTML += this.renderTooltipsHTML(params);
      return toolTipHTML;
    }

2. 設計內容：

    renderTooltipsHTML(params) {
      let contentHTML = '';
      const tooltipData = params[0].data[2];
      tooltipData.forEach((data) => {
        contentHTML += `
          <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 8px;
            line-height: 28px;
          ">
            <div style="display: flex; align-items: center;">
              <div style="margin: 6px 4px 0 0;">
                ${data.channelIcon}
              </div>
              <span style="color: #000;">${data.channelName}</span>
            </div>
            <span style="color: #1D2A44;">${data.value}</span>
          </div>`;
      });
      return contentHTML;
    }

series. dimensions 定義資料的維度
也可以在 dataset.dimensions 中定義，但 series.dimensions 定義的會優先。
實作發現：如果維度的資料會動態改變需動態更新 dimensions 時，若用 dataset.dimensions 行為會不正確（畫面中的維度無法減少但可以增加），要用 series.dimensions 行為才會符合預期（畫面中的維度可以動態減少和增加）。
grid — 調整圖表的 box model
如果不要最外圍的 margin，top、bottom、left 都給 0

option: {
  grid: {
    containLabel: true,
    top: '0',
    bottom: '0',
    left: '0'
  }
}

toolbox — 工具欄
- 各工具設定文件：https://echarts.apache.org/zh/option.html#toolbox.feature

toolbox 只有 zoom 和 Restore 的範例
- toolbox.feature.dataZoom. yAxisIndex 設定 none 讓 y 軸全選
- toolbox.feature.restore. title 更改 restore 在 hover 時出現的名稱

toolbox: {
  feature: {
    dataZoom: { yAxisIndex: 'none' },
    restore: { title: 'Reset' }
  }
}

xAxis. axisTick 調整座標刻度是否對齊標籤

xAxis: {
  type: 'category',
  axisTick: {
    alignWithLabel: true // 刻度線和label是否對齊
  }
},

xAxis. axisLine(軸線) & xAxis. axisTick(刻度) & xAxis. axisLabel(標籤)

xAxis. axisLabel 旋轉和調整標籤位置

axisLabel: {
  rotate: 25,
  align: 'center',
  verticalAlign: 'top',
  padding: [8, 0, 0, 0]
}

xAxis.axisLabel. showMaxLabel
當需要將最大值的 label 用別的字取代時，可以這麼做：

1.關掉 showMaxLabel

yAxis: {
  axisLabel: {
    showMaxLabel: false
  }
},

2. 用 CSS 的 position: absolute; 把單位放到原本 max label 的位置

這個做法在一個情境會小問題，就是 loading 的時候標籤會浮在上面：

這是因為 Apache ECharts 會將圖表做成一張 canvas，我們無法把自己客製的標籤加入半透明淺灰的圖層下，所以標籤是浮在最上層的。

目前想到的解法是可以透過 loading 值同步控制該標籤的字體顏色。

圖表類型 — 柱狀圖 Bar Chart

type: ‘bar’

調整方向

預設是直的：

若想改成橫的需配置 encode（範例）：

  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  }

series: [
    {
      type: 'bar',
      encode: {
        // 将 "amount" 列映射到 X 轴。
        x: 'amount',
        // 将 "product" 列映射到 Y 轴。
        y: 'product'
      }
    }
  ]

itemStyle 調整 bar 的樣式

series: [
  {
    type: 'bar',
    barWidth: '4', // bar的寬度
    barGap: '100%', // bar的間距，100%代表間距等於bar的寬度
    itemStyle: {
      color: '#408FFF', // bar的顏色
      borderRadius: [0, 4, 4, 0] // bar的圓角
    }  
  }
]

series-bar. realtimeSort 排序：從大到小

series: [
  {
    type: 'bar',
    ...略
    realtimeSort: true
  }
]

圖表類型 — 折線圖 Line Chart

type: ‘line’