echarts 3.0 改动

前言

今天在项目上做了一个大死，为了方便地在图表上显示自定义的markLine，因为2.0的markLine没有type便不会支持，强行将前端部分的echarts2.0组件换成了3.0，结果光是让之前的配置配合上新版本的echarts便花了将近一天的时间，这里列出在修改这部分代码时对echarts新特性实现的一些总结，也希望之后遇到问题，可以有所借鉴。

toolbox

• 在echarts3.0后，自定义的工具箱工具的名字需要统一以"my"开头，详情可以在文档查到http://echarts.baidu.com/option.html#toolbox.feature
• 在各功能的图标上，我们可以看到echarts的图标趋于扁平化，为了使用自定义的图标，需要在icon字段后面添加自定义的图标路径，与echarts2.0不同的是，这里的地址前要加上"image://"，示例代码：

toolbox: {  
      show: true,
      feature : {
          myDay : {
              show : true,
              title : '你需要显示的信息',
              icon : "image://images/***.png",
              onclick : function (){
                  'onclick之后你需要执行的事情'
              }
          }
      }
}

事件触发机制

• 在echarts2.x的时候，我们在定义图表中元素的自定义元素需要调用echarts中的config，然后再on中写下event的关键词。这个操作echarts3.0中被取消了，现在我们需要的是找到手册中对应想要添加事件监听的元素的关键词，其中事件监听的关键词仍然是on，具体的api配置项见官方api：http://echarts.baidu.com/api.html#events。

  下面给出一段配置代码，以legend被选择为例，其关键词是“legendselectchanged”。其中，我们获取了当前被选择的legend的信息：

            chart.on('legendselectchanged', function(obj) {
                var target = obj.name;  // 获取当前被点击的标签
                alert("这是输出信息" + target);
            });
  

markLine

终于3.0支持了自定义的markLine位置，我们可以摆脱type的束缚，把markLine放在我们想放的地方，我在写的时候多配置了emphasis和normal的样式。另外，在哪里显示markLine的标题可能对刚刚接触echarts的我来说这个字段有一些隐晦，这里着重说明一下。显示标题的字段存在于markLine.label.normal.formatter中，记得把show的属性改为true即可。下面给出一段示例：

                        markLine: {
                            label: {
                                normal:{
                                    show: true,
                                    // 在这里配置显示的label
                                    formatter: 'name'
                                }
                            },
                            data: [{
                                name: 'title'
                                yAxis: ‘你需要将markLine放置的地方（y轴坐标）’
                            }],
                            lineStyle: {
                                normal: {
                                    color: "#65b6f3",
                                    width: 3
                                },
                                emphasis: {
                                    color: '#79468a',
                                    width: 5
                                }
                            }
                        }

总结

以上就是到现在为止发现的一些echarts的一些需要查官方文档的一些改动，希望对大家会有所帮助。