echarts map （echarts地图）使用总结

项目中最近使用了echarts的地图组件，这里做个总结(以温州市的地图为例)。

效果如下：

使用要点：

1.获得地图的数据

在阿里云的数据可视化平台可以得到

2.地图的绘制方法
eharts的官网可以查询到，type为map

3.轮播
轮播可以通过实例的 dispatchAction方法来控制各种事件的发生

4.选中后的富文本效果
echarts支持的 emphasis.label.formatter 不支持书写html，但是支持富文本的书写，可以定义背景图片，上图中的效果就是使用了24张背景图片（默认12张，选中后12张），具体代码见下文。

5.地图的立体效果
引入echarts的geo组件，再配上不同的颜色和一定的高度，就会有立体的效果

代码：

axios.get("/温州市.json").then((res) => {
    echarts.registerMap("温州市", res.data);
    gzData = res.data
    maps = echarts.init(mapEcharts.value);
    mapActive()
    let option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,0)",
      },
    series: [
        {
          type: "map",
          map: "温州市",
          data: mapData.value,
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          tooltip: {
            // 显示的窗口
            trigger: "item",
            formatter: function (item) {
              var tipHtml = "";
              return tipHtml;
            },
            position: function(){},
            borderWidth: 0,
          },
          itemStyle: { // 地图样式
			borderColor: 'rgba(0, 178, 255, 1)',
			borderWidth: 2,
			// areaColor:'rgba(0, 137, 208, 0.32)',
			areaColor: new echarts.graphic.LinearGradient(0,1,0,0,[{ offset:0, color:"rgba(0, 137, 208, 0.32)"},{ offset: 1, color:"rgba(0, 66, 164, 0.32)"}],false),
			shadowColor: 'RGBA(7, 59, 115, .1)',
			shadowOffsetX: -2,
			shadowOffsetY: 2,
			shadowBlur: 10
		},
        emphasis: { // 鼠标移入动态的时候显示的默认样式
			itemStyle: {
				areaColor: 'rgba(255, 191, 0, 0.52)',
				borderColor: 'rgba(255, 180, 0, 1)',
				borderWidth: 2
			},
		label: { // 文字
			show: true,
			color: '#fff',
			fontSize: 18,
            fontWeight: 600,
            formatter: (item) => {
               let html = `{${map[item.data.name].name}|}`
               return html
            },
            rich: setEmphasis(),
		},
	},
     label: {
        show: true,
         color: '#fff',
         fontSize: 16,
         fontWeight: 600,
         formatter: (item) => {
           let html = `{${map[item.data.name].name}|}`
            return html
        },
        rich: setRich(),
      }
    },
   ],
   geo: {
      map: '温州市',
    //   projection: {
    //     project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
    //     unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
    // },
       type: 'map',
       layoutCenter: ['50%', '50%'],
       layoutSize: '150%',
       zoom: 0.65,
       //  aspectScale: 1,
       roam: false,
       label: {
         show: true,
         color: '#fff'
       },
       itemStyle: {
         normal: {
           areaColor: 'rgba(0,100,219, 1)',
           shadowColor: 'rgba(142, 201, 255, 1)',
           shadowOffsetX: -5,
           shadowOffsetY: 12
         }
       },
      emphasis: { // 鼠标移入动态的时候显示的默认样式
		itemStyle: {
			areaColor: '#019359',
			// borderColor: '#404a59',
			borderWidth: 1
		},
		label: { // 文字
			show: true,
			color: '#fff',
			fontSize: 18,
            fontWeight: 600
		},
	},
   }
 };

    maps.off('click')

    maps.on('click', (item) => {
      clearInterval(Number(mTime));
		  mTime = null
		  maps.dispatchAction({
		  	type: 'downplay',
		  	seriesIndex: 0,
		  	dataIndex: index === 0 ? gzData.features.length - 1 : index - 1
		  });
      index = item.dataIndex
      mapActive()
      highlight()
    })

    maps.setOption(option);
    highlight()
    window.addEventListener("resize", function () {
      maps.resize(); // 页面大小变化后Echa	rts也更改大小
    });
  });
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

下面是工具函数

const map = {
  苍南县: { name: 'a' },
  洞头区: { name: 'b' },
  乐清市: { name: 'c' },
  龙港市: { name: 'd' },
  瓯海区: { name: 'e' },
  永嘉县: { name: 'f' },
  龙湾区: { name: 'g' },
  瑞安市: { name: 'h' },
  文成县: { name: 'i' },
  鹿城区: { name: 'j' },
  平阳县: { name: 'k' },
  泰顺县: { name: 'l' }
}

const setRich = () => {
  let rich = {}
  for (let key in map) {
    let item = {
      backgroundColor: {
        image: `/img/mapLabelBlue/${key}.png`,
      },
      width: 81,
      height: 76
    }
    rich[map[key].name] = item
  }
  return rich
}

const setEmphasis = () => {
  let rich = {}
  for (let key in map) {
    let item = {
      backgroundColor: {
        image: `/img/mapLabelRed/${key}.png`,
      },
      width: 81,
      height: 76
    }
    rich[map[key].name] = item
  }
  return rich
}

const mapActive = () => {
  if(mTime){
    clearInterval(Number(mTime));
			mTime = null
  }
  mTime = setInterval(highlight, 30000);
}

const highlight = () => {
  const dataLength = gzData.features.length;
  // 清除之前的高亮
	maps.dispatchAction({
		type: 'downplay',
		seriesIndex: 0,
		dataIndex: index === 0 ? dataLength - 1 : index - 1
	});
	// 当前下标高亮
	maps.dispatchAction({
		type: 'highlight',
		seriesIndex: 0,
		dataIndex: index
	});
	maps.dispatchAction({
		type: 'unselect',
		seriesIndex: 0,
		dataIndex: index
	});
	maps.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: index,
    position: function(a,b){
    }
	});

  emit('carouselEvent', mapData.value[index])

    index++;
	if (index >= dataLength) {
		index = 0;
	}
}

const mouseEvents = () => {
	// 鼠标划入
	maps.on('mouseover', () => {
		// 停止定时器，清除之前的高亮
		clearInterval(Number(mTime));
		mTime = null
		maps.dispatchAction({
			type: 'downplay',
			seriesIndex: 0,
			dataIndex: index
		});
	});
	// 鼠标划出重新定时器开始
	maps.on('mouseout', () => {
		mapActive();
	});
}

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