浅谈对ECharts的使用

上个月的项目，其中有一个模块用的是ECharts来实现的，分别用了折线图，环形图，还有漏斗图，这几个都算比较常见的了，尤其是折线图，环形图，用的最多的就是它们了。之前也没怎么接触过ECharts，实际上用起来，好像很简单，就是看看API，然后写个demo。

按照惯例，这时候应该对ECharts做个简单介绍：

ECharts (Enterprise Charts 商业产品图表库)，提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

兼容性：支持IE6/7/8/9+，chrome、firefox、safari、opera  (IE8- power by excanvas )

ECharts确实很强大，能实现很多类型的报表，通过看官网就知道，里面的报表很多，各式各样的，基本都能满足需求，样式方面比highcharts还多，确实powerful，不得不点个赞啊。但是确实在使用的过程中也遇到了些问题，比如：

1. 折线图的数据，在底部的点，鼠标移上去的浮窗有的文字会被挡住的问题；
2. 一共有6个环形图，每一个环形图的浮窗的显示要求，有颜色的的文字显示，和剩下部分不一样；
3. 环形图的头部固定显示“今日变化量XXX个”；
4. 漏斗图中，带横线的数量显示文字挡住的问题；

解决方案：

1. 对于鼠标一上去，出现浮窗的部分文字被挡住，其实浮窗的位置定位，是根据鼠标的位置定位的，故如图
   
2. 对于环形图的鼠标移上去浮窗显示，调试代码发现，每次触发的是一个tooltip中的formatter方法，当然trigger的参数是“item”，以数据触发，这样的话，formatter里面的参数是每个点的数据，于是，在formatter里面写个switch就解决了。
3. 对于环形图上面的文字显示，本来是在data里面写itemStyle解决了，但是有个缺点是，当今日变化量比较大时，环形图上的文字显示其实是一直处于变化量中间的文字的，这样的话，高度就不统一了，本来打算用markPoint，后来发现用起来比自己写还麻烦，官方演示文档在这方面很少，于是，自己在echarts的头部手写部分固定的“今日变化量”显示，注意，一般要先隐藏这部分，先显示暂无数据，等数据请求加载过来后，再显示“今日变化量”和echarts。
4. 对于漏斗图中显示文字挡住的问题，其实就是把整个漏斗图左移一点就够了。