echarts地图轮播循环showTip【踩坑】

背景

以下是一段简单的循环定时触发echarts实例toolTip action的简单代码

    startToolTipLoop() {
      let index = 0;
      const nameArr = ['俄罗斯', '蒙古', '哈萨克斯坦', '中国', '美国', '越南'];

      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      const callback = () => {
        this.switchTooltip(this.chart, nameArr[index]);
        // 更新索引(使用取模运算实现循环)
        index = (index + 1) % nameArr.length;
      };
      callback(); // 立即执行第一次提示
      this.timer = setInterval(callback, 3000);
    },
    switchTooltip(chart, name) {
      console.log('switchTooltip name ', name);
      // 显示tooltip
      this.chart.dispatchAction({
        type: 'showTip',
        geoIndex: 0,
      //  geoId: 'geo1',
        name
      });
    },

预期是在render图表的函数中去调用此方法就可循环触发,但是toolTip并没有出现,将dispatchAction中的type改为highlight却能生效,说明geo和name配置应该没错才对。

解决

修改dispatchAction,改为seriesIndex定位即可

 this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        name
      });
ECharts中,可以通过配置`tooltip`的`formatter`和`triggerOn`属性来实现地图上指定省份的tooltip轮播。以下是一个示例代码,展示了如何在ECharts地图中实现指定省份的tooltip轮播: ```html <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <title>ECharts</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="main" style="height: 100%"></div> <script> var chart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name + ':' + params.value; }, triggerOn: 'none' }, series: [ { name: '数据', type: 'map', map: 'china', data: [ {name: '北京', value: Math.round(Math.random() * 1000)}, {name: '天津', value: Math.round(Math.random() * 1000)}, {name: '上海', value: Math.round(Math.random() * 1000)}, // 其他省份数据 ], itemStyle: { normal: { areaColor: '#efefef', borderColor: '#ccc' }, emphasis: { areaColor: '#d2e6f3' } } } ] }; chart.setOption(option); var currentIndex = 0; var provinces = ['北京', '天津', '上海']; // 需要轮播的省份 setInterval(function () { var province = provinces[currentIndex]; chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: provinces.indexOf(province) }); currentIndex = (currentIndex + 1) % provinces.length; }, 2000); </script> </body> </html> ``` 在这个示例中,我们首先初始化了一个ECharts实例,并设置了地图的`tooltip`配置。然后,我们使用`setInterval`函数每2秒触发一次`showTip`动作,指定要显示的省份的`dataIndex`。这样就可以实现指定省份的tooltip轮播
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值