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來實際定位每個浮窗位置。同時我們可以給浮窗加任意你想要做的事件。