在實際工作中，對於數據的處理常常需要對數據進行可視化的操作，本文針對日常需要總結了echarts的使用姿勢
- echarts的常規使用
根據項目的需要選擇合適的可視化圖標，引入echarts包
設定我們需要的圖形type類型：
| bar | 柱形圖 |
| pie | 餅圖 |
| ... | |
設定特定的類型以後對數據進行加工，得到我們需要的數據格式，如果需要對可視化圖形做進一步的組合拓展可以通過ref獲取到圖形的實例進而對展示。
eg.餅圖的渲染（以得到如下可視化的圖形爲例）
第一步：明確需要展示的數據及樣式
在上圖中左邊是echarts可視化得到的餅圖，右邊是與餅圖對應的數據條例，右邊的區域我們按照常規的遍歷操作展示即可得到，餅圖的展示我們可以由ref獲取到它的實例從而展示出來。
第二步：對數據進行加工處理，明確需要的效果以後，對拿到的數據進行加工處理，比如要得到如上所示的圖形，對原始數據加工得到name和value的鍵值對即可。
第三步：對可視化圖形的屬性就行設定，比如設置radius屬性我們可以得到各種角度的同心環，設置color改變顏色組，tooltip改動hover上去以後展示的數據結構等，具體的屬性可以參考echarts官網，根據需求進行設置引用即可。
- echarts之nodejs服務端渲染
-
![]()
實際使用中，echarts在服務端的渲染也是常見的場景之一。
比如我們想要在服務端根據拿到的數據渲染出echarts圖片，此處介紹nodejs渲染出echarts圖片
首先需要引入node-echarts包，node-echarts包底層依賴於echarts和canvas包
其次同樣我們需要對數據進行加工，得到name和value的鍵值對
const config = {
canvas: Canvas,
font: '12px 華文仿宋', // 字體設置
width: 400, // 圖片的寬度
height: 400, // 圖片的高度
option, // echarts的option設置
// path: '', // 存放圖片的路徑，如果沒有設置路徑，返回buffer
enableAutoDispose: true,
};
對config文件進行配置，最後node-echarts(config)得到圖片或者圖片對應的buffer。
如果渲染以後圖片出現亂碼可以引入ttf字體文件
Canvas.registerFont(path.join(__dirname, "../email_template/schedule_report/華文仿宋.ttf"), { family: "華文仿宋"});
具體關於echarts的使用還有多種場景，大家可以在使用中慢慢去探索。
echarts官網：https://www.echartsjs.com/zh/index.html
node-echarts: https://github.com/hellosean1025/node-echarts