异步数据加载和动态更新

异步加载

在 入门示例 中的数据是通过使用 setOption 直接更新的。但在许多情况下，数据需要通过异步加载频繁填充。ECharts 可以简单地实现异步加载。您可以通过 jQuery 等函数异步获取数据，并在图表初始化后使用 setOption 填充数据和配置。

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function(data) {
  // Structure of data:
  // {
  //     categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
  //     values: [5, 20, 36, 10, 10, 20]
  // }
  myChart.setOption({
    title: {
      text: 'Asynchronous Loading Example'
    },
    tooltip: {},
    legend: {},
    xAxis: {
      data: data.categories
    },
    yAxis: {},
    series: [
      {
        name: 'Sales',
        type: 'bar',
        data: data.values
      }
    ]
  });
});

或在填充数据前显示定义了所有样式的空轴

var myChart = echarts.init(document.getElementById('main'));
// Show title, legends and empty axes
myChart.setOption({
  title: {
    text: 'Asynchronous Loading Example'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: []
    }
  ]
});

// Asynchronous Data Loading
$.get('data.json').done(function(data) {
  // Fill in the data
  myChart.setOption({
    xAxis: {
      data: data.categories
    },
    series: [
      {
        // Find series by name
        name: 'Sales',
        data: data.data
      }
    ]
  });
});

例如

更新数据时，您需要使用 name 来“导航”ECharts。在前面的示例中，图表可以根据系列的顺序正常更新，但我们建议您在更新数据时添加 name 数据。

加载动画

当加载数据需要很长时间时，用户面对的只有轴的空图表会怀疑是否存在错误。

ECharts 默认有一个简单的加载动画。您可以调用 showLoading 来显示。当数据加载完成后，调用 hideLoading 来隐藏动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

效果如下

动态更新

ECharts 由数据驱动，数据的更改将驱动图表呈现方式的更改。因此，实现动态更新非常简单。

所有数据的更新均通过 setOption 实现。您只需要定期获取数据。ECharts 将找出两组数据之间的差异，以使用适当的方式选择动画。

查看以下示例。

贡献者 在 GitHub 上编辑此页面

yhoiseth yhoisethpissang pissangballoon72 balloon72