ECharts 异步加载数据
精华
小牛编辑
197浏览
2023-03-14
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" : "搜索引擎" }
]
}
"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.xnip.cn/static/js/echarts_test_data.json' , function (data ) {
myChart. setOption ( {
series : [
{
name : '访问来源' ,
type : 'pie' , // 设置图表类型为饼图
radius : '55%' , // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data :data. data_pie
}
]
} )
} , 'json' )
$. get ( 'https://www.xnip.cn/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.xnip.cn/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' )
myChart. showLoading ( ) ; // 开启 loading 效果
$. get ( 'https://www.xnip.cn/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 ) ;
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 ) ;