SystemChart.vue

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

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
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,
    },
    dataList: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  data() {
    return {
      series: [
        {
          name: "free_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.free_size,
        },
        {
          name: "free_space_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.free_space_size,
        },
        {
          name: "used_space_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.used_space_size,
        },
      ],
      legendData: Object.keys(seriesData),
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.handleMessage(val);
      },
    },
    dataList: {
      deep: true,
      handler(val) {
        if (val.length > 0) this.handleData(val);
      },
    },
  },
  mounted() {
    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>