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
| <!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"/>
| <script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>
| </head>
| <body style="margin: 0px;">
| <div id="div_JJSS" style="width:695px; height:300px;margin-top: 10px;margin-bottom: 10px;"></div> <!--经济损失-->
| </body>
| <script type="text/javascript">
| //经济损失
| var divjjss = document.getElementById("div_JJSS");
| var jjss = echarts.init(divjjss);
| var JJSSoption = {
| title : {
| text: '经济损失',
| x:'center',
| textStyle: {
| fontWeight: 300
| }
| },
| legend:{
| data:['发生风暴潮过程次数'],
| x:'right'
| },
| color:["#4f81bd","#b6a2de"],
| tooltip : {
| trigger: 'axis',
| },
| toolbox: {
| show : true,
| orient:'vertical',
| y:'center',
| 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 : 'category',
| axisLabel:{
| interval:0
| },
| data : [2013,2014,2015,2016,2017],
| }
| ],
| yAxis : [
| {
| type : 'value',
| splitNumber: 10,
| name:'(亿元)'
| }
| ],
| grid:{
| x:50,
| y:50,
| y2:24,
| x2:28
| },
| series : [
| {
| name:'发生风暴潮过程次数',
| type:'line',
| data:[26,9,10,18,16],
| },
| {
| name:'直接经济损失（亿元）',
| type:'bar',
| data:[152.45,135.78,72.62,45.94,55.77],
| }
| ]
| };
| jjss.setOption(JJSSoption);
| </script>
| </html>
|
|
