前言
在可视化项目开发过程中，经常会遇到这样的需求：点击饼图的版块，跳转到对应的详细数据页面。因为对于我来说是一个新的需求，所以我需要去查看一下官网的API。
官网API
首先我们找到实例所拥有的API组：echartsInstance ，在这里看到了经常需要使用的 setOption 用以设置图表实例的配置项和数据。再细细想想我们的需求，类似监听一个点击事件，于是我看到了 on :绑定事件处理函数（找到救星啦）。让我们来看下官网的介绍：
参数列表( eventName: string, query: string|Object, handler: Function, context?: Object)
- eventName：事件名称，全小写
- query:可选的过滤条件，能够只在指定的组件或者元素上进行响应
- handler:事件处理函数
- context:可选。回调函数内部的
context，即this的指向。
有了以上技术支持我们已经可以写个小Demo了。
实战Demo
让我们从头来演示一遍 1.首先需要调用API来获得实例，将实例与DOM元素绑定
var myChart = echarts.init(target);
2.为这个实例设置配置项和添加数据，这个过程确定了图表类型，图表样式等。详情移步官网
const option = {
XXX
};
3.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
4.以上其实已经创建了一个图表，并且展示了相关数据。但是要想添加点击事件，还需要第四步如下：
myChart.on("click", this.toReportDetail);
toReportDetail:function(param){
console.log(param)
}
这里面传入了参数param,让我们打印查看下这是何方神圣？
可以看到这个param是点击的这个组件的信息，根据这些信息就可以进行后续的操作了
