echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?

1. 怎么让ECharts的提示框tooltip自动轮播?

在用ECharts做大屏或者可视化展示项目的时候，让提示框tooltip自动轮播是比较常见的需求，给大家推荐一个插件叫echarts-tooltip-auto-show,名字是有点长，但是挺好用的。在hover显示tooltip之后，也可以正常轮播。

2. 代码怎么写？

2.1 常规使用

引用插件之后，调用方法tools.loopShowTooltip(myChart, chartOption, options),传入ECharts的实例、ECharts的配置项以及options(轮播间隔、是否开启循环等)即可，以下是代码示例:

<!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="myCharts" style="width: 600px;height:400px;"></div><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script><script src="./libs/tooltip-auto-show.js"></script><script type="text/javascript">// 用于清除定时器var tootipTimer = null;// X轴数据var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];// 需要渲染的series数据var seriesData = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('myCharts'));// 指定图表的配置项和数据var chartOption = {tooltip: {trigger: 'axis'},xAxis: [{type: 'category',data: xAxisData,axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '降水量',axisLabel: {formatter: '{value} ml'}},],series: [{name: '蒸发量',type: 'bar',itemStyle: {// 柱状图的颜色，渐变色color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' }])},data: seriesData},]};// 使用刚指定的配置项和数据显示图表myChart.setOption(chartOption);// 可调用clearLoop方法，清除定时器tootipTimer && tootipTimer.clearLoop();tootipTimer = null;// 调用轮播的方法tootipTimer = tools.loopShowTooltip(myChart, chartOption, {interval: 2000, // 轮播间隔时间loopSeries: true // 是否开启轮播循环});</script>

需要注意的是：如果你的数据是定时刷新的，比如5分钟调用一次接口，调用之前一定要先清除掉上一次的定时器，不然不断的刷新会有很多个定时器在跑，轮播会乱掉。

另外，有需要的话还可以配置seriesIndex指定循环显示某个系列，配置updateData分页循环，详见作者的GitHub地址：https://github.com/chengwubin/echarts-tooltip-auto-show

2.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 // 是否开启轮播循环
});