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" : "搜索引擎" }
    ]
}

实例

var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
$. get ( '/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 ( '/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 : [ , '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 ) ;

尝试一下 »