前言：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
