<script>
var dom = document.getElementById("chinaMap");
var myChart = echarts.init(dom);
echarts.registerMap('china', mapList);
console.log(mapList)
myChart.setOption(option = {
title: {
text: '中国地图',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 10,
max: 500,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['green', 'aqua', 'orange']
}
},
series: [
{
name: 'test',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京市', value: 100 },
],
// 自定义名称映射
nameMap: {
'beijing': '北京市',
}
}
]
});
//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
myChart.on('click', function(params) {
console.log(params)
alert(`选择的省份是${params.name}`)
});
</script>
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
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