echarts實現自動輪播tooltip

最近需要實現echarts圖形中hover效果輪播（即tooltip在各個數據點上輪流顯示）的功能，以下就是我學習的一個過程，只是提供思路，具體場景需要自己修改。（僅針對echarts 2.2.7及以下版本，最后的代碼有3.0以上的使用方法以及插件代碼鏈接）

源碼：https://github.com/chengwubin/echarts-tooltip-auto-show

 

關於echarts大家可以查看官網文檔。

文檔中有這么一段話：

自2.1.8起，我們為echarts開發了專門的合並壓縮工具echarts-optimizer。如你所發現的，build文件夾下已經包含了由echarts-optimizer生成的單文件：

• dist（文件夾） : 經過合並、壓縮的單文件
• • echarts.js : 這是包含AMD加載器的echarts主文件，需要通過script最先引入
  • chart（文件夾） : echarts-optimizer通過依賴關系分析同時去除與echarts.js的重復模塊后為echarts的每一個圖表類型單獨打包生成一個獨立文件，根據應用需求可實現圖表類型按需加載
    • line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）
    • bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）
    • scatter.js : 散點圖
    • k.js : K線圖
    • pie.js : 餅圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/funnel）
    • radar.js : 雷達圖
    • map.js : 地圖
    • force.js : 力導向布局圖（如需力導和弦動態類型切換，require時還需要echarts/chart/chord）
    • chord.js : 和弦圖（如需力導和弦動態類型切換，require時還需要echarts/chart/force）
    • funnel.js : 漏斗圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/pie）
    • gauge.js : 儀表盤
    • eventRiver.js : 事件河流圖
    • treemap.js : 矩陣樹圖
    • venn.js : 韋恩圖
• source（文件夾） : 經過合並，但並沒有壓縮的單文件，內容同dist，可用於調試

要的就是source文件下面的文件，可以調試，把source下面的echarts-all.js導入自己的工程，在找一個例子就可以運行看效果了。

<div id="chart" style="width: 800px; height: 500px;">
</div>
<span id="hover-console"></span>
<span id="console"></span>

