schoolPanel/src/pages/eleFireData/components/eleCurrentChart.vue

<template>
  <div id="eleCurrentChart" :style="{ width: '100%', height: '100% ' }"></div>
</template>
<script>
//三相电压模拟数据
// var yearData = [
//   {
//     data: [
//       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
//       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
//       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
//     ],
//   },
// ];

export default {
  props: {
    getData: [],
  },
  name: "lineChart",
  data() {
    return {
      myChart: null,
      eleCurrentA: [],
      eleCurrentB: [],
      eleCurrentC: [],
    };
  },
  computed: {
    A: function () {
      var aa = [];
      this.eleCurrentA.forEach(function (item) {
        aa.push(item.Value);
      });
      return aa;
    },

    B: function () {
      var bb = [];
      this.eleCurrentB.forEach(function (item) {
        bb.push(item.Value);
      });
       bb.reverse()
      return bb;
     
    },

    C: function () {
      var cc = [];
      this.eleCurrentC.forEach(function (item) {
        cc.push(item.Value);
      });
      cc.reverse()
      return cc;
    },
    Time: function () {
      var time = [];
      this.eleCurrentC.forEach(function (item) {
        time.push(item.Time);
      });
      time.reverse()
      return time;
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });

    setTimeout(() => {
      console.log("子组件中的this.getData");
      console.log(this.getData);
      this.eleCurrentA = this.getData[7].LIST;
      this.eleCurrentB = this.getData[8].LIST;
      this.eleCurrentC = this.getData[9].LIST;
      this.draw();
    }, 100);
  },

  methods: {
    draw() {
      this.myChart = this.$echarts.init(
        document.getElementById("eleCurrentChart")
      );
      this.myChart.setOption({
        // 通过这个color修改两条线的颜色
        title: {
          text: "ABC三相电流",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: ".225rem ",
            fontWeight: "400",
          },
          left: "center",
        },

        color: ["#60FF12", "#FF1212", "#26BFFF"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
          show: true,
          itemGap: 50,
          textStyle: {
            color: "#fff",
            fontSize: ".225rem ",
          },

          bottom: "-2%",
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "13%",
          bottom: "10%",
          containLabel: true, // 包含刻度文字在内
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          // data: [
          //   "09:00",
          //   "11:00",
          //   "13:00",
          //   "15:00",
          //   "17:00",
          //   "19:00",
          //   "21:00",
          //   "23:00",
          //   "01:00",
          //   "03:00",
          //   "05:00",
          //   "07:00",
          // ],
          data: this.Time,
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          // boundaryGap: false
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(-11,72,255,.5)",
            },
          },
        },
        series: [
          {
            name: "A相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[0],
            data: this.A,
            symbolSize: 10, //拐点圆的大小
          },
          {
            name: "B相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[1],
            data: this.B,
            symbolSize: 10, //拐点圆的大小
          },
          {
            name: "C相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[2],
            data: this.C,
            symbolSize: 10, //拐点圆的大小
          },
        ],
      });
    },
  },
};
</script>
<style>
</style>