异步数据加载和动态更新

异步加载

入门示例中的数据直接使用 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