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
<html>
<head>
<meta charset="utf-8">
<script crossorigin="anonymous" integrity="sha384-RPqk+IZGGuMAN/gBBbPKRtfXRISl/vFqiT13cXlm2vHZtd+xZ7ugm9sDxXDb2Ylk" src="https://lib.baomitu.com/echarts/4.6.0/echarts.min.js"></script>
<script src="https://s2.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js" type="application/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
h1 {
line-height: 60px;
height: 60px;
background: #146402;
text-align: center;
font-weight: bold;
color: #eee;
font-size: 14px;
}
.chart {
height: 600px;
}
</style>
<div id="main" class="chart"></div>
<script>
let chart = echarts.init(document.getElementById('main'));
const params = new URLSearchParams(location.href.split('?')[1]);
let province = params.get('province') || '上海';
let sizeValue = '57%';
let symbolSize = 2.5;
$.getJSON('c/info/stat', {province:province}, function(result) {
if (!result || result.ret !== 'OK') {
console.error('查询数据错误', result);
return;
}
let [content0, content1] = result.content;
content1 = content1 || {}
let data = {
today: content0.days.map(function(s){return s.substr(8)}),
increase: content1.increase,
confirmed_count: content1.confirmed_counts,
increase_sum: content0.increase,
confirmed_sum: content0.confirmed_counts
};
let option = {
legend: {},
tooltip: {},
toolbox: {
left: 'center',
feature: {
dataZoom: {}
}
},
grid: [
{right: sizeValue, bottom: sizeValue},
{left: sizeValue, bottom: sizeValue},
{right: sizeValue, top: sizeValue},
{left: sizeValue, top: sizeValue}
],
dataset: {
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
dimensions: [
{name: 'today', type:'ordinal', displayName: '日期'},
{name: 'increase', type:'number', displayName: province+'新增人数'},
{name: 'confirmed_count', type:'number', displayName: province+'确诊人数'},
{name: 'increase_sum', type:'number', displayName: '全国新增人数'},
{name: 'confirmed_sum', type:'number', displayName: '全国确诊人数'}
],
source: data
},
xAxis: [
{type: 'category', gridIndex: 0, name: '日期', axisLabel: {rotate: 50, interval: 0}},
{type: 'category', gridIndex: 1, name: '日期', axisLabel: {rotate: 50, interval: 0}},
{type: 'category', gridIndex: 2, name: '日期', axisLabel: {rotate: 50, interval: 0}},
{type: 'category', gridIndex: 3, name: '日期', axisLabel: {rotate: 50, interval: 0}, axisPointer:{show: true, type: 'line'}}
],
yAxis: [
{type: 'value', gridIndex: 0, name: province+'新增人数'},
{type: 'value', gridIndex: 1, name: '全国新增人数', axisPointer:{show: true, type: 'line'}},
{type: 'value', gridIndex: 2, name: province+'确诊人数'},
{type: 'value', gridIndex: 3, name: '全国确诊人数'}
],
series: [
{
type: 'bar',
symbolSize: symbolSize,
xAxisIndex: 0,
yAxisIndex: 0,
encode: {
x: 'today',
y: 'increase',
tooltip: [0, 1, 2, 3, 4]
},
tooltip: {
formatter: function (params,ticket,callback) {
if (params.componentType === 'legend') {
return params.name;
}
// console.info('param ==>', params, )
let res = '自定义详情: ';
for (let [i, dname] of params.dimensionNames.entries()) {
res += '<br/>' + dname + ' : ' + params.data[i];
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);
}, 300);
return 'loading';
}
}
},
{
type: 'line',
sampling: 'average',
itemStyle: {
color: '#2d85cb'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#90bcc2'
}, {
offset: 1,
color: '#3598dc'
}])
},
symbolSize: symbolSize,
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
encode: {
x: 'today',
y: 'increase_sum',
tooltip: [0, 3, 4]
}
},
{
type: 'bar',
symbolSize: symbolSize,
seriesName: [0,2],
xAxisIndex: 2,
yAxisIndex: 2,
encode: {
x: 'today',
y: ['confirmed_count'],
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'line',
areaStyle: {},
symbolSize: symbolSize,
xAxisIndex: 3,
yAxisIndex: 3,
smooth: true,
encode: {
x: 'today',
y: 'confirmed_sum',
tooltip: [0, 3, 4]
}
}
]
};
chart.setOption(option);
})
chart.on('click', function (params) {
console.log(params);
});
window.onresize = chart.resize;
</script>
</body>
</html>