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

记录一下大屏开发中使用到的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)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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
          }
        ]
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

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)
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132