echarts自动轮播tootip
echarts中tooltip自动轮播工具
apifunction loopShowTooltip (chart, chartOption, options);
| 参数 | 说明 |
|---|---|
| chart | ECharts实例 |
| chartOption | ECharts配置信息 |
| options | { interval:轮播时间间隔，单位毫秒，默认为2000 loopSeries: boolean类型，默认为false。true表示循环所有series的tooltip；false则显示指定seriesIndex的tooltip。 seriesIndex: 默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行。 updateData: 自定义更新数据的函数，默认为null；用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。 } |
| 返回值： | {clearLoop: clearLoop} 取消轮播 |
example
// 基于准备好的dom，初始化echarts图表 let chart = echarts.init(document.getElementById('id')); let chartOption = { // ... }; // 为echarts对象加载数据 chart.setOption(chartOption); // 调用本工具接口 tools.loopShowTooltip(chart, chartOption, { loopSeries: true }); 更新数据
let data = [{ name: '2000', value: 55 }, { name: '2001', value: 67 }, { name: '2002', value: 60 }, { name: '2003', value: 73 }, { name: '2004', value: 93 }, { name: '2005', value: 100 }, { name: '2006', value: 220 }, { name: '2007', value: 220 }, { name: '2008', value: 220 }, { name: '2009', value: 220 }, { name: '2010', value: 220 }]; let currentPage = 0; // 当前页 let counts = 2; // 每页条数 let total = data.length; // 总数 let totalPage = Math.ceil(total / counts); // 总页数 let chartOption = { tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'bar' }] }; function updateData() { let xAxisData = []; let seriesData = []; let currentData = data.slice(currentPage * counts, (currentPage + 1) * counts); currentData.forEach(function (item) { xAxisData.push(item.name); seriesData.push(item.value); }); currentPage = ++currentPage % totalPage; bar.xAxis.data = xAxisData; bar.series[0].data = seriesData; } updateData(); // 基于准备好的dom，初始化echarts图表 let chart = echarts.init(document.getElementById('id')); // 为echarts对象加载数据 chart.setOption(chartOption); // 调用本工具接口 tools.loopShowTooltip(chart, chartOption, { loopSeries: true, updateData: updateData }); 效果展示
MIT
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
