使用ECharts制作各种图表

前言：ios 和 android 制作同一设计图的图表，两端绘制结果显示会不太一样，并且会花大量的时间，对于需求的改变，更新代码也不太容易。使用网页制作的ECharts图表方便、快捷，成为了原生的替代，ECharts 能轻松制作各种图表，非常实用。

echatsGif.gif
ECharts 官网 http://echarts.baidu.com

1. 如果没有接触过的可以进入 文档 -> 教程 -> 5分钟上手ECharts
   这里就可以制作出简易的html文件

   
   echartsPic.png

2. 下载js文件

   
   echartsPic2.png
3. Demo地址
   注意：在引入html 文件夹到工程时，选择Create folder references ，真实文件路径，显示为蓝色文件夹。

echarts3.png

4. 这样，简单的一个图表可以完成了。但是实际项目中，前端还需与后端配合完成数据的嵌入。
5. 从服务器获取数据并嵌入本地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