-
Notifications
You must be signed in to change notification settings - Fork 31
/
china.html
85 lines (82 loc) · 3.36 KB
/
china.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="width: 800px;height: 600px"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
function randomData() {
return Math.round(Math.random() * 500);
}
var mydata = [
{name: '北京', value: '100'}, {name: '天津', value: randomData()},
{name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
{name: '河北', value: randomData()}, {name: '河南', value: randomData()},
{name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
{name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
{name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
{name: '新疆', value: 0}, {name: '江苏', value: randomData()},
{name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
{name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
{name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
{name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
{name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
{name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
{name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
{name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
{name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
{name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
];
$.get('allMap/china.json', function (geoJson) {
echarts.registerMap('china', geoJson);
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图大数据',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show: true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end: 600}, {start: 400, end: 500},
{start: 300, end: 400}, {start: 200, end: 300},
{start: 100, end: 200}, {start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data: mydata //数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);
})
</script>
</body>
</html>