echarts地图tooltip自动轮播

echarts的tooltip按数据轮播

 

 

 

核心代码

var mycharts = echarts.init(this.$refs.echartsMap);
var option ={};
mycharts.setOption(option);

var index = 0; //播放所在下标
this.mTime = setInterval(function() {
     mycharts.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
     });
     index++;
     if(index >= option.series[0].data.length) {
       index = 0;
     }
}, 6000);

dispatchAction:可以自动触发tooltip方法,然后6秒后切换至下一条tooltip数据

需echarts3及以上支持

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要实现 ECharts WordCloud 图表中 Tooltip自动轮播功能,可以使用 ECharts 提供的 `setInterval` 和 `clearInterval` 方法结合 Tooltip 的 `showTip` 和 `hideTip` 方法实现。 具体而言,你可以在 option 中添加以下代码: ``` tooltip: { show: false, formatter: function (params) { return 'Word: ' + params.name + '<br>Value: ' + params.value; } }, series: [{ type: 'wordCloud', // 设置其他属性 ... // 鼠标移入时显示 Tooltip emphasis: { focus: 'self', textStyle: { shadowBlur: 10, shadowColor: '#333' } }, // 鼠标移出时隐藏 Tooltip blur: { textStyle: { opacity: 0 } }, // 自动轮播 Tooltip animationDurationUpdate: 2000, animationEasingUpdate: 'linear', animationDelayUpdate: function (idx) { return idx * 50; }, onmouseover: function (params) { var index = params.dataIndex; var intervalId = setInterval(function () { chart.dispatchAction({ type: 'hideTip', dataIndex: index }); index = (index + 1) % data.length; chart.dispatchAction({ type: 'showTip', dataIndex: index }); }, 3000); chart.__intervalId = intervalId; }, onmouseout: function (params) { clearInterval(chart.__intervalId); } }] ``` 在这个例子中,我们首先将 Tooltip 的 `show` 属性设置为 `false`,表示一开始不显示 Tooltip。然后,我们在 WordCloud 的 `emphasis` 和 `blur` 属性中分别设置了鼠标移入和移出时 Tooltip 的显示和隐藏样式。 接着,我们在 WordCloud 的 `onmouseover` 和 `onmouseout` 事件中分别实现了鼠标移入和移出时的自动轮播功能。在 `onmouseover` 事件中,我们使用 `setInterval` 方法定时切换 Tooltip 的显示内容。在 `onmouseout` 事件中,我们使用 `clearInterval` 方法清除定时器。 最后,我们设置了 WordCloud 的 `animationDurationUpdate`、`animationEasingUpdate` 和 `animationDelayUpdate` 属性,用于控制 Tooltip 切换的动画效果和间隔时间。 请注意,在实现自动轮播功能时,需要将 ECharts 实例保存为一个变量,以便在 `onmouseout` 事件中清除定时器。在本例中,我们将 ECharts 实例保存为了 `chart` 变量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值