echarts 折线图柱状图想让X轴在上方展示（并根据当前时间进行一周推演），再根据tab切换进行视图更新

先让我们看看实现后的效果吧

下面是源码还原，需要修改今天明天的更改week1的数组即可

<template>
  <div class="boxd">
    <div class="boxtop">
      <span>整周监测实况</span>
      <ul class="titbox">
        <li ref="allin" class="active" @click="sxd()" style="cursor:pointer;">
          温度(℃)
        </li>
        <li ref="jk" @click="yxl()" style="cursor:pointer;">相对湿度(%)</li>
        <li ref="production" @click="sxj()" style="cursor:pointer;">降水量(mm/h)</li>
        <li ref="direction" @click="flfx()" style="cursor:pointer;">
          风力风向(m/s)
        </li>
      </ul>
    </div>
    <div id="myCharts" :style="{ width: '100%', height: '75%' }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      dateform: [],
      m2R2Data: [15, 18, 22, 24, 20, 21, 19]
    };
  },
  watch: {
    m2R2Data: function() {
      this.drawLine();
    }
  },
  mounted() {
    this.timeLine();
    this.drawLine();
  },
  methods: {
    timeLine() {
      function Double(n) {
        if (n < 10) {
          return "0" + n;
        } else {
          return n;
        }
      }
      let myDate = new Date();
      let month = myDate.getMonth() + 1;
      let dates = myDate.getDate();
      let week1 = ["今天 ", "明天 "];
      let week = [
        "星期日 ",
        "星期一 ",
        "星期二 ",
        "星期三 ",
        "星期四 ",
        "星期五 ",
        "星期六 "
      ];
      myDate.setDate(myDate.getDate() + 0);
      let dateArray = [];
      let dateTemp;
      let weekday;
      for (let i = 0; i < 7; i++) {
        dateTemp =
          Double(myDate.getMonth() + 1) +
          "月" +
          Double(myDate.getDate()) +
          "日";
        weekday = i <= 1 ? week1[i] : week[myDate.getDay()];
        dateArray.push(weekday + dateTemp);
        myDate.setDate(myDate.getDate() + 1);
      }
      this.dateform = dateArray;
    },
    sxd() {
      this.$refs.allin.style.borderBottom = "2px solid #009ef4";
      this.$refs.jk.style.borderBottom = "#fff";
      this.$refs.production.style.borderBottom = "#fff";
      this.$refs.direction.style.borderBottom = "#fff";
      this.m2R2Data = [15, 18, 22, 24, 20, 21, 19];
    },
    yxl() {
      this.$refs.allin.style.borderBottom = "#fff";
      this.$refs.jk.style.borderBottom ="2px solid #009ef4";
      this.$refs.production.style.borderBottom =  "#fff";
      this.$refs.direction.style.borderBottom = "#fff";
      this.m2R2Data = [68, 55, 48, 52, 58, 60, 62];
    },
    sxj() {
      this.$refs.allin.style.borderBottom = "#fff";
      this.$refs.jk.style.borderBottom = "#fff";
      this.$refs.production.style.borderBottom = "2px solid #009ef4";
      this.$refs.direction.style.borderBottom = "#fff";
      this.m2R2Data = [250, 220, 233, 277, 265, 262, 272];
    },
    flfx() {
      this.$refs.allin.style.borderBottom = "#fff";
      this.$refs.jk.style.borderBottom = "#fff";
      this.$refs.production.style.borderBottom = "#fff";
      this.$refs.direction.style.borderBottom = "2px solid #009ef4";
      this.m2R2Data = [4, 2, 3, 2, 5, 3, 2];
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myCharts"));
      let _this = this;
      let lineitemStyle = {
        normal: {
          label: {
            formatter: function(params) {
              return dataValue - params.value;
            },
            fontSize: 40,
            padding: [90, 0, 0, 0],
            color: "#fff",
            textStyle: {
              baseline: "top"
            }
          },
          color: "#66ff00",
          borderColor: "rgba(102, 255, 0, 0.5)",
          borderWidth: 10
        }
      };
      let dataItem = _this.m2R2Data;
      myChart.setOption({
        backgroundColor: "#fff",
        grid: {
          top: "25%",
          bottom: "10%",
          left: "5%",
          right: "5%"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          show: false
        },
        xAxis: [
          {
            type: "category",
            data: _this.dateform,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          },
          {
            type: "category",
            data: _this.dateform,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333" //X轴文字颜色
              },
              formatter: function(params) {
                return params.split(" ")[0] + "\n" + params.split(" ")[1];
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#ddd6d0"
              },
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            }
          },
          {
            type: "value",
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: lineitemStyle,
            data: dataItem
          }
        ]
      });
      window.onresize = myChart.resize;
    }
  }
};
</script>
<style lang="less" scoped>
.boxd {
  height: 80%;
  width: 100%;
  padding: 0.625em;
  float: left;
  .boxtop {
    width: 100%;
    height: 15%;
    background: #fff;
    padding: 5px;
    span {
      width: 40%;
      color: #333;
      display: inline-block;
      padding: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
    }
    .titbox {
      width: 60%;
      float: right;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      li {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 14px;
        margin: 5px;
      }
      .active {
        border-bottom: 2px solid #009ef4;
      }
    }
  }
}
</style>