【極客日常】在Vue用echarts畫帶不同顔色點的散點圖

在vue技術棧下做圖表需求，echarts是一個非常棒的選擇，提供了非常多種多樣的圖示示例以及非常複雜強大的API。由于筆者近期工作内容中需要分析采樣點的分布情況，是以自然而然接觸到了echarts的3D散點圖。在筆者的需求中，需要對不同點進行分類，并按特定的顔色顯示出來。經過一番踩坑，了解到了echarts在實作這方面的機制。

echarts繪圖/重新整理隻需要通過

setOption

接口即可實作。在各種options中，visualMap視覺映射元件能夠根據資料在特定次元上的值，指定對應點的視覺屬性（比如顔色、透明度、圖元大小等等）。

要用到visualMap特性，需要import相關元件：

import { VisualMapComponent } from 'echarts/components'
echarts.use(VisualMapComponent)
           

記得如果要用到其餘的一些tooltip之類的元件，也得加上這些import聲明。

假設我們資料每項包含X、Y、Z坐标以及一個表示顔色類别的項，我們需要首先設定visualMap如下（也可以參考官方的諸多例子）：

option = {
  visualMap: [
    {
      min: 0,
      max: 1000,
      dimension: 4,
      inRange: {
        color: ['#000000', '#aabbcc', '#ffffff']
      }
    }
    //    ...
  ]
};
           

這表示上色的時候，會讀取資料第5個次元（index/dimension = 4）的值，然後根據值尋找對應的顔色。值的範圍是0~1000，也就是說我們資料裡第5個次元值為0的話，就是

#000000

，取1000就是

#ffffff

，然後取中間500的話就是

#aabbcc

了

是以我們可以轉換下資料，添加顔色對應的整數值：

const colorTagToIntMap = {
    COLOR_A: 0,
    COLOR_B: 500,
    COLOR_C: 1000
}
const newData = data.map(item => {
    const colorInt = colorTagToIntMap[item.colorTag]
    return [
        item.X,
        item.Y,
        item.Z,
        item.colorTag,
        colorTagToInt
    ]
})
           

然後在對應dataset中，設定dimension為表頭，設定data為上述的newData，就ok了。