ECharts 异步加载数据

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

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

echarts_test_data.json 数据:

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

实例

varmyChart=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 方法隐藏加载动画:

实例

varmyChart=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 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

实例

varbase=+newDate(2014,9,3);
varoneDay=24*3600*1000;
vardate=[];

vardata=[Math.random()*150];
varnow=newDate(base);

functionaddData(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 =newDate(+newDate(now)+oneDay);
}

for(vari=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);

尝试一下 »