echart自定义浮窗增加点击事件

echart⾃定义浮窗增加点击事件
⼀：情景
做⼀个柱状图，需要在柱状图显⽰lable，并且浮窗上每个条⽬可以被点击或者跳转。

我使⽤的做图插件是echarts，但是echart的浮窗是图⽚，⽽且不可以被点击，不能识别html，⽽且这个需求在2017年就提给官⽅，⽽官⽅并没有实现这个需求。

因为项⽬做到⼀半，不更换，highchart虽然提供了类似解决⽅案，但是布局不满⾜需求。

⼆：解决⽅案：
通过heighchart的实现⽅式，就是通过⾃定义的浮窗来实现这个功能，于是我查找echarts官⽅⽂档是否提供每个柱状图的具体相对图形的坐标API，幸好echart提供了这个API
var model = myChart.getModel();
var seriesModel = model.getSeriesByIndex(0);
var data = seriesModel.getData();
var dataPostion=[];
data.each(function (idx) {
var layout = data.getItemLayout(idx);
// console.log(layout);
dataPostion.push({x:layout.x,y:layout.y});
})
1、⾸先我们渲染出图。

然后获取model
var model = myChart.getModel();
2、获取echart的所有相关数据
var data = seriesModel.getData();
3、通过遍历我们获取对应的坐标信息。

var layout = data.getItemLayout(idx);
4、layout就有我们的对应的柱状图的相对当前图的坐标信息。

x:layout.x,y:layout.y
5、我们可以根据对应的坐标，通过css的postion来实际定位每个浮窗位置。

同时我们可以给浮窗加任意你想要做的事件。