PC_FiveFollowing/src/views/site/components/Overview/histTrendChart.vue

<template>
  <div ref="histTrendChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import api from "@/api/Overview/index";
import { ElMessage } from "element-plus";
export default {
  props: {
    msg: Object,
    filterSec_value: Object,
    hisDefaultTime: Object,
  },
  data() {
    return {
      yName: "",
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.electricIco();
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.siteId"() {
      this.electricIco();
    },
    hisDefaultTime() {
      this.electricIco();
    },
    msg() {
      this.electricIco();
    },
    filterSec_value() {
      this.electricIco();
    },
  },
  methods: {
    electricIco() {
      this.$store.commit("TimeAll_function", [this.hisDefaultTime]);
      var time = this.$store.state.Time_Data;
      //  console.log('time[0]')
      // console.log(time[0])
      // console.log(time[1])

      api
        .electricIco({
          siteId: this.$store.state.siteId,
          date: time[0],
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            this.initChart(requset.data);
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
    //次数分布折线图
    initChart(data) {
      var chart = echarts.init(this.$refs.histTrendChart);
      var option;
      var dataAll = [];

      data.map((val) => {
      let valName=val.name.charAt(0) + val.name.slice(1).toLowerCase()  //首字母大写
        if (this.msg == 0) {
          this.yName = "A";
          if (val.name == "IA" || val.name == "IB" || val.name == "IC") {
            return dataAll.push({
              name: valName + "(A)",
              type: "line",
              smooth: false,
              data: val.list,
              symbolSize: 6,
            });
          }
        } else {
          this.yName = "kV";
          if (val.name == "UA" || val.name == "UB" || val.name == "UC") {
            return dataAll.push({
              name: val.name + "(kV)",
              type: "line",
              smooth: false,
              data: val.list,
              symbolSize: 6,
            });
          }
        }
      });

      // console.log(JSON.stringify(data),JSON.stringify(dataAll));

      option = {
        color: ["#FEB70D", "#50F335", "#0DC8FE"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
          itemHeight: 10, //改变圆圈大小
          itemWidth: 26, //改变圆圈大小
          itemGap: 30,
          textStyle: {
            color: "#fff",
          },

          left: "30%",
          bottom: "0",
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "15%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: data[0].listDate.map((val) => {
            return val.split(":")[0] + ":" + val.split(":")[1];
          }),
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          name: this.yName,
          nameTextStyle: {
            color: "#fff",
            fontSize: 10,
          },
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: dataAll,
      };

      chart.setOption(option, true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>