<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
    // 基於准備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('chart'));
    console.log(myChart);
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['銷量']
        },
        xAxis : [
            {
                type : 'category',
                data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"銷量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]
    };

    // 為echarts對象加載數據
    myChart.setOption(option);

    var ecConfig = echarts.config;
    function eConsole(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        if (param.type == 'hover') {
            document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
        }
        else {
            document.getElementById('console').innerHTML = mes;
        }
    }

    function eHover(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    myChart.on(ecConfig.EVENT.HOVER, eHover);
</script>

先說一下大概思路，由於是canvas上面繪圖，所以界面上沒有對應的dom元素，所以沒法用js中的事件來控制。

我們要觸發事件，就需要先得到圖上面的數據元素，然后再考慮怎么觸發事件。 

 

稍微看一下源碼，就發現里面經常出現zrender，所以要先弄清楚zrender做什么的，查看zrender資料。

看了zrender的介紹，大概知道是用來處理canvas的繪畫的，同時還封裝了dom的事件（模擬）。

了解了zrender之后還是繼續調試看源碼，echarts-all.js文件太大，不太方便，可以下載zrender的源碼查看對應的代碼文件。

 

最開始我是想從例子中的hover事件入手，進行調試查看，最后查看到實際是mousemove事件觸發的，然后發現zrender中有個storage。

查看了一下storage：

    /**
     * 內容倉庫 (M)
     * @alias module:zrender/Storage
     * @constructor
     */
    var Storage = function () {
        // 所有常規形狀，id索引的map
        this._elements = {};

        this._roots = [];

        this._displayList = [];

        this._displayListLen = 0;
    };

 是不是發現了新大陸！！！_elements,對，我們要的就是它。

但是怎么得到呢，后面在echarts中找到了getZrender()，添加代碼：

        var zrender = myChart.getZrender();
        var elements = zrender.storage._elements;
        console.log(elements);

運行后可以在console中看見elements的內容：

確實是我們想要的。

 然后就是要處理觸發事件了，怎么在指定坐標觸發事件呢？網上查了查沒查到相關信息，很多網友說的是不能再指定坐標觸發事件，當時我就懵逼了！！！

但是想想，zrender里面封裝了事件的，可以看看怎么從這里入手，是的，最后找到了解決辦法：

                        zrender.trigger('mousemove', {
                            zrenderX: style.x,
                            zrenderY: style.y
                        });

試了下，成功了！！！！！！

 

說的比較粗糙，此文僅供參考，如過您有更好的方法希望能夠分享出來，大家一起學習，哈哈！

下面貼上完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chart {
            height: 500px;
            width: 800px;
        }
    </style>
</head>
<body>
<div id="chart" class="chart">

</div>
<span id="hover-console"></span>
<span id="console"></span>

<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
    // 基於准備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('chart'));
    console.log(myChart);
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['銷量']
        },
        xAxis : [
            {
                type : 'category',
                data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"銷量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]
    };

    // 為echarts對象加載數據
    myChart.setOption(option);

    var ecConfig = echarts.config;
    function eHover(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    myChart.on(ecConfig.EVENT.HOVER, eHover);

    //可以獲取有效的數據元素，數據元素屬性包含坐標點和長寬（如果頁面有變化需要重新獲取）
    var counts = option.series[0].data.length;

    setTimeout(function() {
        autoHover();
        setInterval(autoHover, 1000 * counts);
    }, 1000);


    function autoHover() {
        var zrender = myChart.getZrender();
        var elements = zrender.storage._elements;
        var times = 0;
        console.log(elements);

        for (var key in elements) {
            var style = elements[key].style;

            //根據series中的一系列name值對elements進行歸類排序，然后在進行hover
            //過濾條件需要完善
            if (elements[key]._echartsData) {
                console.log(style);
                (function (style, times) {
                    setTimeout(function () {
                        zrender.trigger('mousemove', {
                            zrenderX: Math.ceil(style.x + style.width/2),
                            zrenderY: Math.ceil(style.y + style.height/2)
                        });
                    }, 1000 * times);
                })(style, times);

                times++;
                times %= counts;
            }
        }
    }
</script>
</body>
</html>

當鼠標觸發hover時要取消自動效果，這個就大家自己解決了！哈哈

第一次發文，見笑了！

 

PS:這個問題發現上面的處理不合適哈，echarts中提供了tooltip顯示的方法，一直沒更新，今天得空更新下。

 

為了解決有鼠標觸發hover時怎么控制輪播效果的停止和開始，更細的去查看echarts和zrender的事件，看來看去感覺外部處理很困難，最后思路還是回到了tooltip上。
最后發現tooltip中其實是有提供showTip和hideTip方法，然后看echarts文檔上component中的tooltip也有寫這兩個方法，然后添加代碼：

var tooltip = myChart.component.tooltip;
//showTip方法參數請參見echarts文檔
tooltip.showTip({seriesIndex: '1', dataIndex: '1'}); 

運行發現根本沒效果（bar類型）。。。。。。。。。。。。。調試發現tooltip中showTip()源碼：

 if (isAxisTrigger) {
     var dataIndex = params.dataIndex;
     switch (chart.type) {
         case ecConfig.CHART_TYPE_LINE:
         case ecConfig.CHART_TYPE_BAR:
         case ecConfig.CHART_TYPE_K:
         case ecConfig.CHART_TYPE_RADAR:
     　　　　//問題就在這兒，serie.data[0].value是什么鬼？ 
            if (this.component.polar == null || serie.data[0].value.length <= dataIndex) {
                return;
            }
            var polarIndex = serie.polarIndex || 0;
            var vector = this.component.polar.getVector(polarIndex, dataIndex, 'max');
            this._event = {
            　　zrenderX: vector[0],
            　　zrenderY: vector[1]
            };
            this._showPolarTrigger(polarIndex, dataIndex);
        　　break;
       }
}      

然后在github上查看以前的版本，發現早在echarts 1.4版本中就加入了showTip()hideTip()的功能了，提交鏈接。
可以看見showTip()：

 1 +            if (isAxisTrigger) {
 2  +                // axis trigger 3  +                var dataIndex = params.dataIndex;
 4  +                switch (chart.type) {
 5  +                    case ecConfig.CHART_TYPE_LINE :
 6  +                    case ecConfig.CHART_TYPE_BAR :
 7  +                    case ecConfig.CHART_TYPE_K :
 8  +                        if (typeof xAxis == 'undefined' 
 9  +                            || typeof yAxis == 'undefined'
10  +                            || serie.data.length <= dataIndex
11  +                        ) {
12  +                            return;
13  +                        }
14  +                        var xAxisIndex = serie.xAxisIndex || 0;
15  +                        var yAxisIndex = serie.yAxisIndex || 0;
16  +                        if (xAxis.getAxis(xAxisIndex).type 
17  +                            == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
18  +                        ) {
19  +                            // 橫軸是類目20  +                            _event = {
21  +                                zrenderX : xAxis.getAxis(xAxisIndex).getCoordByIndex(dataIndex),
22  +                                zrenderY : grid.getY() + (grid.getYend() - grid.getY()) / 4
23  +                            };
24  +                        }
25  +                        else {
26  +                            // 縱軸是類目27  +                            _event = {
28  +                                zrenderX : grid.getX() + (grid.getXend() - grid.getX()) / 4,
29  +                                zrenderY : yAxis.getAxis(yAxisIndex).getCoordByIndex(dataIndex)
30  +                            };
31  +                        }
32  +                        _showAxisTrigger(
33  +                            xAxisIndex, 
34  +                            yAxisIndex,
35  +                            dataIndex
36  +                        );
37  +                        break;
38  +                    case ecConfig.CHART_TYPE_RADAR :
39  +                        if (typeof polar == 'undefined' 
40  +                            || serie.data[0].value.length <= dataIndex
41  +                        ) {
42  +                            return;
43  +                        }
44  +                        var polarIndex = serie.polarIndex || 0;
45  +                        var vector = polar.getVector(polarIndex, dataIndex, 'max')
46  +                        _event = {
47  +                            zrenderX : vector[0],
48  +                            zrenderY : vector[1]
49  +                        };
50  +                        _showPolarTrigger(
51  +                            polarIndex, 
52  +                            dataIndex
53  +                        );
54  +                        break;
55  +                }
56  +            }

我順便找了一下是在2.2.2-到2.2.3版本中被改了。

 

 下面這段代碼被改過了：

                switch (chart.type) {
                    case ecConfig.CHART_TYPE_LINE :
                    case ecConfig.CHART_TYPE_BAR :
                    case ecConfig.CHART_TYPE_K :
                    //應該只是想刪掉這個項，結果把處理程序也刪了
                    //case ecConfig.CHART_TYPE_TREEMAP :
                        if (this.component.xAxis == null 
                            || this.component.yAxis == null
                            || serie.data.length <= dataIndex
                        ) {
                            return;
                        }
                        var xAxisIndex = serie.xAxisIndex || 0;
                        var yAxisIndex = serie.yAxisIndex || 0;
                        if (this.component.xAxis.getAxis(xAxisIndex).type 
                            === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
                        ) {
                            // 橫軸是類目
                            this._event = {
                                zrenderX: this.component.xAxis.getAxis(xAxisIndex)
                                          .getCoordByIndex(dataIndex),
                                zrenderY: this.component.grid.getY() 
                                          + (this.component.grid.getYend() 
                                             - this.component.grid.getY()
                                            ) / 4
                            };
                        }
                        else {
                            // 縱軸是類目
                            this._event = {
                                zrenderX: this.component.grid.getX() 
                                          + (this.component.grid.getXend() 
                                              - this.component.grid.getX()
                                            ) / 4,
                                zrenderY: this.component.yAxis.getAxis(yAxisIndex)
                                           .getCoordByIndex(dataIndex)
                            };
                        }
                        this._showAxisTrigger(
                            xAxisIndex, 
                            yAxisIndex,
                            dataIndex
                        );
                        break;            

 

OK，把這個段刪除的代碼復制到你引用的echarts源碼tooltip.js中，然后要合並的就重新合並壓縮吧。

貼上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chart {
            height: 500px;
            width: 800px;
        }
    </style>
</head>
<body>
<div id="chart" class="chart">

</div>
<span id="hover-console"></span>
<span id="console"></span>

<script src="./js/jquery.js"></script>
<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
    // 基於准備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('chart'));

    var option = {
        tooltip: {
            show: true29
        },
        legend: {
            data: ['銷量']
        },
        xAxis: [
            {
                type: 'category',
                data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                "name": "銷量",
                "type": "bar",
                "data": [5, 20, 40, 10, 10, 20]
            }
        ]
    };

    // 為echarts對象加載數據
    myChart.setOption(option);
    var timer = 0;

    var total = option.xAxis[0].data.length;
    var count = 0;
    var tooltip = myChart.component.tooltip;
    function autoTip() {
        timer = setInterval(function () {
            var curr = count % total;

            //3.0以上版本的showTip使用方式
            //myChart.dispatchAction({type: 'showTip', seriesIndex: '1', dataIndex: '1'});
            tooltip.showTip({seriesIndex: '0', dataIndex: curr});
            count += 1;
        }, 1000);
    }
    autoTip();

    var zRender = myChart.getZrender();
    //mousemove和mouseout總是成對出現，而且out先出現。。。。所以沒法解決鼠標hover時暫停自動tip的效果
    zRender.on('mousemove', function (param) {
        console.log('move')
        if (timer) {
            clearInterval(timer);
            timer = 0;
        }
    });
    zRender.on('mouseout', function (param) {
        console.log('OUT');
        if (param.event) {
            //判斷坐標是否在圖表上，然后在處理應該可以實現
            if (!timer) {
                autoTip();
            }
        }
    });
</script>
</body>
</html>

 

補充：

3.0以上的實現方法已經在github共享了代碼，可以直接下載使用，如有問題歡迎補充糾正：

https://github.com/chengwubin/echarts-tooltip-auto-show