基于实现地图弹窗轮播功能及遇到的问题解决

基本使用

获取地图 geojson 数据

链接： 阿里云数据可视化平台

获取ECharts

npm install echarts

或者是使用地址链接

<script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>

地图基本创建

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/map/js/china');
 
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 地图示例',
        subtext: '中国地图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['中国地图']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '中国地图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码演示了如何在ECharts中创建一个基本的中国地图，包括如何初始化ECharts实例、设置图表的配置项和数据。

功能实现

区域分级

series: [{
   tooltip: {
       trigger: 'item',
   },
   name: 'beijing',
   type: 'map',
   map: 'beijing', // 自定义扩展图表类型
   showLegendSymbol: true, // 存在legend时显示
   label: { // 文字
       show: true,
       color: '#fff',
       fontSize: 10
   },
   itemStyle: { // 地图样式
       areaColor: '#282C34',  //区域颜色
       borderColor: '#ffffff',  //边框颜色
       borderWidth: 1
   },
   emphasis: { // 鼠标移入时显示的默认样式
       itemStyle: {
           areaColor: '#4adcf0',
           borderColor: '#404a59',
           borderWidth: 1
       },
       label: { // 文字
           show: true,
           color: '#0D5EFF',
           fontSize: 12,
           fontWeight: 600
       },
   },
   data: [
       {
           name: '丰台区',
           //自定义区域的颜色
           itemStyle: {
                   areaColor: '#F50508',
                   borderColor: '#1773c3', // 区域边框
                   shadowColor: '#1773c3', // 阴影
           }
       }
   ],
  }],
}

• name的属性值必须要对应，比如地图上是丰台区，name值要是丰台区，那么就不会生效。
• 注册的地图名称，必须与map值一致，比如

区域轮播高亮

实现轮播高亮需要借助官方提供的：dispatchAction 、 highlight 、downplay 这3个API来实现

设置轮播

//设置轮播
myEchart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,  //指定哪一个系列，就是series里的哪一个
    dataIndex: 0  //指定高亮的下标
})

注意： 必须在设置完属性后，再使用

接下来无法就是用个定时器，动态改变dataIndex的值就好

弹窗轮训

和区域高亮轮播使用的方法相同，用到的属性值不同

设置轮播

myChart.dispatchAction({
  type: 'downplay',
  seriesIndex: 0,
})

弹窗样式写在 echarts 属性中的 tooltip

tooltip: {
          backgroundColor: 'none',
          trigger: 'item',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 500,
          },
          position: function (point) {
            return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
          },
          padding: 0,
          borderWidth: 0,
          shadowBlur: 0, // 去掉阴影
          borderColor: 'none',
          className: 'custom-tooltip-box',
          formatter: function (params) {
          
          },
},

轮播设定的方法

在ECharts中实现地图上的标记点轮播显示信息时，可以使用setInterval定时更新数据，并通过setOption方法重绘图表。

• 准备一系列的地图数据，每个数据都有高亮和正常状态的样式。
• 在ECharts中，可以通过设置 tooltip.trigger="axis" ，来显示数据轴上的提示框。
• 实现tooltip的自动轮播显示，结合使用 setInterval()和 dispatchAction()方法，使用setInterval方法设置一个定时器，轮播高亮不同的地区。
• 获取chart DOM 实例，监听鼠标事件，悬浮时清空定时器，鼠标离开开启定时器，继续轮播。

      this.mapSet(myChart, true)
      this.initTimer(myChart)
 
      myChart.on('mousemove', function (e) {
        clearInterval(_this.hoverTimer)
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        })
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        })
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        })
      }) //鼠标移入静止播放
      myChart.on('mouseout', function (e) {
        clearInterval(_this.hoverTimer)
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        }) //鼠标移出后先把上次的高亮取消
        // 把点击过的选中样式去掉
        if (this.curSelectName) {
          myChart.clear()
          myChart.setOption(option)
        }
        _this.initTimer(myChart)
      })
      myChart.on('click', function (e) {
        this.curSelectName = e.name
        let index = _this.mapDate.findIndex(item => item.name === e.name)
        _this.curHoverIndex = index
      })

    // 地图定时轮播动画
    initTimer(myChart) {
      this.hoverTimer = setInterval(() => {
        this.mapSet(myChart)
        this.cartoonIndex++
        if (this.cartoonIndex >= this.mapDate.length) {
          this.cartoonIndex = -1
        }
        this.curHoverIndex = this.cartoonIndex
      }, 5000)
    },
    mapSet(myChart, isfirst) {
      // 隐藏提示框
      myChart.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0,
        dataIndex: this.cartoonIndex,
      })
      // 显示提示框
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.cartoonIndex + 1,
      })
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: this.cartoonIndex,
      })
      // 高亮指定的数据图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: this.cartoonIndex + 1,
      })
      if (isfirst) {
        this.cartoonIndex++
        this.curHoverIndex = this.cartoonIndex
      }
    },

去除弹窗阴影

问题复现

在使用了弹窗中使用了 formatter 设置自定义的样式背景时，echarts 默认的边框 border 阴影还有明显的显示，在tooltip 中设置了 shadowBlur: 0 依旧显示，查看元素如下图：

弹窗上未绑定任何 class 样式，在标签中有绑定行内样式 box-shadow 导致弹窗带有默认阴影样式。

解决方法

• 在 tooltip 对象中添加自定义样式名 className
• 在 css 样式中去除阴影

 tooltip: {
          backgroundColor: 'none',
          trigger: 'item',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 500,
          },
          position: function (point) {
            return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
          },
          padding: 0,
          borderWidth: 0,
          shadowBlur: 0, // 去掉阴影
          borderColor: 'none',
          className: 'custom-tooltip-box',
          formatter: function (params) {
            
          },
        },

css 样式（需要使用深度样式修改 deep）

:deep(.custom-tooltip-box) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

自定义 tooltip 位置

实现要求：弹窗显示的位置在地图区域中心点位的正上方

使用 position 函数表达法

point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

返回值：
可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。

• point[0] - 140：弹框宽度的一半
• point[1] - 140]：弹窗的整体高度

position: function (point) {
   return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
},