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
| <!DOCTYPE html>
| <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
| <head>
| <meta charset="UTF-8" />
| <title>Title</title>
| <script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
| <script th:src="@{${pubzyWebRoot} + 'echarts/echarts-all-2.2.7.js'}"></script>
|
| <script>
| $(function () {
| // var t = document.getElementById("chartDiv");
| var op = echarts.init(document.getElementById("chartDiv"));
| //海岛基本情况
| var option = {
| title: {
| text: '海岛基本情况统计',
| x: 'center',
| textStyle: {
| color: '#008ACD',
| fontSize: 18
| }
| },
| tooltip: {
| trigger: 'axis',
| axisPointer: { // 坐标轴指示器，坐标轴触发有效
| type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
| }
| },
| legend: { data: ['有居民(个)', '无居民(个)'], x: 'center', y: 35, show: true,textStyle: {
| color: "#fff"
| } },
| toolbox: {
| show: false,
| feature: {
| mark: { show: true },
| dataView: { show: true, readOnly: false },
| magicType: { show: true, type: ['line', 'bar'] },
| restore: { show: true },
| saveAsImage: { show: true }
| }
| },
| calculable: true,
| xAxis: [
| {
| type: 'value',
| splitLine:{
| show:false
| },
| nameTextStyle: {
| color: "#fff"
| },
| axisLabel: {
| formatter: '{value}',
| textStyle: {
| color: "#fff"
| }
| },
| }
| ],
| grid: {
| x: 40,
| x2: 20,
| y2: 30,
| show: true,
| borderWidth: 0
| },
| yAxis: [
| {
| type: 'category',
| data: ['辽宁', '河北', '天津', '山东', '江苏', '上海', '浙江', '福建', '广东', '广西', '海南'],
| splitLine:{
| show:false
| },
| nameTextStyle: {
| color: "#fff"
| },
| axisLabel: {
| formatter: '{value}',
| textStyle: {
| color: "#fff"
| }
| },
| }
| ],
| series: [
| {
| name: '有居民(个)',
| type: 'bar',
| stack: '总量',
| itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
| data: [44,0,0,32,4,3,222,100,57,14,13]
|
| },
| {
| name: '无居民(个)',
| type: 'bar',
| data: [589,13,1,542,11,23,4131,2273,1906,629,713],
| stack: '总量',
| itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
| }
| ]
| };
| op.setOption(option);
| })
|
| </script>
| </head>
| <body>
| <div id="chartDiv" style="height: 320px;"></div>
| </body>
| </html>
|
|
