在实际工作中，对于数据的处理常常需要对数据进行可视化的操作，本文针对日常需要总结了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