ECharts asynchronously loads data

ECharts data is usually set in the setOption , if we need to load data asynchronously, we can work with tools such as jQuery to get the data asynchronously through the setOption just fill in the data and configuration items.

Echarts_test_data.json data:

{
    "data_pie" : [
    {"value":235, "name":"Video AD"},
    {"value":274, "name":"Alliance advertising"},
    {"value":310, "name":"EMAIL"},
    {"value":335, "name":"Direct Access"},
    {"value":400, "name":"Search Engines"}
    ]
}

Example

var myChart = echarts.init(document.getElementById('main'));
$.get('https://www.runoob.com/static/js/echarts_test_data.json',
function (data) {
    myChart.setOption({
        series : [
            {
                name: 'Referrer',
                type: 'pie',    // Set chart type to pie chart
                radius: '55%',  //
The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width).
                data:data.data_pie
            }
        ]
    })
}, 'json')

If asynchronous loading takes a while, we can add loading effect, ECharts provides a simple loading animation by default. You just need to call the showLoading method display. Call after the data has been loaded hideLoading method to hide the load animation:

Example

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // Enable loading effect
$.get('https://www.runoob.com/static/js/echarts_test_data.json',
function (data) {
    myChart.hideLoading();  // Hide loading effect
    myChart.setOption({
        series : [
            {
                name: 'Referrer',
                type: 'pie',    // Set chart type to pie chart
                radius: '55%',  //
The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width).
                data:data.data_pie
            }
        ]
    })
}, 'json')

Dynamic updating of data

ECharts is data-driven, and the change of data drives the change of chart presentation, so the implementation of dynamic data becomes extremely simple.

All data are updated through the setOption to achieve, you only need toget the data on a regular basis setOption fill in the data, regardlessof the changes in the data, ECharts will find the differences between the two sets of data and then use the appropriate animation to represent the changes in the data.

Example

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:'deal',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};
setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'deal',
            data: data
        }]
    });
}, 500);