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
| <!DOCTYPE html>
| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
| <title></title>
| <meta charset="utf-8" />
| <script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>
| </head>
| <body style="margin: 0px;">
| <div id="div_JuMin" style="width:334px; height:420px;margin-top:10px;margin-bottom: 10px;"></div> <!--海岛居民-->
| </body>
| </html>
| <script type="text/javascript">
| //海岛居民
| var divJM = document.getElementById("div_JuMin");
| var JuMin = echarts.init(divJM);
| var JMoption ={
| tooltip : {
| trigger: 'axis',
| },
| color:['#b6a2de','#2ec7c9'],
| legend:{
| data:['无居民','有居民'],
| x:'center'
| },
|
| calculable : true,
| xAxis : [
| {
| type : 'value',
| splitNumber: 6,
| position:'top',
| axisLabel:{show:false},
| splitLine:{show: false},//去除网格线
| }
| ],
| yAxis : [
| {
| name:'个',
| inverse:{default: false},
| //nameLocation:'start',
| type : 'category',
| axisLabel:{
| interval:0,//横轴信息全部显示
| },
| data : ['辽宁','天津','河北','山东','苏鲁','江苏','上海','浙江','闽浙','福建','广东','广西','海南']
| },
| ],
| grid:{
| x:60,
| y:30,
| y2:10,
| x2:30
| },
| series : [
| {
| name:'无居民',
| type:'bar',
| data:[589,1,13,542,10,11,23,4131,17,2273,1906,629,713]
| },
| {
| name:'有居民',
| type:'bar',
| data:[44,0,0,32,0,4,3,222,0,100,57,14,13]
| }
| ],
| label: {
| normal: {
| show: true,
| position: 'right',
| textStyle: {
| color: 'black'
| }
| }
| }
| };
| JuMin.setOption(JMoption);
| </script>
|
|
