Echarts折线图两条折线叠加--与后端接口对接

实现效果：

点击对比前：显示一条折线信息，折线信息为后端传递值

点击对比后：显示两条折线信息，折线信息为后端传递值

实现步骤：

1.setCharts.js中：将两个折线数据分别写

let seriesOne = {
    name: "",
    type: "line",
    stack: "Total",
    symbol: "none", //拐点样式
    areaStyle: {
        normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(80,141,255,0.39)"
                },
                {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)"
                },
                {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)"
                }
            ])
        }
    },
    lineStyle: {
        color: "#5086eb"
    },
    emphasis: {
        focus: "series"
    },
    data: []
};
let seriesTwo = {
    name: "",
    type: "line",
    stack: "Total",
    symbol: "none", //拐点样式
    areaStyle: {
        normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(98, 145, 237,0.39)"
                },
                {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)"
                },
                {
                    offset: 1,
                    color: "rgba(216, 228, 250,0.00)"
                }
            ])
        }
    },
    lineStyle: {
        color: "#67bbff"
    },
    emphasis: {
        focus: "series"
    },
    data: []
};

//历史访问量折线图
function inithistoryChart(name, xAxis, seriesone, xAxisTwo, seriestwo) {
    if (!document.getElementById("historyChart")) return;
    //历史访问量折线图数据

    seriesOne.name = name;
    seriesOne.data = seriesone;
    let seriess = [seriesOne];
    let xaixs = [{
        type: "category",
        boundaryGap: true,
        data: xAxis
    }];

    if (seriestwo && xAxisTwo) {
        seriesTwo.name = name;
        seriesTwo.data = seriestwo;
        seriess.push(seriesTwo);
        xaixs.push({
            type: "category",
            boundaryGap: true,
            data: xAxisTwo
        });
    }

    let historyChartOption = {
        grid: {
            top: "30px",
            left: "10px",
            containLabel: true
        },
        xAxis: xaixs,
        yAxis: [{
            type: "value",
            axisLine: { show: false },
            axisTick: { show: false }
        }],
        series: seriess
    };

    let historyChart = echarts.init(document.getElementById("historyChart"));
    historyChart.setOption(historyChartOption, true);
}
export {
    inithistoryChart
};

2.vue文件中：

tempalte中：

<div class="content-top-right">
            <LittleTitle name="历史访问量" />
            <div class="history-top">
              <el-radio-group
                v-model="historyDataType"
                class="history-top-type"
              >
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="7">七天</el-radio-button>
                <el-radio-button label="30">30天</el-radio-button>
                <el-radio-button label="0">自定义</el-radio-button>
              </el-radio-group>
              <div class="date-select">
                <el-date-picker
                  v-model="dateValueOne"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="dateIsAbled"
                  @change="changeDate"
                >
                </el-date-picker>
              </div>
              <el-checkbox v-model="contrast" @change="changeCheckbox"
                >对比</el-checkbox
              >
              <div class="date-select">
                <el-date-picker
                  v-model="dateValueTwo"
                  type="daterange"
                  align="right"
                  unlink-panels
                  v-if="contrast"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="queryPlatformStatisticsCom"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="history-bottom">
              <div class="history-left" v-if="!contrast">
                <div class="history-left-box">
                  <div class="history-box-title">历史访问</div>
                  <div class="history-box-time">
                    {{ formatDate(dateValueOne[0]) }}-{{
                      formatDate(dateValueOne[1])
                    }}
                  </div>
                  <div class="box-style">
                    <div class="box-style-one"></div>
                    <div class="box-style-two"></div>
                  </div>
                  <div class="history-box-data">
                    {{ historyVisitData.data.visitNumb }}
                  </div>
                </div>
              </div>
              <div class="history-left" v-if="contrast">
                <div class="history-left-one">
                  <div class="box-title">历史访问</div>
                  <div class="box-time">
                    {{ formatDate(dateValueOne[0]) }}-{{
                      formatDate(dateValueOne[1])
                    }}
                  </div>
                  <div class="box-style">
                    <div class="box-style-one"></div>
                    <div class="box-style-two"></div>
                  </div>
                  <div class="box-data">
                    {{ historyVisitData.data.visitNumb }}
                  </div>
                </div>
                <div class="history-left-one">
                  <div class="box-title">历史访问</div>
                  <div class="box-time" v-if="showDateTwo">
                    {{ formatDate(dateValueTwo[0]) }}-{{
                      formatDate(dateValueTwo[1])
                    }}
                  </div>
                  <div class="box-style">
                    <div class="box-style-one"></div>
                    <div class="box-style-two"></div>
                  </div>
                  <div class="box-data">
                    {{ historyVisitData.data.visitNumbCom }}
                  </div>
                </div>
              </div>
              <div class="history-chart" id="historyChart"></div>
            </div>
          </div>

import引入

