YouTipEcharts Ajax Data
ECharts usually sets data in setOption. If we need to load data asynchronously, we can use tools like jQuery, and after asynchronously obtaining data, we can fill in the data and configuration items through setOption.
ECharts usually sets data in setOption. If we need to load data asynchronously, we can use tools like jQuery, and after asynchronously obtaining data, we can fill in the data and configuration items through setOption. json data:
## echarts_test_data.json data:
{
"data_pie":[
{"value":235,"name":"Video Ads"},
{"value":274,"name":"Affiliate Ads"},
{"value":310,"name":"Email Marketing"},
{"value":335,"name":"Direct Access"},
{"value":400,"name":"Search Engine"}
]
}
## Example
var myChart = echarts.init(document.getElementById('main'));
$.get('',function(data){
myChart.setOption({
series :[
{
name:'Traffic Source',
type:'pie',// Set the chart type to pie chart
radius:'55%',// Pie Chart'sRadius, the outer radius is the viewport size (the smaller of the container's height and width).'s 55% Length.
data:data.data_pie
}
]
})
},'json')
[Try it »](#)
If asynchronous loading takes a while, 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 is loaded, call the hideLoading method to hide the loading animation:
## Example
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();// Show the loading effect
$.get('',function(data){
myChart.hideLoading();// Hide the loading effect
myChart.setOption({
series :[
{
name:'Traffic Source',
type:'pie',// Set the chart type to pie chart
radius:'55%',// Pie Chart'sRadius, the outer radius is the viewport size (the smaller of the container's height and width).'s 55% Length.
data:data.data_pie
}
]
})
},'json')
[Try it »](#)
### Dynamic Data Update
ECharts is data-driven, and changes in data drive changes in chart display, making the implementation of dynamic data extremely simple.
All data updates are implemented through setOption. You only need to regularly fetch data and fill it into setOption, without worrying about what changes have occurred in the data. ECharts will find the differences between the two sets of data and then express the data changes through appropriate animations.
## 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 »](#)