当前位置: 首页 > Web前端 > vue.js

如何让ECharts的提示框tooltip自动旋转?

时间:2023-03-31 22:28:28 vue.js

1。如何让ECharts的提示框tooltip自动旋转?在使用ECharts做大屏或者可视化展示项目的时候,比较常见的是让提示框tooltip自动旋转根据需求推荐一个插件叫echarts-tooltip-auto-show。名字有点长,但是很好用。tooltip显示在hover上后,也可以正常旋转。2、代码怎么写?2.1常规使用参考插件后,调用tools.loopShowTooltip(myChart,chartOption,options)方法,传入ECharts实例、ECharts配置项、options(轮播间隔、是否开启循环等)),下面是代码示例:

需要注意的是,如果你的数据是定时刷新的,比如5分钟调用一次接口,调用前一定要把之前的计时清空,否则连续刷新的时候会有很多定时器在运行,而轮播将被搞砸。另外,如果有需要,还可以配置seriesIndex来指定一个系列要循环展示,配置updateData分页周期。详见作者的GitHub::https://github.com/chengwubin/echarts-tooltip-auto-show2.2在vue中使用需要参考tooltip-auto-show-vue.js文件。以下是一些示例代码。同样,如果数据需要定时刷新,记得先清除定时器。import{loopShowTooltip}from'./utils/tooltip-auto-show-vue'//调用方法this.tootipTimer=tools.loopShowTooltip(myChart,chartOption,{interval:2000,//轮换间隔loopSeries:true//是否启用轮播循环});3.示例代码下载可以复制以上代码运行查看效果,也可以从GitHub下载:https://github.com/Jackyyans/code123,更多示例会持续更新,欢迎关注。