import {
  initsurveyChart,
  initserverChart,
  initrealtimeChart,
  inithistoryChart
} from "./setChart";
import {
  getAllDataStatistics,
  queryAllServiceAndCount,
  queryPlatformStatistics,
  queryPlatform,
  getDataTotalVolumeAndNumber
} from "../../api/flowstatisticsApi";

data中return

      dateValueOne: ["", ""],
      contrast: false,
      dateValueTwo: ["", ""],
      historyVisitData: {
        data: { visitNumb: 0, visitNumbCom: 0 },
        xAxisData: [],
        seriesData: [],
        xAxisDataCom: [],
        seriesDataCom: []
      },

监听：

watch: {
    historyDataType: {
      handler: function(newV) {
        this.setDate(newV);
      },
      immediate: true//立即执行
    },
  },

方法：

// 设置日期 今天、7天、30天和自定义的切换
    setDate(type) {
      this.contrast = false;
      if (type == 1) {
        this.dateIsAbled = true;
        this.dateValueOne = [new Date(), new Date()];
      } else if (type == 7) {
        this.dateIsAbled = true;
        let date = new Date();
        this.dateValueOne = [
          new Date(date.getTime() - 24 * 60 * 60 * 1000 * 6),
          new Date()
        ];
      } else if (type == 30) {
        this.dateIsAbled = true;
        let date = new Date();
        this.dateValueOne = [
          new Date(date.getTime() - 24 * 60 * 60 * 1000 * 29),
          new Date()
        ];
      } else if (type == 0) {
        this.dateIsAbled = false;
      }
      if (type != 0) {
        this.getHistoryData(this.formatDate(this.dateValueOne[1]), type);
      }
    },

 //日期对比切换
    changeCheckbox() {
      if (!this.contrast) {
        this.showDateTwo = false;
        this.dateValueTwo = ["", ""];
        let days = this.getDaysBetween(
          this.dateValueOne[0],
          this.dateValueOne[1]
        );
        this.getHistoryData(this.formatDate(this.dateValueOne[1]), days);
        this.historyVisitData.data.visitNumbCom = 0;
      }
    },

//自定义日期
    changeDate() {
      if (this.contrast) {
        //对比
        this.queryPlatformStatisticsCom();
      } else {
        //非对比
        let days = this.getDaysBetween(
          this.dateValueOne[0],
          this.dateValueOne[1]
        );
        this.getHistoryData(this.formatDate(this.dateValueOne[1]), days);
      }
    },
    // 对比接口请求前判断天数是否相同
    queryPlatformStatisticsCom() {
      let scoped = this.getDaysBetween(
        this.dateValueOne[0],
        this.dateValueOne[1]
      );
      let scoped1 = this.getDaysBetween(
        this.dateValueTwo[0],
        this.dateValueTwo[1]
      );
      if (scoped != scoped1) {
        this.$message({
          message: "对比日期天数不匹配，请重新选择",
          type: "warning"
        });
        return false;
      }
      this.getHistoryContrastData(
        this.formatDate(this.dateValueTwo[1]),
        scoped1
      );
    },
    //计算两个日期之前相差几天
    getDaysBetween(startDay, endDay) {
      let startDate = Date.parse(startDay);
      let endDate = Date.parse(endDay);
      if (startDate == endDate) {
        return 1;
      }
      let days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      return days + 1;
    },

//获取平台历史访问量数据
    getHistoryData(nowDate, scope) {
      this.historyVisitData.data.visitNumb = 0;
      this.historyVisitData.xAxisData = [];
      this.historyVisitData.seriesData = [];
      queryPlatformStatistics(nowDate, scope).then(res => {
        this.historyVisitData.data.visitNumb = res.data.visitNumb;
        res.historyData.forEach(item => {
          this.historyVisitData.xAxisData.push(item.time.endTime);
          this.historyVisitData.seriesData.push(item.visitNumb);
        });
        inithistoryChart(
          "历史访问量",
          this.historyVisitData.xAxisData,
          this.historyVisitData.seriesData,
          false,
          false
        );
      });
    },
    //获取平台历史对比访问量数据
    getHistoryContrastData(nowDate, scope) {
      this.historyVisitData.data.visitNumbCom = 0;
      this.historyVisitData.xAxisDataCom = [];
      this.historyVisitData.seriesDataCom = [];
      queryPlatformStatistics(nowDate, scope).then(res => {
        this.showDateTwo = true;
        this.historyVisitData.data.visitNumbCom = res.data.visitNumb;
        res.historyData.forEach(item => {
          this.historyVisitData.xAxisDataCom.push(item.time.endTime);
          this.historyVisitData.seriesDataCom.push(item.visitNumb);
        });

        inithistoryChart(
          "历史访问量",
          this.historyVisitData.xAxisData,
          this.historyVisitData.seriesData,
          this.historyVisitData.xAxisDataCom,
          this.historyVisitData.seriesDataCom
        );
      });
    },

 //格式化时间
    formatDate(nowDate) {
      var date = new Date(nowDate);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month <= 9) {
        month = "0" + month;
      }
      if (day <= 9) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    }