echarts折线图根据时间的搜索，可以实现折线图的渲染效果

echarts折线图根据时间的搜索，可以实现折线图的渲染效果

注意：echarts图中， stack: ‘总量’,每个数据里面都有这个，折线图的数据在y轴会累加，我注释了

<template>
  <div class="footer">
      <h3>状态变化趋势</h3>
      <el-date-picker v-model="formdata.start" type="datetime" placeholder="选择开始时间"></el-date-picker>
      <el-date-picker v-model="formdata.end" type="datetime" placeholder="选择结束时间"></el-date-picker>
      <el-button @click="getEcharts" type="success">查询</el-button>
    </div>
    <div id="footer" style="height:400px;"></div>
</template>
<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import {
  getQuesStatusNum
} from "@/services/index";
export default {
  data(){
    return{
      formdata:{
        start:'',
        end:''
      },
      lineChart: "", //折线图
      optionfooter: {} //折线图数据
    },
    mounted(){
      this.getEcharts();
    },
    watch:{
      value(date){
        (this.start = date[0]),(this.end = date[1])
      },
      methods:{
        getEcharts() {
      //折线图的渲染
      const params = {
        prjID: this.prjId,
        beginDate: this.formdata.start,
        endDate: this.formdata.end
      };
      getQuesStatusNum(params).then(({ data }) => {
        this.lineChart = echarts.init(document.getElementById("footer"));
        //折线图
        this.optionfooter = {
          color: CHART_COLORS,
          tooltip: {
            trigger: "axis" //鼠标移动上面的时候可以显示数据
          },
          legend: {
            data: ["关闭", "已整改", "待整改"],
            top: 0
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: data.map(item => item.date)
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "关闭",
              type: "line",
              //stack: '总量',
              data: data.map(item => item.closed),
               itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#1890ff" //设置折线线条颜色
                  }
                }
              }
            },
            {
              name: "已整改",
              type: "line",
             // stack: '总量',
              data: data.map(item => item.rectificated),
               itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#56ca77" //设置折线线条颜色
                  }
                }
              }
            },
            {
              name: "待整改",
              type: "line",
             // stack: '总量',
              data: data.map(item => item.toRectificat)
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#fbae55" //设置折线线条颜色
                  }
                }
              }
            }
          ]
        };
        //数据渲染到图表上面
        this.lineChart.setOption(this.optionfooter);
      }),
        }
      }
    }
  }
}
</script>

效果图如下