ECharts data is usually set in the
setOption
, if we need to load data asynchronously, we can work with tools such as jQuery to get the data asynchronously through the
setOption
just fill in the data and configuration items.
ECharts data is usually set in the If asynchronous loading takes a while, we can add ECharts is data-driven, and the change of data drives the change of chart presentation, so the implementation of dynamic data becomes extremely simple. All data are updated through the
setOption
, if we need to load data asynchronously, we can work with tools such as jQuery to get the data asynchronously through the
setOption
, just fill in the data and configuration items
json
data: 9.6.1. Echarts_test_data.json data: ¶
{
"data_pie" : [
{"value":235, "name":"Video AD"},
{"value":274, "name":"Alliance advertising"},
{"value":310, "name":"EMAIL"},
{"value":335, "name":"Direct Access"},
{"value":400, "name":"Search Engines"}
]
}
9.6.2. Example ¶
var myChart = echarts.init(document.getElementById('main'));
$.get('https://www.runoob.com/static/js/echarts_test_data.json',
function (data) {
myChart.setOption({
series : [
{
name: 'Referrer',
type: 'pie', // Set chart type to pie chart
radius: '55%', //
The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width).
data:data.data_pie
}
]
})
}, 'json')
loading
effect, ECharts provides a simple loading animation by default. You just need to call the
showLoading
method display. Call after the data has been loaded
hideLoading
method to hide the load animation: 9.6.3. Example ¶
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading(); // Enable loading effect
$.get('https://www.runoob.com/static/js/echarts_test_data.json',
function (data) {
myChart.hideLoading(); // Hide loading effect
myChart.setOption({
series : [
{
name: 'Referrer',
type: 'pie', // Set chart type to pie chart
radius: '55%', //
The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width).
data:data.data_pie
}
]
})
}, 'json')
Dynamic updating of data ¶
setOption
to achieve, you only need toget the data on a regular basis
setOption
fill in the data, regardlessof the changes in the data, ECharts will find the differences between the two sets of data and then use the appropriate animation to represent the changes in the data. 9.6.4. 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:'deal',
type:'line',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'deal',
data: data
}]
});
}, 500);