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来实际定位每个浮窗位置。同时我们可以给浮窗加任意你想要做的事件。