ECharts實現(xiàn)異步數(shù)據(jù)加載和更新

2021-01-09 13:53 更新

Echarts 實現(xiàn)異步數(shù)據(jù)加載

我們在入門第一課中是在初始化后的 setOption 中直接填入數(shù)據(jù)的，但大部分的時候我們需要將數(shù)據(jù)異步加載后再填入。那么怎么實現(xiàn)？

ECharts 中實現(xiàn)異步數(shù)據(jù)的更新的操作不難，在初始化圖表后的任何時間通過使用 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項即可，操作如下：

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

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '異步數(shù)據(jù)加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

還有一種方法是先設(shè)置好別的樣式，顯示出一個空的直角坐標軸，然后獲取并填入數(shù)據(jù)，操作如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>w3cschool (www.o2fo.com) </title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 顯示標題，圖例和空的坐標軸
    function fetchData(cb) {
      // 通過 setTimeout 模擬異步加載
      setTimeout(function () {
        cb({
          categories: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
          data: [5, 20, 36, 10, 10, 20]
        });
      }, 3000);
    }
    // 初始 option
    option = {
      title: {
        text: '異步數(shù)據(jù)加載示例'
      },
      tooltip: {},
      legend: {
        data: ['銷量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: []
      }]
    };
    myChart.setOption(option);
    fetchData(function (data) {
      myChart.hideLoading();
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根據(jù)名字對應(yīng)到相應(yīng)的系列
          name: '銷量',
          data: data.data
        }]
      });
    });
  </script>
</body>
</html>

效果顯示如下：

Echarts 異步數(shù)據(jù)加載示例

點擊編輯實例 》》

ECharts 中通過 name 屬性在更新數(shù)據(jù)的時候?qū)?yīng)到相應(yīng)的系列。

上面示例中如果 name 不存在也可以根據(jù)系列的順序正常更新，但是更多時候推薦更新數(shù)據(jù)的時候加上系列的 name 數(shù)據(jù)。

Echarts 設(shè)置 loading 動畫

有時候由于各種原因，數(shù)據(jù)的加載會需要較多的時間，這樣一個空白的直角坐標系會讓用戶認為出現(xiàn) bug 了，為了避免這種錯覺，我們需要使用 loading 動畫給用戶一些提示。

利用 Echarts 提供的加載動畫，我們通過調(diào)用 showLoading 方法顯示加載動畫，當數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法將加載動畫隱藏。

具體操作如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>w3cschool (www.o2fo.com) </title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 顯示標題，圖例和空的坐標軸
    function fetchData(cb) {
      // 通過 setTimeout 模擬異步加載
      setTimeout(function () {
        cb({
          categories: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
          data: [5, 20, 36, 10, 10, 20]
        });
      }, 3000);
    }
    // 初始 option
    option = {
      title: {
        text: '異步數(shù)據(jù)加載示例'
      },
      tooltip: {},
      legend: {
        data: ['銷量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: []
      }]
    };
    myChart.showLoading();
    myChart.setOption(option);
    fetchData(function (data) {
      myChart.hideLoading();
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根據(jù)名字對應(yīng)到相應(yīng)的系列
          name: '銷量',
          data: data.data
        }]
      });
    });
  </script>
</body>
</html>

設(shè)置完效果如下：

數(shù)據(jù)為加載完成，顯示加載動畫：

Echarts 設(shè)置加載動畫

Echarts 實現(xiàn)數(shù)據(jù)的動態(tài)更新

ECharts 由數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變，因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單。

Echarts 中通過 setOption 更新所有的數(shù)據(jù)，我們要做的只是定時獲取數(shù)據(jù)，然后使用 setOption 填入數(shù)據(jù)，至于數(shù)據(jù)在過程中發(fā)生了哪些變化，不在我們的考慮范圍內(nèi)。

ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。

ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入單個數(shù)據(jù)，可以先 data.push(value) 后 setOption

具體可以看下面示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>w3cschool (www.o2fo.com) </title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var base = +new Date(2020, 7, 30);
    var oneDay = 24 * 3600 * 1000;
    var date = [];

    var data = [Math.random() * 150];
    var now = new Date(base);

    function addData(shift) {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
      date.push(now);
      data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
      if (shift) {
        date.shift();
        data.shift();
      }
      now = new Date(+new Date(now) + oneDay);
    }
    for (var i = 1; i < 100; i++) {
      addData();
    }
    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value'
      },
      series: [
        {
          name: '成交',
          type: 'line',
          smooth: true,
          symbol: 'none',
          stack: 'a',
          areaStyle: {
            normal: {}
          },
          data: data
        }
      ]
    };
    setInterval(function () {
      addData(true);
      myChart.setOption({
        xAxis: {
          data: date
        },
        series: [{
          name: '成交',
          data: data
        }]
      });
    }, 500);
    myChart.setOption(option);
  </script>
</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號