echarts折线图例子

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.dayListres.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>