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
loopSeriestrue表示循环所有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

 

 

### Vue ECharts 实现 Tooltip 自动轮播效果 为了实现在 Vue 中使用 ECharts自动轮播 Tooltip 功能,可以借助 `echarts-auto-tooltip` 插件来简化开发过程。此插件允许设置定时器来自动生成并显示 Tooltips。 #### 安装依赖项 首先安装必要的 npm 包: ```bash npm install echarts echarts-auto-tooltip vue-echarts ``` #### 创建组件结构 创建一个新的 Vue 组件用于集成 ECharts 表及其自动轮播功能: ```vue <template> <div ref="chartContainer" style="width: 600px; height: 400px;"></div> </template> <script setup> import * as echarts from 'echarts'; import autoTooltipPlugin from 'echarts-auto-tooltip'; // 初始化表实例 const chartContainer = $ref(null); let myChart; onMounted(() => { // 基于准备好的 DOM,初始化 echarts 实例 myChart = echarts.init(chartContainer); // 注册自定义工具提示插件 echarts.registerAction('autoShowTip', function (payload, ecInstance) {}); const option = { title: { text: 'ECharts Auto Tooltip Example' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', type: 'bar', data: [120, 200, 150, 80, 70], itemStyle: { color: '#3aa1ff' } }] }; // 设置配置项 myChart.setOption(option); // 启用自动滚动提示框 setTimeout(function () { let dataIndex = 0; setInterval(function () { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: (dataIndex++) % 5 }); }, 2000); // 每隔两秒切换一次 }, 1000); }); </script> <style scoped> /* 添加样式 */ .echarts-tooltip { z-index: 999 !important; } </style> ``` 这段代码展示了如何通过 JavaScript API 来控制 ECharts 的行为,在页面加载完成后启动一个计时器每隔一段时间触发一次 `showTip` 行为从而达到自动播放的效果[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值