big-screen/src/views/center/components/tHDistortion.vue

<template>
  <div class="box">
    <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
    <div class="boxTop">
      <img class="img" src="../images/d045d87176109fc1dfb3b09a583fea5.png" alt="" srcset="" />
      <span>谐波畸变率排名</span>
      <!-- <div class="total">
          总计:<span>{{ total }}</span>
        </div> -->
    </div>
    <div class="boxBot" ref="Echartspm">
      <div id="echartpm" style="width: 100%; height: 100%" v-loading="isLoading"></div>
    </div>
  </div>
</template>
<script>
import { getUserScale } from "@/api/center/DropEvent.js";
import { getTHDTopTenData } from "@/api/homePage/index";
import Timeinterval from "@/views/Timeinterval/index.vue";
export default {
  components: { Timeinterval },
  props: {},
  data() {
    return {
      zoom: undefined, //图表焦点校验
      h: undefined,
      isLoading: false,
      total: 0,
      myChart: null,
      time: null,
    };
  },
  created() { },

  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    this.$nextTick(() => {
      this.province();
      setInterval(() => {
        clearInterval(this.time);

        this.province();
      }, 60000 * 5);
    });
  },

  methods: {
    //echarts图
    async province() {
      let name = [];
      let vthd = [];
      let transformerSubstation = [];
      await getTHDTopTenData({
        id: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
        startTime: this.$refs.Timeinterval.timeValue[0],
        endTime: this.$refs.Timeinterval.timeValue[1],
        type: 3,
      }).then((res) => {
        res.data.forEach((item) => {
          if (item.vthd) {
            name.push(item.name);
            transformerSubstation.push(item.subStationName)
            vthd.push(item.vthd);
          }
        });
      });

      this.isLoading = true;

      // const data = await getUserScale();
      let _this = this;
      let echarts = require("echarts");
      let domID1 = document.getElementById("echartpm");
      setTimeout(() => {
        (domID1.style.width = this.$refs.Echartspm.offsetWidth + "px"),
          (domID1.style.height = this.$refs.Echartspm.offsetHeight + "px");
      }, 0);
      if (_this.myChart != null) {
        _this.myChart.dispose();
      }
      _this.myChart = echarts.init(domID1);
      this.isLoading = false;
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {

            var tips = "";
            let index = name.indexOf(params[0].name)
            tips += '监测点' + "："+ params[0].name + "</br/>";
            tips += '变电站' + "：" + transformerSubstation[index] + "<br/>";
            tips += params[0].seriesName + "：" + params[0].value + "%<br/>";
            return tips;
          },
        },
        grid: {
          top: "40px", // 等价于 y: '16%'
          left: "50px",
          right: "55px",
          bottom: "50px",
        },
        legend: {
          top: "4%",
          left: "center",
          itemWidth: 13,
          itemHeight: 13,
          itemStyle: {
            color: "#00ffff",
          },
          icon: "rect",
          padding: 0,
          textStyle: {
            color: "#03E9FF",
            fontSize: 12,
            padding: [2, 0, 0, 0],
          },
        },
        xAxis: {
          type: "category",
          data: name,
          name: "监测点",
          nameTextStyle: {
            color: "#07FCF0",
            // top:'5%',
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#00ffff",
            },
          },
          axisTick: {
            show: false,

            alignWithLabel: true,
            lineStyle: {
              color: "#00ffff",
            },
          },
          axisLabel: {
            color: "#00ffff",
            // interval: 0,
            rotate: 45,
            formatter: function (name) {
              //超出部分隐藏显示
              return name.length > 6 ? name.slice(0, 3) + "..." : name;
            },
            interval: 0,
          },
        },

        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00ffff",
              },
            },
            splitLine: {
              //分割线配置
              lineStyle: {
                type: "dashed",
                color: "#00ffff",
              },
            },
          },
          {
            name: "单位:%",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
            position: "right",
            //right:'15%',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "谐波畸变率",
            type: "bar",
            barWidth: "20",
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#80ff09",
                  },
                  {
                    offset: 1,
                    color: "#05fffa",
                  },
                ]),
              },
            },
            data: vthd,
          },
        ],
      };
      //   // _this.myChart.resize();
      //   let _this = this;
      //   _this.$erd.listenTo(_this.$refs.fg, (element) => {
      //     _this.$nextTick(() => {
      //       _this.myChart.resize();
      //     });
      //   });
      //   window.onresize = function () {
      //     _this.myChart.resize();
      //   };
      option && _this.myChart.setOption(option, true);
      //window.echartsArr.push(_this.myChart);

      setTimeout(function () {
        _this.myChart.resize();
        let app = {
          currentIndex: -1,
        };

        _this.time = setInterval(function () {
          var dataLen = option.series[0].data.length;

          // 取消之前高亮的图形
          _this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          // 高亮当前图形
          _this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          _this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
        }, 2000);
      }, 0);
    },
  },
  beforeDestroy() {
    for (let i = 1; i < 10000; i++) {
      clearInterval(i);
    }
  },
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
  font-family: sszh;
  src: url("../fonts/sszh.ttf");
  /* IE9+ */
}

.box {
  width: 100%;
  height: 100%;

  .boxTop {
    position: relative;
    display: flex;
    align-items: center;
    height: 8%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 0.85rem;
    line-height: 8%;
    letter-spacing: 1px;
    color: #07d8fd;
    cursor: pointer;
    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;

    .img {
      height: 100%;
      padding: 0 1.5%;
      cursor: pointer;
    }

    .total {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0.85rem;
      color: rgb(0, 255, 0);
      transform: translate(-50%, -50%);

      span {
        font-family: electricFont;
        font-size: 1.3rem;
        color: #07d8fd;
      }
    }
  }

  .boxBot {
    height: 90%;
    // background-color: rgb(41, 16, 16);
  }
}
</style>