ele-usky/src/views/site/components/Overview/realTimeChart.vue

<template>
  <div ref="realTimeChart" 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: {},
  data() {
    return {
      chart: null,
    };
  },

  mounted() {
    this.eptrendIco();
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.siteId"() {
      this.eptrendIco();
    },
  },
  methods: {
    eptrendIco() {
      api
        .eptrendIco({
          siteId: this.$store.state.siteId,
        })
        .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.realTimeChart);
      var option;
      var dataAll = [];

      data.map((val) => {
        dataAll.push({
          name: val.name,
          type: "line",
          smooth: false,
          data: val.list,
          symbolSize: 6,
        });
      });

      option = {
        color: ["#F66167", "#31E9FF"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
          itemHeight: 8, //改变圆圈大小
          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: "MW",
          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>