非同步數據加載和動態更新

非同步加載

在入門範例中的數據直接使用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