echarts 中通过 shift() 和 push() 实时更新数据

原创已于 2025-04-03 10:51:01 修改 · 1.1w 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端 #问题解决

于 2019-06-19 17:08:51 首次发布

echarts 专栏收录该内容

6 篇文章

订阅专栏

在数据分析大屏开发中，原本未要求实时更新，后有此需求。开发使用了 ECharts，且是基于 Vue 进行编写的，主要围绕前端技术解决大屏实时更新问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据分析大屏开发时一般都会用到echarts，本来没说还要实时更新，后来要求说要实时更新
这里我是用 vue 写的

首先 从 echarts 上复制的代码块下来 放到  图表函数中（下面的一系列操作都是在该函数中进行）*
 let option = {
        // 标题
        title: {
          text: "空气温度与时间的关系图",
          left: "center"
        },
        // 提示框
        tooltip: {
          trigger: "axis"
        },
        // 是否显示工具栏组件
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false }, // 数据视图工具，可以展示当前图表所用的数据，编辑后可以动态更新
            magicType: { show: true, type: ["line", "bar"] }, // 动态类型切换
            restore: { show: true }, // 重置
            saveAsImage: { show: true } // 保存图片
          }
        },
        calculable: true,
        // x 轴 表示
        xAxis: {
          data: []
        },
        // y 轴 表示
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          // 最高温
          {
            name: "当前气温",
            type: "line",
            data: []
          }
        ]
      };

 **//  初始化 echarts 实例**
      var myChart = this.$echarts.init(document.getElementById("空气温度"));
   **//  使用刚指定的配置项和绘制图表，数据为 option**
      myChart.setOption(option);
      
  **//  数据加载完之前 显示一段简单 的 loading 动画**
      myChart.showLoading();

**//从后台获取数据（这里使用axios）**
var dataX = []; // 实际存放 x 轴的 值
      var dataV = []; // 实际存放 y 轴的 值
      **// 从服务器获取数据**
      this.$axios
        .get("meteorological/tem")
        .then(res => {
          // 判断 是否从服务器中获取到了数据
          if (res) {
            for (var i = 0; i < res.data.length; i++) {
              // 拿到数据后 遍历拿到 对应的时间给 x 轴
              dataX.push(res.data[i].time.slice(11));
              // 拿到数据后， 遍历拿到对应的 温度 给 y 轴
              dataV.push(res.data[i].value);
            }
            **// 隐藏加载动画**
            myChart.hideLoading();
            // 加载数据图表
            myChart.setOption({
              xAxis: {
                data: dataX
              },
              series: [
                {
                  data: dataV
                }
              ]
            });
          }
        })
        .catch(err => {
          console.log(err);
        });

**// 实时更新****（每四秒添加数据）**
      let timeTicket;
      clearInterval(timeTicket);
      // 设置定时器，没四秒更新一次数据
      timeTicket = setInterval(function() {
        *// 获取到图表的  option*
        option = myChart.getOption();
        let arr = option.series[0].data;
        if (arr.length == 30) {
          arr.shift(); *// 从队头删除数据*
        }
        arr.push(Math.round(Math.random() * 5 + 25)); *// 从对尾添加数据*
        *// 加载数据 图表*
        myChart.setOption(option);
      }, 4000);