一、场景：最近做demo使用到了百度Echarts插件，其动态渲染结果十分酷，为了能够实时显示服务器传过来的数据，因此，需要用到echarts中的tooltip组件（这里给出echarts-v2版本，v3版本官方已经给出了tooltip的showTip和hideTip方法实现悬浮效果）
二、echarts-v2 tooltip显示分析
mychart结构图.png
上述截图可以看到无法操作tooltip悬浮显示，因此参考了网上资料，通过mychart.getZrender()获取zrender（也就是zr属性），其下面storage属性里面element中有很多zrender**字典，其中有些_echartsData值里面就出现bar的axis值，如下图所示：
image.png
v2版本无法使用tooltip的showTip方法，因此需要人为控制Echarts鼠标事件触发，即可实现tooltip悬浮效果
zrender.trigger('mousemove', {
zrenderX: Math.ceil(style.x + style.width/2),
zrenderY: Math.ceil(style.y + style.height/2)
});
三、echarts-v2 tooltip悬浮显示实现
var counts = option.series[0].data.length;
setTimeout(function() {
autoHover();
setInterval(autoHover, 1000 * counts);
}, 1000);
function autoHover() {
//console.log(myChart);
var zrender = myChart.getZrender();
console.log(zrender);
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;
}
}
}
四、echarts-v3 tooltip悬浮显示实现
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();
相比v2实现方式，v3版本实现非常简单易理解
五、Echarts tooltip悬浮效果如下：
test.gif
