1、先展示效果图
2、直接上代码，copy代码进行调试便会懂（导入echarts插件看之前的文章）
<template>
<div class="antigen-container">
<div class="top-content">
<span class="top-title">未来七天抗原检测预测</span>
</div>
<div id="antigen-trend-statistics-forecast"></div>
</div>
</template>
<script>
import {
getForecastStatisticsList
} from '@/api/echartsApi'
export default {
name: 'AntigenTrendStatisticsForecast',
data() {
return {
dateAbscissa: [], // 横坐标的日期
positiveTransferNegativeQty: [], // 阳性有症状人数预测
negativeTransferPositiveQty: [], // 阳性无症状人数预测
positiveWithoutSymptomsTransferSymptomsQty: [], // 阳性转阴性人数预测
pendingTestQty: [], // 阴性
chartBox: null // 将echarts赋值给他
};
},
created() {
this.getData()
},
mounted() {
setTimeout(() => {
this.echart()
}, 500);
},
methods: {
// 获取列表数据
async getData() {
getForecastStatisticsList().then(res => {
this.dateAbscissa = res.data.dayList
res.data.list.forEach(item => {
if (item.statisticalDescription == '阴性') {
this.pendingTestQty.push(item.oneDayQty)
this.pendingTestQty.push(item.twoDayQty)
this.pendingTestQty.push(item.threeDayQty)
this.pendingTestQty.push(item.fourDayQty)
this.pendingTestQty.push(item.fiveDayQty)
this.pendingTestQty.push(item.sixDayQty)
this.pendingTestQty.push(item.sevenDayQty)
this.pendingTestQty.push(item.eightDayQty)
} else if (item.statisticalDescription == '阳性无症状') {
this.negativeTransferPositiveQty.push(item.oneDayQty)
this.negativeTransferPositiveQty.push(item.twoDayQty)
this.negativeTransferPositiveQty.push(item.threeDayQty)
this.negativeTransferPositiveQty.push(item.fourDayQty)
this.negativeTransferPositiveQty.push(item.fiveDayQty)
this.negativeTransferPositiveQty.push(item.sixDayQty)
this.negativeTransferPositiveQty.push(item.sevenDayQty)
this.negativeTransferPositiveQty.push(item.eightDayQty)
} else if (item.statisticalDescription == '阳性有症状-发烧等') {
this.positiveTransferNegativeQty.push(item.oneDayQty)
this.positiveTransferNegativeQty.push(item.twoDayQty)
this.positiveTransferNegativeQty.push(item.threeDayQty)
this.positiveTransferNegativeQty.push(item.fourDayQty)
this.positiveTransferNegativeQty.push(item.fiveDayQty)
this.positiveTransferNegativeQty.push(item.sixDayQty)
this.positiveTransferNegativeQty.push(item.sevenDayQty)
this.positiveTransferNegativeQty.push(item.eightDayQty)
} else if (item.statisticalDescription == '阳性转阴性') {
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.oneDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.twoDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.threeDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.fourDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.fiveDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.sixDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.sevenDayQty)
this.positiveWithoutSymptomsTransferSymptomsQty.push(item.eightDayQty)
}
})
})
},
// 2. echart图表
echart() {
if (this.chartBox != null && this.chartBox != "" && this.chartBox != undefined) {
this.chartBox.dispose() //销毁
}
this.chartBox = this.$echarts.init(document.getElementById("antigen-trend-statistics-forecast"));
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
y: 'bottom',
data: ['阳性有症状人数预测', '阳性无症状人数预测', '阳性转阴性人数预测', '阴性']
},
grid: {
left: '3%',
right: '4%',
bottom: 40,
containLabel: true
},
xAxis: {
type: 'category',
data: this.dateAbscissa
},
yAxis: {
type: 'value'
},
color: ['#c82323', '#fcca00', '#3eae5f', '#77bc21'],
series: [{
name: '阳性有症状人数预测',
type: 'line',
smooth: true,
label: {
show: true,
fontSize: 14,
color: '#c82323',
formatter: function (val) {
if (val.value == 0) {
return ""
}
},
},
data: this.positiveTransferNegativeQty
},
{
name: '阳性无症状人数预测',
type: 'line',
smooth: true,
label: {
show: true,
fontSize: 14,
color: '#fcca00',
formatter: function (val) {
if (val.value == 0) {
return ""
}
},
},
data: this.negativeTransferPositiveQty
},
{
name: '阳性转阴性人数预测',
type: 'line',
smooth: true,
label: {
show: true,
fontSize: 14,
color: '#3eae5f',
formatter: function (val) {
if (val.value == 0) {
return ""
}
},
},
data: this.positiveWithoutSymptomsTransferSymptomsQty
},
{
name: '阴性',
type: 'line',
smooth: true,
label: {
show: true,
fontSize: 14,
color: '#77bc21',
formatter: function (val) {
if (val.value == 0) {
return ""
}
},
},
data: this.pendingTestQty
}
]
};
this.chartBox.setOption(option);
// 根据页面大小自动响应图表大小
// window.addEventListener("resize", function () {
// this.chartBox.resize();
// });
},
},
};
</script>
<style lang="scss" scoped>
.antigen-container {
width: 100%;
height: 100%;
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
.top-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
// margin-bottom: 40px;
.top-title {
margin-left: 30px;
font-size: 24px;
margin-bottom: 20px;
letter-spacing: 2px;
}
}
#antigen-trend-statistics-forecast {
width: 900px;
height: 500px;
}
}
</style>