echarts地图可视化大屏使用echarts-map实现地图轮播效果

枍柠`

已于 2023-07-22 14:24:26 修改

阅读量6.5k

点赞数 9

分类专栏： echarts使用案例文章标签： echarts 前端 javascript

于 2022-12-09 16:32:44 首次发布

本文链接：https://blog.csdn.net/qq_45630675/article/details/128220594

版权

echarts使用案例专栏收录该内容

3 篇文章 1 订阅

订阅专栏

记录一下大屏开发中使用到的echartsMap
大屏的页面根据需求前前后后改了几个版本了，地图的样式也改了又改
这里记录一下，因为echarts属性用到的比较多也比较杂，防止以后需要用到忘记了

初始效果

效果图：
适应大屏风格的发光地图效果，用了两个图层实现叠加背景图片实现：
在这里插入图片描述
地图配置代码：
到这里是简单实现了图中有高度效果的地图

// 地图初始化
    render_echartsMap(mapData) {
      var chartDom = document.getElementById('map_wrapper') // 挂载元素
      var myChart = chartDom && echarts.init(chartDom) // 初始化echarts地图
      echarts.registerMap('JS', jiaxing) // 注册地图 注意这里的地图json文件需要换成自己需要的
      var option
      option = {
        geo: [
          {
            map: 'JS',
            aspectScale: 1, // 横向拉伸
            zoom: 1.2,
            zlevel: 2,
            label: {
              show: true,
              color: '#eee'
            },
            itemStyle: {
              color: 'rgba(23, 89, 151, 0.35)', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#5FD7FF' // 边框颜色
            },
            emphasis: {
              areaColor: '#195BB9',
              label: {
                show: true
              }
            }
          },
          {
            map: 'JS',
            top: '13%',
            aspectScale: 1, // 横向拉伸
            zoom: 1.2,
            zlevel: 1,
            itemStyle: {
              color: 'rgba(23, 89, 151, 0.1)', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: 'RGBA(129, 222, 227, 0.3)', // 边框颜色
              shadowColor: '#fff', // 外部阴影
              shadowBlur: '10',
              colorStops: [
                {
                  offset: 0,
                  color: 'black' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'blue' // 100% 处的颜色
                }
              ]
            }
          }
        ]
      }
      myChart && myChart.setOption(option)
    }

echarts-map 叠加散点图层

效果图：
在这里插入图片描述
根据需求，需要渲染辖区内的数据量，对辖区内的高危数据进行展示，又加了散点图层
由于用户的设备屏幕尺寸较小影响渲染，发光效果会导致文字看不清就取消了

代码：
在上述代码的 render_echartsMap() 方法中，增加以下内容：

    render_echartsMap(mapData) {
      // 地图json文件中的
      const geoCoordMap = {
        南湖区: [120.842186, 30.711139],
        秀洲区: [120.686302, 30.768878],
        嘉善县: [120.902273, 30.8996],
        海盐县: [120.929474, 30.474419],
        海宁市: [120.623175, 30.425385],
        平湖市: [121.103105, 30.705649],
        桐乡市: [120.483851, 30.605938],
        经开区: [120.726302, 30.728878]
      }
      // 转化为需要渲染的数据
      const convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      option = {
        geo: [...], // ...... 这里是geo图层
        series: [
          {
            name: '散点', // 自定义名称
            type: 'effectScatter', // scatter  effectScatter
            coordinateSystem: 'geo', // 设置坐标系类型
            data: convertData(mapData), // 设置散点位置和数据
            symbolSize: function(val) {
              // 设置散点大小
              return 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true, // 是否显示鼠标悬浮动画
            label: {
              // 静态显示时的样式
              normal: {
                show: true, // 显示地区名称
                formatter: function(data) {
                  // 显示模板
                  return '高危企业：' + data.value[2]
                },
                position: 'bottom' // 显示位置
              },
              // 鼠标悬浮上去的样式
              emphasis: {
                // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                label: {
                  // label高亮时的配置
                  show: true,
                  textStyle: {
                    color: '#ffffff', // 高亮时标签颜色变为 白色
                    fontSize: 20 // 高亮时标签字体 变大
                  }
                },
                itemStyle: {
                  // itemStyle高亮时的配置
                  areaColor: '#006cff' // 高亮时地图板块颜色改变
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#27d3c3',
                shadowBlur: 10
              },
              // 鼠标悬浮上去的样式
              emphasis: {
                fontSize: 20
              }
            },
            zlevel: 3
          }
        ]
      }
    },

echarts-map 实现轮播效果 tooltip formatter

效果图：
在这里插入图片描述
完整代码：

    // 地图初始化
    render_echartsMap(mapData) {
      const geoCoordMap = {
        南湖区: [120.842186, 30.711139],
        秀洲区: [120.686302, 30.768878],
        嘉善县: [120.902273, 30.8996],
        海盐县: [120.929474, 30.474419],
        海宁市: [120.623175, 30.425385],
        平湖市: [121.103105, 30.705649],
        桐乡市: [120.483851, 30.605938],
        经开区: [120.726302, 30.728878]
      }
      const convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value[0], data[i].value[1], data[i].value[2])
            })
          }
        }
        return res
      }
      var chartDom = document.getElementById('map_wrapper')
      var myChart = chartDom && echarts.init(chartDom) // 初始化echarts
      echarts.registerMap('JS', jiaxing) // 注册地图
      var option
      option = {
        tooltip: {
          show: true,
          confine: true,
          textStyle: {
            align: 'left'
          },
          formatter: function(data) {
            // 显示模板
            return [
              data.data.name,
              '高危企业：' + data.data.value[2] + ' 家',
              '高危车辆：' + data.data.value[3] + ' 辆',
              '高危驾驶人：' + data.data.value[4] + ' 人'
            ].join('<br>')
          }
        },
        series: [
          {
            name: '嘉兴市高危数据统计',
            type: 'map',
            map: 'JS',
            aspectScale: 1, // 横向拉伸
            zoom: 1.35,
            radius: '80%',
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            data: convertData(mapData),
            label: {
              normal: {
                show: true,
                textStyle: { color: '#fff' }
              },
              emphasis: {
                show: true,
                textStyle: { color: '#fff' }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#5FD7FF', // 区域边框颜色
                areaColor: 'rgba(23, 89, 151, 0.35)' // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#fff',
                areaColor: 'rgba(37, 200, 249, 0.75)'
              }
            }
          }
        ]
      }
      myChart && myChart.setOption(option)
      this.mapActive(mapData, myChart)
    },
    // 地图高亮轮播
    mapActive(mapData, myChart) {
      if (!myChart) {
        return
      }
      const dataLength = mapData.length
      // 用定时器控制高亮
      this.mTime = setInterval(() => {
        // 清除之前的高亮
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        this.dataIndex++
        // 当前下标高亮
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
        if (this.dataIndex > dataLength) {
          this.dataIndex = 0
        }
      }, 3000)
      myChart.on('mouseover', () => {
        console.log('mouseover')
        // 停止定时器，清除之前的高亮
        clearInterval(this.mTime)
        this.mTime = ''
        console.log(this.mTime)
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.dataIndex
        })
      })
      // 鼠标划出重新定时器开始
      myChart.on('mouseout', () => {
        this.mapActive(mapData, myChart)
      })
    },