echart中tooltip自动展示代码示例
作者：13pan
这篇文章主要给大家介绍了关于echart中tooltip自动展示的相关资料,ECharts是一款基于JavaScript的数据可视化图表库,提供直观，生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下
引入js文件
import {autoHover} from ‘./tooltip’
/**
* echarts tooltip轮播
* @param chart ECharts实例
* @param chartOption echarts的配置信息
* @param options object 选项
* {
* interval 轮播时间间隔，单位毫秒，默认为3000
* true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
* seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
* 当loopSeries为true时，从seriesIndex系列开始执行。
* }
* @returns {{clearLoop: clearLoop}|undefined}
*/
export function autoHover(myChart, option, num, time) {
var defaultData = { // 设置默认值
time: 3000,
num: 14
};
if (!time) {
time = defaultData.time;
}
if (!num) {
num = defaultData.num;
}
var count = 0;
var timeTicket = 0;
// 清除定时器
function clearLoop() {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
}
myChart.off('mousemove', stopAutoShow);
myChart.getZr().off('mousemove', zRenderMouseMove);
// myChart.getZr().off('globalout', zRenderGlobalOut);
}
// 关闭轮播
function stopAutoShow() {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
}
}
function zRenderMouseMove(param) {
if (param.event) {
// 阻止canvas上的鼠标移动事件冒泡
// param.event.cancelBubble = true;
}
stopAutoShow();
}
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0 // serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
});
count++;
if (count >= num) {
count = 0;
}
}, time);
myChart.on('mouseover', function(params) {
clearInterval(timeTicket);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
});
});
myChart.on('mouseout', function() {
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0 // serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
});
count++;
if (count >= 14) {
count = 0;
}
}, 3000);
});
return {
clearLoop: clearLoop
};
}在echart里注册使用
myChart.setOption(option, true);
this.tootipTimer && this.tootipTimer.clearLoop(); // this.tootipTimer 在data里定义
this.tootipTimer = 0;
this.tootipTimer = autoHover(myChart, option, 8, 3000);附：echart tooltip自定义
ECharts 提供了 tooltip 的自定义功能，可以通过 formatter 函数来自定义 tooltip 的内容和样式。
下面是一个简单的示例：
option = {
// ... 其他配置项
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function (params) {
// 自定义 tooltip 的内容和样式
return params[0].name + '<br/>' +
params[0].seriesName + ' : ' + params[0].value + '<br/>' +
params[1].seriesName + ' : ' + params[1].value + '<br/>' +
params[2].seriesName + ' : ' + params[2].value + '<br/>' +
params[3].seriesName + ' : ' + params[3].value + '<br/>'
}
},
// ... 其他配置项
series: [
{
name:'邮件营销',
type:'bar',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
}
]
};在上面的示例中，通过 formatter 函数来自定义 tooltip 的内容和样式。在这个函数中，我们可以通过 params 参数获取到当前 tooltip 中所展示的数据，从而可以自定义 tooltip 的样式和展示内容。
需要注意的是，formatter 函数的返回值必须是一个字符串。在字符串中，可以使用 HTML 标签来控制 tooltip 的样式，比如使用 <br/> 来换行。
总结
到此这篇关于echart中tooltip自动展示的文章就介绍到这了,更多相关echart tooltip自动展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！