ECharts 地图统计数据

发表于 | 分类于 ，

代码

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
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div>
        <div id="main" style="height:400px;width:800px;margin: auto;"></div>
    </div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(['echarts', 
		'echarts/chart/line', 
		'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
		'echarts/chart/map',  ], 
		function(ec) {
			// 基于准备好的dom，初始化echarts图表
		var myChart = ec.init(document.getElementById('main'));

			var option = {

				title: {
					text: '访问来访分析',
					x:"center"
					/*subtext: '数据来自国家统计局' */
				},
				tooltip: {
					trigger: 'item'
				},
				
				dataRange: {
					orient: 'horizontal',
					min: 0,
					max: 55000,
					text: ['高', '低'],
					// 文本，默认为数值文本
					splitNumber: 0,
					x: "20%"
				},
				toolbox: {
					show: false,
					orient: 'vertical',
					x: 'right',
					y: 'center',
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						}
					}
				},
				series: [{
					name: '累积访问次数',
					type: 'map',
					mapType: 'china',
					mapLocation: {
						x: 'center'
					},					
					itemStyle: {
						normal: {
							label: {
								show: true
							}
						},
						emphasis: {
							label: {
								show: true
							}
						}
					},
					data: [ 
					{name:'北京', value:16251.93},
					{name:'福建', value:17560.18},
					{name:'上海', value:19195.69},
					{name:'湖北', value:19632.26},
					{name:'湖南', value:19669.56},
					{name:'四川', value:21026.68},
					{name:'辽宁', value:22226.7},
					{name:'河北', value:24515.76},
					{name:'河南', value:26931.03},
					{name:'浙江', value:32318.85},
					{name:'山东', value:45361.85},
					{name:'江苏', value:49110.27},
					{name:'广东', value:53210.28}]
					}],
				animation: false
			};
			// 为echarts对象加载数据 
			myChart.setOption(option);
		});
    </script>

效果

点击查看 ECharts_demo2.html

参考地址

参考地址:http://echarts.baidu.com/echarts2/doc/example/mix3.html