Echarts使用心得總結 非同步資料載入

2021-09-30 14:11:05 字數 1108 閱讀 8559

非同步載入

echarts的資料一般是在初始化後setoption中直接填入的,但是很多時候可能資料需要非同步載入後再填入。echarts 中實現非同步資料的更新非常簡單,在圖表初始化後不管任何時候只要使用ajax等非同步獲取資料後通過 setoption 填入資料就行。

例項**:

請求的json資料

}
也可以先設定完其它的樣式,顯示乙個空的直角座標軸,然後獲取資料後填入資料。

var mychart = echarts.init(document.getelementbyid('mychart'));

// 顯示標題,圖例和空的座標軸

mychart.setoption(,

tooltip: {},

legend: ,

xaxis: ,

yaxis: {},

series:

});// 非同步載入資料

$.get('').done(function (resule) ,

yaxis: {},

series:

});});

如下:

示例:loading 動畫

如果資料載入時間較長,乙個空的座標軸放在畫布上也會讓使用者覺得是不是產生 bug 了,因此需要乙個 loading 的動畫來提示使用者資料正在載入。

echarts 預設有提供了乙個簡單的載入動畫。只需要呼叫 showloading 方法顯示。資料載入完成後再呼叫 hideloading 方法隱藏載入動畫。

mychart.showloading();

$.get('').done(function (resule) );

效果如下:

ECharts使用心得

上週專案組要臨時給客戶做乙個演示的原型,首頁設計的是乙個中國地圖,本來打算用谷歌的地圖,但是,做出來之後,整體的效果看起來太差了,最後就在網上搜相關的地圖呈現的控制項,然後就找到了這個echarts報表呈現元件,挺不錯的乙個元件,而且地圖資料都是離線的,真心很讚。但是,使用起來卻頗費了一番工夫。所以...

ECharts使用心得

上週專案組要臨時給客戶做乙個演示的原型,首頁設計的是乙個中國地圖,本來打算用谷歌的地圖,但是,做出來之後,整體的效果看起來太差了,最後就在網上搜相關的地圖呈現的控制項,然後就找到了這個echarts報表呈現元件,挺不錯的乙個元件,而且地圖資料都是離線的,真心很讚。但是,使用起來卻頗費了一番工夫。所以...

echarts 使用心得

echarts 是使用canvas繪圖的,所以放置在背景容器的css背景不會被顯示出來,所以如果需要顯示背景。可以使用設定,背景是乙個dom元素。所以給這個dom設定背景就可以了。為了方便起見,如果在容器的下方放置乙個元素和容器使用一模一樣的樣式並設定好背景。之前擔心設定display none會設...