echarts使用

在近期项目开发中使用了echarts树形图和曲线图，在使用的过程自己也遇到了一些问题，下面来做一些echarts的使用总结。

1.树形图：项目对树形图的要求是点击节点展开树和显示节点信息弹窗，但是有一点要求是点击树节点的时候不能同时去处理前面的这两个行为。对于这种情况我当时考虑实现的方式是点击节点时只展开树，点击节点名称也就是label配置项的内容显示弹窗信息，但是在查看echarts官网的API的时候我发现label配置项并不能添加HTML标签并实现我想要的功能。最终我是通过给tooltip的popover添加按钮实现弹窗的显示功能。在实现弹窗显示功能时候我发现了同样是作为tooltip和label的配置项formatter，但是两者之间的使用却不一样，tooltip的formatter属性可以使用HTML标签，而label的formatter属性使用HTML标签将会报错。tooltip和label的formatter属性的API分别如下图1和图2所示。

                                                                                                                                                图1

                                                                                                                                                                                                                                                                                     图2

2.曲线图和树形图自适应：

（1）出现未自适应的原因：在曲线图未显示之前echarts曲线并不知道自己的宽度是多少，所以才会出现未自适应的问题。

（2）解决方法：在初始化echarts的时候，将初始值定义为全局变量，比如：let chartInit =null; chartInit = echart.init(dom)，在每次渲染图形之前先对图形进行resize设置，即：chartInit.resize()。此时便可解决echarts图形自适应的问题。