echarts地图tooptip滚动显示,地图随之一起选中状态展示

2 篇文章 0 订阅
1 篇文章 0 订阅

主要代码

	this.mapOptions = {
          tooltip: {
            show: true,
            backgroundColor: "rgba(0,0,0,0.8)",
            borderColor: "rgba(0,0,0,0.8)",
            textStyle: {
              color: "#fff"
            },
            formatter: function(params) {
              _this.tooltipIndex = params.dataIndex;
              const _val = params.value ? params.value : "-";
              const html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>" + params.marker + "&nbsp;&nbsp;" + _type + "&nbsp;&nbsp;" + _val + "</p></div>";
              return html;
            }
          },
          visualMap: {
            show: true,
            min: 0,
            max: 200,
            left: "20",
            top: "bottom",
            orient: "horizontal",
            inverse: true,
            calculable: true,
            seriesIndex: [0],
            text: ["高", "低"],
            inRange: {
              color: ["#bae7ff", "#69c0ff", "#1790ff", "#0050b3"] // 蓝绿
            }
          },
          series: [{
            type: "map",
            mapType: "china",
            selectedMode: "multiple",
            // selectedMode: "false", // 是否允许选中多个区域
            zoom: 1.2,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#1790ff",
                borderColor: "#fff",
                borderWidth: "1"
              },
              emphasis: {
                areaColor: "#896ff4"
              }
            },
            data: _this.mapData
          }]
        };
        
        _this.myChart.setOption(this.mapOptions);
        if (_this.timer) {
          clearInterval(_this.timer);
        }
       //定时显示
        _this.timer = setInterval(() => {
          _this.myChart.dispatchAction({
            type: "showTip", // 根据 tooltip 的配置项显示提示框。
            seriesIndex: 0,
            dataIndex: _this.tooltipIndex
          });
          // 如果不是第一个,在高亮之前取消上一个的高亮状态
          if (_this.tooltipIndex !== 0) {
            _this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: _this.tooltipIndex - 1
            });
          } else {
          //如果是第一个,把最后一个高亮状态取消
            _this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: _this.mapData.length - 1
            });
          }
          // 设置当前index为高亮状态
          _this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: _this.tooltipIndex
          });
          _this.tooltipIndex++;
          if (_this.tooltipIndex > _this.mapData.length) {
            _this.tooltipIndex = 0;
          }
        }, 3000);
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值