ncov / back

Go to a project
Toggle navigation Toggle navigation pinning
lintry
75b292cc 1 parent 553e3dc5

增加图表显示

Inline Side-by-side
Showing 1 changed file with 182 additions and 0 deletions
1 +<html>
2 + <head>
3 + <meta charset="utf-8">
4 + <script crossorigin="anonymous" integrity="sha384-RPqk+IZGGuMAN/gBBbPKRtfXRISl/vFqiT13cXlm2vHZtd+xZ7ugm9sDxXDb2Ylk" src="https://lib.baomitu.com/echarts/4.6.0/echarts.min.js"></script>
5 + <script src="https://s2.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js" type="application/javascript"></script>
6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
7 + </head>
8 + <body>
9 + <style>
10 + h1 {
11 + line-height: 60px;
12 + height: 60px;
13 + background: #146402;
14 + text-align: center;
15 + font-weight: bold;
16 + color: #eee;
17 + font-size: 14px;
18 + }
19 + .chart {
20 + height: 600px;
21 + }
22 + </style>
23 +
24 + <div id="main" class="chart"></div>
25 + <script>
26 + let chart = echarts.init(document.getElementById('main'));
27 + const params = new URLSearchParams(location.href.split('?')[1]);
28 + let province = params.get('province') || '上海';
29 +
30 + let sizeValue = '57%';
31 + let symbolSize = 2.5;
32 +
33 + $.getJSON('c/info/stat', {province:province}, function(result) {
34 + if (!result || result.ret !== 'OK') {
35 + console.error('查询数据错误', result);
36 + return;
37 + }
38 + let [content0, content1] = result.content;
39 + content1 = content1 || {}
40 + let data = {
41 + today: content0.days.map(function(s){return s.substr(8)}),
42 + increase: content1.increase,
43 + confirmed_count: content1.confirmed_counts,
44 + increase_sum: content0.increase,
45 + confirmed_sum: content0.confirmed_counts
46 + };
47 + let option = {
48 + legend: {},
49 + tooltip: {},
50 + toolbox: {
51 + left: 'center',
52 + feature: {
53 + dataZoom: {}
54 + }
55 + },
56 + grid: [
57 + {right: sizeValue, bottom: sizeValue},
58 + {left: sizeValue, bottom: sizeValue},
59 + {right: sizeValue, top: sizeValue},
60 + {left: sizeValue, top: sizeValue}
61 + ],
62 + dataset: {
63 + // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
64 + // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
65 + dimensions: [
66 + {name: 'today', type:'ordinal', displayName: '日期'},
67 + {name: 'increase', type:'number', displayName: province+'新增人数'},
68 + {name: 'confirmed_count', type:'number', displayName: province+'确诊人数'},
69 + {name: 'increase_sum', type:'number', displayName: '全国新增人数'},
70 + {name: 'confirmed_sum', type:'number', displayName: '全国确诊人数'}
71 + ],
72 +
73 + source: data
74 + },
75 + xAxis: [
76 + {type: 'category', gridIndex: 0, name: '日期', axisLabel: {rotate: 50, interval: 0}},
77 + {type: 'category', gridIndex: 1, name: '日期', axisLabel: {rotate: 50, interval: 0}},
78 + {type: 'category', gridIndex: 2, name: '日期', axisLabel: {rotate: 50, interval: 0}},
79 + {type: 'category', gridIndex: 3, name: '日期', axisLabel: {rotate: 50, interval: 0}, axisPointer:{show: true, type: 'line'}}
80 + ],
81 + yAxis: [
82 + {type: 'value', gridIndex: 0, name: province+'新增人数'},
83 + {type: 'value', gridIndex: 1, name: '全国新增人数', axisPointer:{show: true, type: 'line'}},
84 + {type: 'value', gridIndex: 2, name: province+'确诊人数'},
85 + {type: 'value', gridIndex: 3, name: '全国确诊人数'}
86 + ],
87 + series: [
88 + {
89 + type: 'bar',
90 + symbolSize: symbolSize,
91 + xAxisIndex: 0,
92 + yAxisIndex: 0,
93 + encode: {
94 + x: 'today',
95 + y: 'increase',
96 + tooltip: [0, 1, 2, 3, 4]
97 + },
98 + tooltip: {
99 + formatter: function (params,ticket,callback) {
100 + if (params.componentType === 'legend') {
101 + return params.name;
102 + }
103 + // console.info('param ==>', params, )
104 + let res = '自定义详情: ';
105 + for (let [i, dname] of params.dimensionNames.entries()) {
106 + res += '<br/>' + dname + ' : ' + params.data[i];
107 + }
108 + setTimeout(function (){
109 + // 仅为了模拟异步回调
110 + callback(ticket, res);
111 + }, 300);
112 + return 'loading';
113 + }
114 + }
115 + },
116 + {
117 + type: 'line',
118 + sampling: 'average',
119 + itemStyle: {
120 + color: '#2d85cb'
121 + },
122 + areaStyle: {
123 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
124 + offset: 0,
125 + color: '#90bcc2'
126 + }, {
127 + offset: 1,
128 + color: '#3598dc'
129 + }])
130 + },
131 + symbolSize: symbolSize,
132 + xAxisIndex: 1,
133 + yAxisIndex: 1,
134 + smooth: true,
135 + encode: {
136 + x: 'today',
137 + y: 'increase_sum',
138 + tooltip: [0, 3, 4]
139 + }
140 + },
141 + {
142 + type: 'bar',
143 + symbolSize: symbolSize,
144 + seriesName: [0,2],
145 + xAxisIndex: 2,
146 + yAxisIndex: 2,
147 + encode: {
148 + x: 'today',
149 + y: ['confirmed_count'],
150 + tooltip: [0, 1, 2, 3, 4]
151 + }
152 + },
153 + {
154 + type: 'line',
155 + areaStyle: {},
156 + symbolSize: symbolSize,
157 + xAxisIndex: 3,
158 + yAxisIndex: 3,
159 + smooth: true,
160 + encode: {
161 + x: 'today',
162 + y: 'confirmed_sum',
163 + tooltip: [0, 3, 4]
164 + }
165 + }
166 + ]
167 + };
168 +
169 + chart.setOption(option);
170 +
171 + })
172 +
173 + chart.on('click', function (params) {
174 + console.log(params);
175 + });
176 +
177 +
178 + window.onresize = chart.resize;
179 +
180 + </script>
181 + </body>
182 +</html>