Echarts

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

setOption 使用：

echartsInstance. setOption
Function
(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: Object)
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。
如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

调用方式：

1	`chart.setOption(option, notMerge, lazyUpdate);`

或者

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

option: 图表的配置项和数据，具体见配置项手册。
notMerge: 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
lazyUpdate: 可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
silent: 可选，阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。

如果有删除数据的话，建议射者 notMerge 为true

调色板

默认全局调色板:

1	`color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],`

http://www.shouce.ren/tool/yanse

canvas 和 svg

canvas 适合渲染大量的数据

svg 的分辨率比较高，生成图片更加清晰

https://juejin.cn/post/6844903749605916679

svg

svg 是一种使用xml描述2D图形的语言。
svg是基于XML，这意味着svg dom 中的每一个元素都是可用的，您可以为某个元素添加JavaScript事件处理器，在svg中，每个被绘制的图形均被视为对象。
如果svg对象的属性发生变化，那么浏览器能够自动重现图形。

特点：不依赖分辨率；（所以可以解决缩放带来的模糊问题）支持事件处理器；
最适合支持带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用dom的应用都不会块；
echarts目前的 SVG 版中，富文本、材质功能尚未实现）不适合游戏应用；

svg 文件需要以 .svg 结尾

canvas

canvas 通过 JavaScript 来绘制2D图形。
canvas是逐像素进行渲染的。
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

特点：
依赖于分辨率；
不支持事件处理器；
弱的文本渲染能力；
能够以 .png 或 .jpg 格式保存结果图像；
最适合图像密集型的游戏，其中的许多对象会被频繁重绘；
echarts的默然渲染方式是canvas渲染，但是Canvas 数量多也可能会导致内存占用超出手机承受能力；

字体

默认为 'sans-serif' 黑体，不适合显示小的文字

宋体: '宋体'

另外一个流行库 D3.js

https://d3js.org/

https://github.com/d3/d3