echarts地图轮播markpoint-自用记录📝

echarts地图轮播markpoint

正常添加echarts地图后，添加markpoint图层

javascript 复制代码

 //引入echarts 注册地图 略过 只展示关键代码
option.series= [
            {
              // roam: true,
              name: '地图',
              type: 'map',
              id: 'mapData',
              map: 'china',
              data: this.outdata,  //无需在意 配合visualMap给地图区块添加颜色使用
              center: [95, 35],
              zoom: 1.5,
              z: 2,
              itemStyle: {
                borderColor: 'rgba(0,0,0,0.15)',
                borderWidth: 1.3,
                shadowColor: 'rgba(0,0,0,0.2)',
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
  					//下方是markpoint代码 因为echarts官方已经不推荐使用markpoint 改为使用scatter
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              //下方的symbol替换为需要展示的图标的base64编码即可
              symbol:
                'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAA4VJREFUSEvNlV1oHUUUx/9nZnbv7s3dG2+akGoNGgp5UtDaEmqxNoIfXIUSYksrERP8Kj6KghSFvFQRTHzyIS0aWqQiIUUhHz4IxlDbBxUEK0UQCrYi9MamuTH3Y2d3jsy9DQZpbjcpBAeGhd2Z85v/mf85S9ikQZvEwf8P9ORXiy3kpnZp42yPockT8rcgLH0//lTztSRZuaWiA9NLbQtIH12uYlAzNRsGSAFCAY7Li55vxlKm8u7M3qDQCNgQ9NjE8o5q1Z+qaGytBZH1ycQgSYBCbfo+/sz6pfz0nsxPa8HWBO3/rNRxteydq4Z8tw1KBLC4Aas9GSxRB0qGH+DKFkc8/OWjdPlmsDVB+z7WZ/5eEr0kAbNyemK0NHFN1UKVwPa9hQoGK0ImMGfmnlB9iUH5U+HO60X1XVhhVyqCIaD9Do2hxwn3tdnIwC/zBkPnCH+UJOxhLFCkEbYF0Z7pHveH/8JuqqhnVB9dKsljiOp3oUSMsecMulodkM3hjfHrXxoDkwKhIJAgIAUEvn579pnUsUSgncPhaROpw2AAbLBjWwUn+n3ULmp16THj1UmNHwtO3SgKaAri8bn9zsFEoIc+NJMI8XQtZzrC3s4ihvtzIAtepYjBeHOqim9+dwFVd2GQNTPfPqvyiUC7hsPjcei8TMaAqxo5M4/Jd7Yi5cjVHFS1Qe/xCq6yB0gCKyCdNaNnD6kjiUDdH0TPx5E8aTQTRQZhoYBD3RHeOHwXXKduhlAbjEwtYPxCBm7WBQuCccDNW/TA1wfcU4lAu0cWW8Jy5gI03Qkw4uIywsI8HrhH45EHg1r6zl4M8fO1AE5rFtITsF4gj6+0txfv/6I3dz0RyC7qfi98TVfUR/buhTGIl8vQxSXEVQ0oCbc5A5FrAnkSwlpbMrxAH5l7yRtNXEd24b4hVmUnPhGxGEAEMDNgDGDqHUG4slakJGwJCPgZPSa7nFdmeyhaF6gOu+SV3Y4JE8u8sQBrOtt2VtqRdbuts3Q01dKp+mbyVF13r1vZcO/QJa9dbfskMvW6YgNQre3U+55sMqfT2csvzg52VjbcvVc2WmUVp+NkFMuDbJVZmENwgvDzXJf7QiMlKzFu+T/6F8Ze2eFPo4j6bOqUH014rap/dpAaKlk3yG7YPcJ+XNHvixQxkXrr/OtUbpSu1d8SK0oacMNmuF3AhlJ3O9BNS90/oxFMKoVN5+kAAAAASUVORK5CYII=',
              symbolSize: 30,
              symbolOffset: [0, '-50%'],
              label: {
                show: true,
                position: 'top',
                color: '#333333',
                fontSize: 14,
                fontWeight: 600,
                formatter: '{b}', //配合下方data中的name使用 展示name
                textBorderColor: '#ffffff',
                textBorderWidth: 2,
                textBorderType: 'solid',
              },
              emphasis: {
                scale: 1.2,
                label: {
                  fontSize: 18,
                },
              },
              select: {
                label: {
                  color: '#333333',
                  fontSize: 18,
                  fontWeight: 600,
                },
              },
              data: [
                {
                  name: '济南片区',
                  value: [117.2, 36.7],
                },
                {
                  name: '西南片区',
                  value: [104.065701, 30.659487],
                },
                {
                  name: '青岛片区',
                  value: [120.1, 36.4],
                },
                {
                  name: '华中片区',
                  value: [117.291321, 31.861125],
                },
                {
                  name: '华北片区',
                  value: [116.4, 39.9],
                },
                {
                  name: '华东片区',
                  value: [121.473701, 31.230393],
                },
                {
                  name: '华南片区',
                  value: [113.6, 23.1],
                },
                {
                  name: '东南片区',
                  value: [119.4543, 26.2875],
                },
                {
                  name: '中原片区',
                  value: [113.653427, 34.761125],
                },
              ],
            },
          ],

轮播代码如下：

思路是对当前高亮节点进行取消高亮操作，然后在高亮下一个节点

需要注意seriesIndex 可以通过在鼠标移入事件中添加打印信息获取

javascript 复制代码

//该段代码在echarts初始化之后调用即可
startLunbo () {
        if (this.intervalId) {
          clearInterval(this.intervalId)
          this.intervalId = null
        }
        this.intervalId = setInterval(() => {
          this.myMapChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 1,
            dataIndexInside: this.lunboId === 0 ? 8 : this.lunboId - 1, //和上面的代码片段中data的长度有关
          })
          this.myMapChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndexInside: this.lunboId,
          })
          this.toolIdx = this.lunboId
          this.lunboId++
          if (this.lunboId > 8) { //和上面的代码片段中data的长度有关
            this.lunboId = 0
          }
        }, 2500)
      }

其中鼠标的移入移出事件自行完成即可