Echarts自动轮播插件

在做大屏项目的时候，大屏的功能主要是用来展示功能，所以基本上不会有鼠标的操作，有时候并不能一次性展示所有需要所有需要展示的内容，这时候就需要自动轮播了。echarts-auto-tooltip下载提取码：276j。

需要注意的是，如果Echarts的数据用的是series里面的data，那么直接使用该插件即可。如果使用的是dataset,

[
['product', '数量', '占比'],
["山东", "104", "19%"],
["山西", "86", "43%"],
["内蒙", "30", "4%"]
]

这种格式的data的话，在第70行左右需要改动一下：

原代码：dataLen = series[seriesIndex].data.length;

修改之后：

if(options.dataType=='series'){dataLen = series[seriesIndex].data.length;
}else{dataLen = chartOption.dataset.source.length-1;
}

属性配置
属性	说明	默认
interval	轮播时间间隔，单位毫秒	默认为2000
loopSeries	true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip	默认为false。
seriesIndex	指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行.	默认为0

使用方法：

var echart_demo= echarts.init(document.getElementById('id'));

var option = {//具体内容不在此赘述}

tools.loopShowTooltip(echart_demo, option, {loopSeries: true,interval:6000});

注意使用该插件，请配置Echarts中的empasis属性（应该不会忘记吧。。我就是顺嘴提一下）

demo演示地址：http://www.admin123.top:8877/share/html/echart_lb.html(加载稍微有点慢)

以防地址失效，可直接下载该demo：https://pan.baidu.com/s/1c5alw0eqXLISKBFy1VKrww，提取码：0lo8

Echarts自动轮播插件相关推荐

Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）
Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法) echarts-auto-tooltip使用方法: //引入echarts-auto-tooltip.js ...
Echarts——自动轮播提示框插件使用
首先引入echarts_auto_tooltip.js文件文件如下: /*** echarts tooltip 自动轮播* @param chart* @param chartOption* @pa ...
echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?
1. 怎么让ECharts的提示框tooltip自动轮播? 在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求,给大家推荐一个插件叫echarts-too ...
使用swiper插件时不会自动轮播
最近公司用到了swiper轮播插件,我这边引入的是swiper 8,按照文档给出的示例代码操作后发现无法自动轮播. 这是官网提供的示例上的代码: 引入后发现并不能自动轮播,最后研究了半天,在文档上看到 ...
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
要实现的功能比如:我们要实现白云地图24镇街的常住人口统计展示,然后需要我们实现 1s 自动轮播一次地区,自定义标签样式,自定义悬浮样式. 准备工作 1.安装依赖 npm i echarts -s ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
一款好用的轮播插件swiper，适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"><div cla ...
第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
AdPlayBanner：功能丰富、一键式使用的图片轮播插件
概述 AdPlayBanner:功能丰富.一键式使用的图片轮播插件详细代码下载:http://www.demodashi.com/demo/11312.html AdPlayBanner是一个An ...

Echarts自动轮播插件

Echarts自动轮播插件相关推荐

最新文章

热门文章