SystemChart.vue

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";
import { getDateTimeString } from "@/utils/utils";
import { wsNotify } from "@/utils/eventBus.js";

const seriesData = {
  free_size: [],
  free_space_size: [],
  used_space_size: [],
};

let chart = null;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "270px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      series: [],
      legendData: Object.keys(seriesData),
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.handleMessage(val);
      },
    },
  },
  mounted() {
    let array = [];
    Object.keys(seriesData).forEach((k) => {
      array.push({
        name: k,
        type: "line",
        showSymbol: false,
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
        data: seriesData[k],
      });
    });
    this.series = array;

    this.$nextTick(() => {
      this.initChart();
    });

    wsNotify.eventBus.$on("exportImg", () => {
      let picInfo = chart.getDataURL({
        type: "png",
        pixelRatio: 1.5,
        backgroundColor: "#fff",
      });
      wsNotify.eventBus.$emit("exported", { type: "system", data: picInfo });
    });

    wsNotify.eventBus.$on("resize", () => {
      if (chart) chart.resize();
    });

    wsNotify.eventBus.$on("clear-system-chart", () => {
      chart.clear();
      this.setOptions();
    });
  },
  beforeDestroy() {
    if (!chart) {
      return;
    }
    chart.dispose();
    chart = null;
  },
  methods: {
    handleData(data) {
      Object.keys(seriesData).forEach((key) => {
        seriesData[key] = [];
      });
      this.series.forEach((item) => {
        item.data = [];
      });
      // chart.dispose();
      chart.setOption({ series: this.series });

      data.forEach((item) => {
        this.handleMessage(item);
      });
    },
    handleMessage(data) {
      Object.keys(data).forEach((k) => {
        var t = getDateTimeString(new Date());
        if (k == "timestamp") t = data[k];
        if (this.legendData.includes(k)) {
          seriesData[k].push({
            name: k,
            value: [t, data[k]],
          });
        }
      });

      this.$nextTick(() => {
        chart &&
          chart.setOption({
            series: this.series,
          });
      });
    },
    initChart() {
      chart = echarts.init(this.$el, "macarons");
      this.setOptions();
    },
    setOptions() {
      chart.setOption({
        title: {
          text: "SYSTEM",
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        xAxis: {
          type: "time",
          splitLine: {},
          axisLabel: {
            formatter: "{HH}:{mm}:{ss}",
          },
        },
        yAxis: {
          type: "value",
          // boundaryGap: [0, "100%"],
          splitLine: {},
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
          },
          padding: [5, 10],
        },
        legend: {
          data: this.legendData,
          selected: {
            free_size: true,
            free_space_size: true,
            used_space_size: false,
          },
        },
        series: this.series,
      });
    },
  },
};
</script>