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

<template>
  <div ref="alarmingChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import api from "../../../../api/site/Event_alarm";
import { ElMessage } from "element-plus";
export default {
  props: {},
  data() {
    return {};
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    /**
     * @监听vuex存储值变化 用于调用api
     */
    "$store.state.siteId": {
      immediate: true, // 首次加载的时候执行函数
      deep: true, // 深入观察,监听数组值，对象属性值的变化
      handler: function () {
        this.trendIco_api();
      },
    },
  },
  methods: {
    /**
     * @事件告警统计api请求
     */
    trendIco_api() {
      var _this = this;
      this.$store.commit("getTimeAll");
      this.$store.commit("TimeAll_function", this.$store.state.fh_defaultTime);
      var time = this.$store.state.Time_Data;
      api
        .trendIco({
          siteId: _this.$store.state.siteId,
          startTime: time[0],
          endTime: time[1],
          queryType: null,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            var data = requset.data[0];
            _this.initChart(data.list, data.listDate);
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
    //次数分布折线图
    initChart(data, dataTime) {
      var chart = echarts.init(this.$refs.alarmingChart);
      var option;

      option = {
        //    backgroundColor:'#323a5e',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "16%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          data: dataTime,
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: {
          minInterval:1,//将刻度的最小间距设置为1
          name: "（条）",
          nameTextStyle: {
            color: "#fff",
          },
          type: "value",
          //   max: "800",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLabel: {},
        },
        series: [
          {
            name: "昨日",
            type: "bar",
            barWidth: "20%",
            barGap: "0%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00A7FD",
                  },
                  {
                    offset: 1,
                    color: "#00A7FD",
                  },
                ]),
              },
            },
            data: data,
          },
        ],
      };

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