中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：ECharts 樣式設(shè)置 下一篇：ECharts 數(shù)據(jù)集（dataset）

ECharts 異步加載數(shù)據(jù)

ECharts 通常數(shù)據(jù)設(shè)置在 setOption 中，如果我們需要異步加載數(shù)據(jù)，可以配合 jQuery等工具，在異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項就行。

ECharts 通常數(shù)據(jù)設(shè)置在 setOption 中，如果我們需要異步加載數(shù)據(jù)，可以配合 jQuery等工具，在異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項就行。 json 數(shù)據(jù)：

echarts_test_data.json 數(shù)據(jù)：

{
? ? "data_pie" : [
? ? {"value":235, "name":"視頻廣告"},
? ? {"value":274, "name":"聯(lián)盟廣告"},
? ? {"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', ? ?// 設(shè)置圖表類型為餅圖
? ? ? ? ? ? ? ? radius: '55%', ?// 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項）的 55% 長度。
? ? ? ? ? ? ? ? data:data.data_pie
? ? ? ? ? ? }
? ? ? ? ]
? ? })
}, 'json')

運行代碼 ?

如果異步加載需要一段時間，我們可以添加 loading 效果，ECharts 默認(rèn)有提供了一個簡單的加載動畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 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', ? ?// 設(shè)置圖表類型為餅圖
? ? ? ? ? ? ? ? radius: '55%', ?// 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項）的 55% 長度。
? ? ? ? ? ? ? ? data:data.data_pie
? ? ? ? ? ? }
? ? ? ? ]
? ? })
}, 'json')

運行代碼 ?

數(shù)據(jù)的動態(tài)更新

ECharts 由數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變，因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單。

所有數(shù)據(jù)的更新都通過 setOption 實現(xiàn)，你只需要定時獲取數(shù)據(jù)，setOption 填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。

實例

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);

運行代碼 ?
上一篇：ECharts 樣式設(shè)置 下一篇：ECharts 數(shù)據(jù)集（dataset）