Echarts异步加载数据

生如夏花，开到荼蘼。

Echarts 异步加载数据

• ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery 等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。

{
    "data_pie" : [
    {"value":235, "name":"视频广告"},
    {"value":274, "name":"联盟广告"},
    {"value":310, "name":"邮件营销"},
    {"value":335, "name":"直接访问"},
    {"value":400, "name":"搜索引擎"}
    ]
}

• 实例

var myChart = echarts.init(document.getElementById('main'));
$.get(
  'https://www.runoob.com/static/js/echarts_test_data.json',
  function (data) {
    myChart.setOption({
      series: [
        {
          name: '访问来源',
          type: 'pie', // 设置图表类型为饼图
          radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: data.data_pie,
        },
      ],
    });
  },
  'json',
);

Loading 动画

• Echarts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading(); // 开启 loading 效果
$.get(
  'https://www.runoob.com/static/js/echarts_test_data.json',
  function (data) {
    myChart.hideLoading(); // 隐藏 loading 效果
    myChart.setOption({
      series: [
        {
          name: '访问来源',
          type: 'pie', // 设置图表类型为饼图
          radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: data.data_pie,
        },
      ],
    });
  },
  'json',
);

数据动态更新

• ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。
• 所有数据的更新都通过 setOption 实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

var base = +new Date(2014, 9, 3);
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);