iOS 使用百度图表插件Echarts

最新推荐文章于 2023-09-04 10:03:29 发布

Ma_Yingjiao

最新推荐文章于 2023-09-04 10:03:29 发布

阅读量5.8k

点赞数 1

分类专栏： iOS 图表 Echarts

本文链接：https://blog.csdn.net/Ma_Yingjiao/article/details/48929923

版权

iOS 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

图表

1 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

最近开发的iOS应用使用了百度的图表插件echarts，在这里做下记录

echarts 官网：http://echarts.baidu.com/

步骤就是首先在iOS里建几个常用的图表模板：柱状图、饼图、折线图，如果用到其他可以去官网看例子；

以柱状图为例,我的命名是chart_bar.html：

title:是标题，ocData:是X轴的名称，ocValueData:是具体是数值

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
        <title>ECharts</title>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:260px;width: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        var title = "";
        var ocData;
        var ocValueData;
    function setData(ocvalue){
        ocData = ocvalue;
    }
    function setValueData(ocvalue){
        ocValueData = ocvalue;
    }
     function setTitle(str){
        title = str;
     }

        // 路径配置
        require.config({
                       paths: {
                       echarts: 'http://echarts.baidu.com/build/dist'
                       }
                       });
                       
                       // 使用
                       require(
                               [
                                'echarts',
                                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                                ],
                               function (ec) {
                               // 基于准备好的dom，初始化echarts图表
                               var myChart = ec.init(document.getElementById('main'));
                               
                               var option = {
                               tooltip: {
                               show: true
                               },
                               legend: {
                               data:[title]
                               },
                               xAxis : [
                                        {
                                        type : 'category',
                                        data : ocData
                                        }
                                        ],
                               yAxis : [
                                        {
                                        type : 'value'
                                        }
                                        ],
                               series : [
                                         {
                                         "name":title,
                                         "type":"bar",
                                         "data":ocValueData
                                         }
                                         ]
                               };
                               // 为echarts对象加载数据 
                               myChart.setOption(option); 
                               }
                               );
        </script>
</body>

然后在oc代码里创建UIWebView ，加载chart_bar.html，并且传值title，ocData，ocValueData三个的值

LoadWebViewController.h

#import <UIKit/UIKit.h>

@interface LoadWebViewController : UIViewController<UIWebViewDelegate>

@end

LoadWebViewController.m

#import "LoadWebViewController.h"

@interface LoadWebViewController ()
{
      UIWebView *_webView;
}

@end
@implementation LoadWebViewController

-(void)viewDidLoad{
    [super viewDidLoad];
   
    
    _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,260)];
    _webView.backgroundColor = [UIColor redColor];
    _webView.delegate = self;
   
    [self.view addSubview:_webView];
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"chart_bar" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    
    [_webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:filePath]];

}

//webview加载完成后加载图表数据
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    //传值标题
<p class="p1"><span class="s1">    NSString</span><span class="s2"> *setTitle = </span><span class="s3">@"setTitle('</span><span class="s4">数量（吨）</span><span class="s3">')"</span><span class="s2">;</span></p>    [_webView stringByEvaluatingJavaScriptFromString:setTitle];
    
    //传值X轴
    [_webView stringByEvaluatingJavaScriptFromString:@"setData(['桔子','香蕉','苹果','西瓜'])"];
    //柱状图
        NSString *setValueData = [NSString stringWithFormat:@"setValueData([%@,%@,%@,%@])",@"200",@"100",@"260",@"400"];
    
    //传值Y轴数据
    [_webView stringByEvaluatingJavaScriptFromString:setValueData];
    
    
    
}

@end

运行项目，出现柱状图：

Ma_Yingjiao

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
iOS 使用百度图表插件Echarts

最近开发的iOS应用使用了百度的图表插件echarts，在这里做下记录echarts 官网：http://echarts.baidu.com/步骤就是首先在iOS里建几个常用的图表模板：柱状图、饼图、折线图，如果用到其他可以去官网看例子；以柱状图为例,我的命名是chart_bar.html：title:是标题，ocData:是X轴的名称，ocValueData:是具体是数值
复制链接

扫一扫