student_portraits_manage/src/components/chart/LiveChart.vue

<template>
  <div class="LC">
    <div class="type">
      <p :class="class1[1]" @click="tab(1)">水电</p>
      <p :class="class1[0]" @click="tab(0)">热水</p>
      <p :class="class1[2]" @click="tab(2)">空调</p>
    </div>
    <div class="live" ref="live"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import resize from "@/mixins/resize";
import dayjs from "dayjs";
export default {
  mixins: [resize],

  name: "LiveChart",
  data() {
    return {
      class1: ["", "select", ""],
      water: [],
      waterTime: [],
      electricity: [],
      electricityTime: [],
      data: [],
      time: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let params = { id: sessionStorage.getItem("id") };
      this.API.personal
        .energy(params)
        .then((res) => {
          // console.log(res);
          
          this.electricity = [];
          this.electricityTime = [];
          let electricity = res.data.electricityAndColdWater.list.reverse();
          electricity.forEach((item) => {
            this.electricityTime.push(dayjs(item.date).format("M") + "月");
            this.electricity.push(item.totalMoney);
          });
          this.water = [];
          this.waterTime = [];
          let water = res.data.hotWater.list;
          water.forEach((item) => {
            this.waterTime.push(dayjs(item.date).format("M") + "月");
            this.water.push(item.totalMoney);
          });
          this.tab(1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    },
    tab(type) {
      // console.log(type);
      this.class1 = this.class1.map((item) => (item = ""));
      this.class1[type] = "select";
      if (type == 0) {
        this.data = this.water;
        this.time = this.waterTime;
        this.live();
      } else if (type == 1) {
        this.data = this.electricity;
        this.time = this.electricityTime;
        this.live();
      }

      // electricity: [],
      // electricityTime: [],
    },
    live() {
      this.myEcharts = echarts.init(this.$refs.live);
      this.myEcharts.setOption({
        tooltip: {},
        grid: {
          top: "30%",
          bottom: "15%",
          right: "5%",
          left: "27%",
        },
        xAxis: {
          type: "category",
          data: this.time,
          axisTick: {
            show: false, //刻度线是否显示
          },
          axisLabel: {
            color: "rgba(255,255,255,1)",
            fontSize: this.fontSize(0.12),
          },
          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示
            //------------------- 线 -------------------------
            lineStyle: {
              color: "rgba(88, 162, 168, 0.14)",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: "元",
          nameTextStyle: {
            color: "rgba(255,255,255,1)",
            align: "right",
            verticalAlign: "top",
            lineHeight: this.fontSize(-0.15),
            fontSize: this.fontSize(0.12),
          },
          axisLabel: {
            color: "rgba(255,255,255,1)", // 坐标轴文字颜色
            fontSize: this.fontSize(0.12),
          },
          axisTick: {
            show: false, //刻度线是否显示
          },
          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示
            //------------------- 线 -------------------------
            lineStyle: {
              color: "rgba(255,255,255,0)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            // 网格线的设置
            lineStyle: {
              // 使用深浅的间隔色
              color: "rgba(88, 162, 168, 0.14)",
            },
          },
        },

        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            data: this.data,
            barWidth: this.fontSize(0.2),
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                // color在这里
                {
                  offset: 0,
                  color: "rgba(0, 255, 240, 0.09)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 240, 1)",
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="less">
.LC {
  width: 100%;
  height: 100%;
  position: relative;

  .type {
    position: absolute;
    top: 10px;
    left: 345px;
    z-index: 99;

    p {
      width: 50px;
      height: 23px;
      border-radius: 3px;
      box-sizing: border-box;
      display: inline-block;
      color: #fff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      font-size: 12px;
      margin-right: 5px;
      background: rgba(0, 0, 0, 0.15);
    }

    .select {
      border: 1px solid #00b7ee;
    }
  }

  .live {
    width: 536px;
    height: 240px;
  }
}
</style>