一、
这篇文章介绍使用疫情数据生成可视化图表，使用的是echarts，这部分内容本该放到前面一部分，现在我们项目已经结束。
二 、
共制作了三张图表：
（一）、各省历史疫情确诊以及新增对比柱状图：
源代码：
该图因为使用时间轴，源代码较繁琐，这里不再粘贴
（二）、各省新增情况对比
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="debcbec252e64767b63d920bae444b2b" class="chart-container" style="width:700px; height:500px;"></div>
<script>
const myChart = echarts.init(
document.getElementById('debcbec252e64767b63d920bae444b2b'), 'white', {renderer: 'canvas'});
dataset = [
['date', '2022.05.01', '2022.05.02', '2022.05.03', '2022.05.04', '2022.05.05', '2022.05.06','2022.05.07'],
['新增确诊', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1 ,1],
['新增治愈', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7,2],
['新增死亡', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5,3]
]
set(dataset)
function set(dataset) {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: dataset
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '50%' },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'date',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
};
option && myChart.setOption(option);
</script>
</body>
</html>
（三）、省内各省现存确诊对比
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>-->
</head>
<body>
<div id="debcbec252e64767b63d920bae444b2b" class="chart-container" style="width:900px; height:500px;"></div>
<script>
const chartDom = document.getElementById('debcbec252e64767b63d920bae444b2b');
const myChart = echarts.init(chartDom);
const url = "js/new.json";/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
const request = new XMLHttpRequest();
request.open("get", url);/*设置请求方法与路径*/
request.send(null);/*不发送数据到服务器*/
request.onload = function () {
const json = JSON.parse(request.responseText);
let city = json['city'];
let date = json['date'];
let confirm = json['confirm'];
let result = [];
for(let i=0; i<confirm.length; i++){
result.push({
name: city[i],
type: 'line',
stack: 'Total',
data: confirm[i]
})
}
myChart.setOption(getOption(city,date,result));
}
function getOption(city,date,data) {
option = {
// 动画运行时长
animationDuration: 1000,
title: {
text: '省内各市新增确诊情况'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: city
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value'
},
series: data
};
return option
}
// option && myChart.setOption(option);
</script>
</body>
</html>
注意，上述图所使用的数据为测试数据，来自于本地。
文章评论