Vue Echarts实时动态图表实现

Vue Echarts实时动态图表实现

针对实时数据推送的 动态Echarts图表 解决方案。

1.效果

动态Echart图表解决方案——vue2

2.代码

created() {
    this.$nextTick(() => {
      this.initEchartsHandle();
    });
},
methods: {
   initEchartsHandle() {
      var chartDom = document.getElementById("device-info-echarts");
      var myChart = this.$echarts.init(chartDom);
      // 基础配置代码
      var option = {
        title: {
          text: "实时数据信息",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["磁盘占有率", "CPU使用率", "GPU使用率", "Sta曲线"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [""],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "磁盘占有率",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [1],
          },
          {
            name: "CPU使用率",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [1],
          },
          {
            name: "GPU使用率",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [1],
          },
          {
            name: "Sta曲线",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [1],
          },
        ],
      };
      myChart.setOption(option);
      // 页面尺寸发生变化时，echarts布局自适应
      window.addEventListener("resize", function () {
        myChart3.resize();
      });
      
      // 模拟推送数据————（可根据实际数据获取方式调整）
      setInterval(() => {
        this.getLatestData(myChart, option);
      }, 2000); // 实时 两秒 获取数据
    },

	// 获取数据
    getLatestData(myChart, option) {
      // 添加最新数据项
      option.series.forEach((item, index) => {
        item.data.push(item.data[item.data.length - 1] + 20);
        //截取最新的固定条数的数据(截取7个)
        item.data = item.data.slice(-7);
      });

      // 如果X轴也是实时数据，可以这样更新
      var NowTime = this.formatDate(new Date(), true);
      //添加数据并截取最后七位最新数据
      option.xAxis[0].data.push(NowTime);
      option.xAxis[0].data = option.xAxis[0].data.slice(-7);
	  //重新配置数据
      myChart.setOption(option, true);
    },

    //时间格式化
    formatDate(date, isEchart = undefined) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      const formatNumber = (n) => {
        n = n.toString();
        return n[1] ? n : "0" + n;
      };
      if (isEchart) {
        return [hour, minute, second].map(formatNumber).join(":");
      } else {
        return (
          [year, month, day].map(formatNumber).join("-") +
          " " +
          [hour, minute, second].map(formatNumber).join(":")
        );
      }
    },
  }

3.注意

上面代码配置项option 或option.xAxis[0].data、option.series 的数据值，并 没有 放在 Vue 组件 data选项 中，是为了避免 出现 Vue data中 对象或数组数据在后续添加时 新数据不会被响应式处理，导致出现，Echart 数据更新了但页面视图未变化的情况。

echarts配置项option中的数据当然也可以放在 data 选项中，但是 如果出现Echart 数据更新了但页面视图未变化的情况，就需要去考虑 和 处理 是不是新增的数据 没有被响应式处理。