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

<template>
  <div id="cableRemChart" :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,
      cableRemA: [],
      cableRemB: [],
      cableRemC: [],
    };
  },
  watch: {},
  computed: {
    A: function () {
      var aa = [];
      this.cableRemA.forEach(function (item) {
        aa.push(item.Value);
        aa.reverse()
      });
      return aa;
    },

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

    C: function () {
      var cc = [];
      this.cableRemC.forEach(function (item) {
        cc.push(item.Value);
      });
      cc.reverse()
      return cc;
    },
    Time: function () {
      var time = [];
      this.cableRemC.forEach(function (item) {
        time.push(item.Time);
        
      });
      time.reverse()
      return time;
    },
  },
  mounted() {
    setTimeout(() => {
      // console.log("子组件中的this.getData");
      // console.log(this.getData);
      this.cableRemA = this.getData[13].LIST;
      this.cableRemB = this.getData[14].LIST;
      this.cableRemC = this.getData[15].LIST;
      this.draw();
    }, 100);

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });

   
  },
  methods: {
   
    draw() {
      this.myChart = this.$echarts.init(
        document.getElementById("cableRemChart")
      );
      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:false,
          itemGap: 100,
          /* 如果series对象有name值，则legend可以不用写data */
          // 修改图列组件文字颜色
          textStyle: {
            color: "#fff",
            fontSize: ".225rem ",
          },

          bottom: "-2%",
          // right:"-18%"
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "13%",
          bottom: "12%",
          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>