前言：ios 和 android 制作同一設計圖的圖表，兩端繪制結果顯示會不太一樣，并且會花大量的時間，對于需求的改變，更新代碼也不太容易。使用網頁制作的ECharts圖表方便、快捷，成為了原生的替代，ECharts 能輕松制作各種圖表，非常實用。
echatsGif.gif
ECharts 官網 http://echarts.baidu.com
-
如果沒有接觸過的可以進入 文檔 -> 教程 -> 5分鐘上手ECharts
這里就可以制作出簡易的html文件
echartsPic.png -
下載js文件
echartsPic2.png -
Demo地址
注意：在引入html 文件夾到工程時，選擇Create folder references ，真實文件路徑，顯示為藍色文件夾。
echarts3.png
- 這樣，簡單的一個圖表可以完成了。但是實際項目中，前端還需與后端配合完成數據的嵌入。
- 從服務器獲取數據并嵌入本地html
step1 服務器選手會將html假數據的寫成可嵌入的方法，格式由服務端定，供我們調用；
step2 我們需要把網絡請求到的數據（json格式）通過調用js方法嵌入到html中；
**注意需把json格式轉成jsonString(我使用的MJExtension的mj_JSONString)
jsString 格式如下：
{"_bottom_falg":["01月","02月","03月","04月","05月","06月","07月","08月","09月"],"data":["0","0","0","0","0","0","-15138.1","10134.5","13956.3"]}
step3 調用html中js方法，顯示echarts圖表
NSString *JSMethod = [NSString stringWithFormat:@"maoriTrend(%@);",self.jsString];
[self.webView evaluateJavaScript:JSMethod completionHandler:^(id _Nullable response, NSError * _Nullable error) {
LRLog(@"response: %@ error: %@", response, error);
}];
附上html的代碼
function maoriTrend(maoriCharts){
if(maoriCharts){
var data_2={
setColor:['#FF4080'],//柱狀的顏色配置
id:'bar_slide',//echarts盒子的id
data: maoriCharts.data, //數據數組
_bottom_falg: maoriCharts._bottom_falg//下標
};
bar_slide(data_2);
}
}
最終效果圖如下（只有圖表是html）：
圖表.png
