关于ECharts的使用以及总结

​​​​​一：关于echarts图表的基本使用

 选择合适的图表，进行使用，此处举个例子

这是一个图表的基本设置，后续的图表也与此处类似，注意一下红框内的设置即可。

二：图例里面的坑

对于图例内的一个设置:

若此处selectedMode设置了false后，此时我们再去使用tooltip，给图例一个提示框的话（因为有的图例需要的文字非常长，所以我们会采用超出字符省略的情况，一般会给出图例的一个提示框，以此来展示完整的信息），那么图例的提示框将不会显示，这里需要注意一下。

三：关于自定义提示框内容（tooltip. formatter的使用）

设置自定义的提示框有很多种写法，我记录一下自己使用的两种写法吧

 

我们可以看一下params中的东西，这里面包含了非常多的内容，在使用formatter方法时，可以先看看这里面是否有自己需要的内容，使用合理可以更加便捷的达成想要的效果

四：自定义图例内容（legend.formatter的使用）（注：环形饼图）

在自定义图例时，需要对legend.textStyle.rich进行设置，这里用于图例中各个模块之间的距离进行设置，以及图例内展示的样式进行调整，这里面formatter的参数只有图例的名字信息，其他具体占比以及数值都是听过计算得出的

五：关于自适应的做法，以及resize的使用

对于大部分表格来说，自适应是一个绕不开的话题，简单记录一下实现方法

1：首先是resize，在浏览器中，这里监听浏览器的缩放，对图表进行一个动态加载，这样就不会使得图表一成不变，使得图表可以随着浏览器的缩放变化进行加载，例如这里，图表装载完数据之后，监听浏览器的缩放，再加载表格。

2：其次是自适应，这里浏览器可视窗口处于某个大小时，加载怎样大小的图表。具体实现原理是，根据页面缩放重新加载表格时，重新设置图表的高度

这里返回的高度其实也可以不用写死，例如图片中，大于1500小于1700时，我们可以返回

240/1700*document.body.clientWidth，这样的话，高度就是一个动态的，缩放浏览器时，图表的高度就不会突然从200变成240，而是一个渐变高度的情况。

总结：

这次使用ECharts图表途中有遇到一些坑，未来陆续补充，以及一些api的使用上不是特别顺手，因为方法太多了，容易眼花缭乱，而且有些需求会有很多方法能够解决，并不是唯一的，重点是需要学会找到解决的办法，此次的记录，希望未来能够避免重走老路，对于ECharts图表的理解能够更上一层楼，共勉。