ECharts Asynchronous Data Loading

ECharts data is usually set in setOption. If we need to load data asynchronously, we can use tools like jQuery, and after asynchronously fetching the data, just fill in the data and configuration items via setOption.

ECharts 通常DataSettingsIn setOption Among them,ifI们requiresAsynchronous loadingData，YesCoordination jQuerywaitTools，Indifferent步Get DataafterThrough setOption 填入DataandConfiguration ItemJustline。 json Data：

echarts_test_data.json data:

{
    "data_pie" : [
    {"value":235, "name":Video Ad},
    {"value":274, "name":Affiliate Ad},
    {"value":310, "name":Email Marketing},
    {"value":335, "name":Direct Access},
    {"value":400, "name":Search Engine}
    ]
}

Example

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

Try it Yourself »

If asynchronous loading takes some time, we can add a loading effect. ECharts provides a simple loading animation by default. Just call the showLoading method to display it. After the data loading is complete, call the hideLoading method to hide the loading animation:

Example

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

Try it Yourself »

Dynamic data update

ECharts is data-driven; changes in data drive changes in the chart display, so implementing dynamic data becomes extremely simple.

All data updates are implemented through setOption. You only need to fetch data at regular intervals and pass it into setOption, without having to worry about what changes have actually occurred in the data. ECharts will identify the differences between the two sets of data and then use appropriate animations to represent the changes.

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:'Transactions',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};

setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'Transactions',
            data: data
        }]
    });
}, 500);

Try it Yourself »
other extensions