使用echarts可以将数据转换成需要的图标

但是有一些基础功能需要了解。

echartsInstance

echarts实例通过init创建。

const chart = echarts.init(dom, null, {renderer: 'svg'}); 

参数分别为容器、主题、附加参数，后两个可以为空，容器就是我们的contianer、div这些。
主题是echarts独立的配色系统，可以自己配色，然后下载这些主题。附加参数有很多，就不一一列出了。

dispose

echarts初始化完成后，可以通过dispose来销毁实例，通过此功能可以在同一容器上进行图标切换

echarts.dispose(dom) 

请注意，dispose是echarts的方法，而非实例本身的方法，通过实例可以使用

chart.clean()

来清除图表的option（清除后图表可用），实际上，目前仅能清除图标的series内容，可能是bug。

setOption

设置图标实例的数据及其他配置项

 chart.setOption(option, notMerge, lazyUpdate);

一些option

1. title：标题组件

2. legend：图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

3. grid：网格组件，直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。单个实例可以有任意多个grid组件

4. xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。xAsis.type可以设置x轴的类型，可选：
   可选：

   • ‘value’ 数值轴，适用于连续数据。
   • ‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
   • ‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
   • ‘log’ 对数轴。适用于对数数据。

5. yAxis：直角坐标系 grid 中的 y 轴

6. polar：极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。

7. radar：雷达图坐标系组件，只适用于雷达图。

8. dataZoom：dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

9. timeline： timeline组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能

10. calendar：日历坐标系组件。

11. dataset：数据集组件

12. series：图形组件，决定生成的图形是线还是圆或其他

13. backgroundColor：背景色组件

14. useUTC：是否使用utc时间

15. toolbox：工具组件，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

16. geo：地图组件。

resize

改变图表尺寸，在容器大小改变时需要手动调用

window.onresize = function () {
        showChart.resize();}

使用以上方法可以使图表随浏览器大小改变而自动改变

showLoading

显示加载动画，在加载完后调用hideLoading隐藏