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