Echrarts的基本API
官方API文档
https://echarts.apache.org/zh/api.html#echarts
一、init 创建一个 ECharts 实例
创建一个 ECharts 实例返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
const chart = echarts.init(dom, null, {renderer: 'svg'});
参数:
-
dom 实例容器，一般是一个具有高宽的div元素。
如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。 -
theme 应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
-
opts 附加参数。有下面几个可选项：
- devicePixelRatio 设备像素比，默认取浏览器的值window.devicePixelRatio。
- renderer 渲染器，支持 'canvas' 或者 'svg'。
- useDirtyRect 是否开启脏矩形渲染，默认为false。
- width 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
- height 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
- locale 使用的语言，内置 'ZH' 和 'EN' 两个语言
二、setOption 图表实例的配置项
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
chart.setOption(option, notMerge, lazyUpdate);
或者
chart.setOption(option, {
notMerge: ...,
lazyUpdate: ...,
silent: ...
});
或者
chart.setOption(option, {
replaceMerge: ['xAxis', 'yAxis', 'series']
});
-
notMerge: boolean
可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
-
replaceMerge: string | string[]
可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见 组件合并模式。
-
lazyUpdate: boolean
可选。在设置完 option 后是否不立即更新图表，默认为 false，即同步立即更新。如果为 true，则会在下一个 animation frame 中，才更新图表。
-
silent: boolean
可选。阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。
三、resize 重绘图表
于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。
多个图表可以使用addEventListener
window.addEventListener("resize", () => {
this.myChart.resize();
this.myChart2.resize();
this.myChart3.resize();
});
在vue组件上就可以直接单个组件添加进事件列表
myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});
myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
四、appendData 分片加载数据和增量渲染
此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。
注意：
现在不支持 系列**（series） **使用 **dataset **同时使用 appendData，只支持系列使用自己的 series.data 时使用 appendData。
目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts 基础版本的 散点图（scatter） 和 线图（lines）。ECharts GL 的 散点图（scatterGL）、线图（linesGL） 和 可视化建筑群（polygons3D）。
