LvglChart.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 = {
  frag_pct: [],
  free_biggest_size: [],
  free_cnt: [],
  free_size: [],
  total_size: [],
  used_cnt: [],
  used_pct: [],
};

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 {
      chart: null,
      series: [
        {
          name: "frag_pct",
          type: "line",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.frag_pct,
        },
        {
          name: "free_biggest_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.free_biggest_size,
        },
        {
          name: "free_cnt",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.free_cnt,
        },
        {
          name: "free_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.free_size,
        },
        {
          name: "total_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.total_size,
        },
        {
          name: "used_cnt",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.used_cnt,
        },
        {
          name: "used_pct",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.used_pct,
        },
      ],
      legendData: [
        "frag_pct",
        "free_biggest_size",
        "free_cnt",
        "free_size",
        "total_size",
        "used_cnt",
        "used_pct",
      ],
    };
  },
  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("resize", () => {
      if (this.chart) this.chart.resize()
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleData(data) {
      Object.keys(seriesData).forEach(key => {
        seriesData[key] = []
      });
      this.series.forEach(item => {
        item.data = []
      });
      this.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(() => {
        this.chart &&
          this.chart.setOption({
            series: this.series,
          });
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions();
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: "LVGL",
        },
        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: {
            frag_pct: false,
            free_biggest_size: false,
            free_cnt: false,
            free_size: false,
            total_size: false,
          },
        },
        series: this.series,
      });
    },
  },
};
</script>