正文

教你轻松绘制echarts滚动图表，实时数据动起来！

/0 浏览量
0612

前言

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地实现各种数据可视化效果。今天，我们将一起学习如何使用 ECharts 创建一个滚动图表，让你的数据动起来，实时展示动态变化的数据。无论你是数据分析爱好者还是前端开发者，这篇文章都能帮助你轻松掌握 ECharts 滚动图表的绘制方法。

准备工作

在开始之前，请确保你已经：

  1. 熟悉 HTML、CSS 和 JavaScript 基础。
  2. 在你的项目中引入了 ECharts 库。

你可以通过以下代码在你的 HTML 文件中引入 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

创建滚动图表

1. 创建基础图表

首先，我们需要创建一个基础图表。以下是一个简单的折线图示例：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));

  var option = {
    title: {
      text: '实时数据'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: []
    }]
  };

  myChart.setOption(option);
</script>

2. 添加数据

接下来，我们需要向图表中添加数据。这里，我们将使用一个定时器来模拟实时数据的变化：

var data = [];
var timeData = [];

// 添加初始数据
for (var i = 0; i < 10; i++) {
  data.push(Math.round(Math.random() * 100));
  timeData.push('时间' + i);
}

// 更新图表数据
function updateData() {
  var newData = Math.round(Math.random() * 100);
  data.push(newData);
  timeData.push('时间' + (data.length - 1));

  // 删除旧数据
  if (data.length > 30) {
    data.shift();
    timeData.shift();
  }

  myChart.setOption({
    xAxis: {
      data: timeData
    },
    series: [{
      data: data
    }]
  });
}

// 每秒更新数据
setInterval(updateData, 1000);

3. 设置滚动效果

为了让图表中的数据滚动显示，我们需要对 X 轴进行一些设置。以下是完整的代码示例：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));

  var option = {
    title: {
      text: '实时数据'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      type: 'category',
      data: [],
      boundaryGap: false
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: []
    }]
  };

  myChart.setOption(option);

  var data = [];
  var timeData = [];

  // 添加初始数据
  for (var i = 0; i < 10; i++) {
    data.push(Math.round(Math.random() * 100));
    timeData.push('时间' + i);
  }

  // 更新图表数据
  function updateData() {
    var newData = Math.round(Math.random() * 100);
    data.push(newData);
    timeData.push('时间' + (data.length - 1));

    // 删除旧数据
    if (data.length > 30) {
      data.shift();
      timeData.shift();
    }

    myChart.setOption({
      xAxis: {
        data: timeData
      },
      series: [{
        data: data
      }]
    });
  }

  // 每秒更新数据
  setInterval(updateData, 1000);
</script>

总结

通过以上步骤，你已经成功创建了一个 ECharts 滚动图表。现在，你可以将这个图表应用到你的项目中，实时展示动态变化的数据。希望这篇文章能帮助你更好地掌握 ECharts 滚动图表的绘制方法。如果你还有其他问题，欢迎在评论区留言交流。

-- 展开阅读全文 --