EvmChart.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";

// function randomData() {
//   now = new Date(+now + oneDay);
//   value = value + Math.random() * 21 - 10;
//   return {
//     name: "EVM",
//     value: [
//       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/") +
//         " " +
//         [now.getHours(), now.getMinutes() + 1, now.getSeconds()].join(":"),
//       Math.round(value),
//     ],
//   };
// }

// const dataList = [];
// let now = +new Date(1997, 9, 3);
// const oneDay = 24 * 3600 * 1000;
// var value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
//   dataList.push(randomData());
// }

let chart = null;

const seriesData = {
  heap_total_size: [],
  heap_used_size: [],
  stack_total_size: [],
  stack_used_size: [],
};

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 {
      loading: null,
      timer: null,
      series: [
        {
          name: "heap_total_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.heap_total_size,
        },
        {
          name: "heap_used_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.heap_used_size,
        },
        {
          name: "stack_total_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.stack_total_size,
        },
        {
          name: "stack_used_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.stack_used_size,
        },
      ],
      legendData: Object.keys(seriesData),
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.handleMessage(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });

    wsNotify.eventBus.$on("exportImg", () => {
      let picInfo = chart.getDataURL({
        type: "png",
        pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
        backgroundColor: "#fff",
      }); //获取到的是一串base64信息
      wsNotify.eventBus.$emit("exported", { type: "evm", data: picInfo });
    });

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

    wsNotify.eventBus.$on("clear-evm-chart", () => {
      chart.clear();
      this.setOptions();
    });
  },
  beforeDestroy() {
    if (!chart) {
      return;
    }
    chart.dispose();
    chart = null;
  },
  methods: {
    cleanData() {
      // 关闭从WebSocket接收数据
      // 重置所有数据
      Object.keys(seriesData).forEach((key) => {
        seriesData[key] = [];
      });
      this.series.forEach((item) => {
        item.data = [];
      });
      chart.setOption({ series: this.series });
    },
    handleMessage(data) {
      if (!data || data.length == 0) this.cleanData();
      // 这里面应该增加一个数组长度判断，当超过了多少个之后，弹出数组第一项，防止数组内存溢出
      // seriesData[k].shift()
      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: "EVM",
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false,
          },
          // data: xAxisTitle,
          // boundaryGap: false,
          // axisTick: {
          //   show: false,
          // },
          axisLabel: {
            formatter: "{HH}:{mm}:{ss}",
          },
        },
        yAxis: {
          type: "value",
          scale: true,
          // boundaryGap: [0, "100%"],
          // splitNumber: 10,
          splitLine: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
          },
          // formatter: function (params) {
          //   params = params[0];
          //   console.log(params);
          //   var date = new Date(params.name);
          //   return (
          //     date.getDate() +
          //     "/" +
          //     (date.getMonth() + 1) +
          //     "/" +
          //     date.getFullYear() +
          //     " : " +
          //     params.value[1]
          //   );
          // },
          padding: [5, 10],
        },
        legend: {
          data: this.legendData,
          selected: {
            heap_total_size: false,
            stack_total_size: false,
            stack_used_size: false,
          },
        },
        series: this.series,
      });
    },
  },
};
</script>