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 // 是否開啟輪播循環 });

3. 示例代碼下載

可以復制以上代碼運行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下載，更多示例將會持續更新，歡迎關注。

總結

以上是生活随笔為你收集整理的echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。