对ECHarts柱状图的初步封装

最新推荐文章于 2025-06-17 14:13:58 发布

原创最新推荐文章于 2025-06-17 14:13:58 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #ECHarts

iOS学习笔记同时被 2 个专栏收录

143 篇文章

订阅专栏

HTML

28 篇文章

订阅专栏

本文介绍了一种封装ECharts的方法，使得在iOS应用中能够更简便地创建柱状图。通过Objective-C实现了一个简单的封装，使开发者仅需提供必要的数据即可完成图表的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在研究ECHarts时，总感觉局限性太大，只能在html页面使用ECHarts，而且创建过程也比较复杂。就尝试着对ECHarts进行初步封装，以便可以快速创建一个图标视图，将过程进行简单记录。
主要代码如下：
html页面代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <script type="text/javascript">
        function ZZT(legend,listX,showNum){
            var showLegend ;
            if(legend ){
                alert(legend);
                showLegend = true;
            }
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById("main"));
            var option={
                tooltip:{
                    show:showLegend
                },
                legend:{
                    data:[legend]
                },
                xAxis:[{
                       type:'category',//默认为类目
                       data : listX
                       }],
                       yAxis : [
                                {
                                type : 'value'//默认为值类型
                                }
                                ],
                       series : [{
                                  "name":legend,
                                  "type":"bar",
                                  "data":showNum
                                  }
                                  ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    function divframe(x,y,wid,hei){
        var divMain = document.getElementById("main");
        if(divMain){
            divMain.style.marginTop =y+"px";
            divMain.style.marginLeft =x+"px"
            divMain.style.width = wid+"px";
            divMain.style.height = hei+"px";
        }

    }
    </script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ></div>
<!-- ECharts单文件引入 -->
<script src="echarts/build/dist/echarts-all.js"></script>

</body>
</html>

OC 代码：
ZWWebViewManager.h

#import <UIKit/UIKit.h>

@interface ZWWebViewManager : UIView

//创建柱状图
-(void)createZhuZhuangTuWithLegend:(NSString *)legend ValueX:(NSArray *)arrayX showNumber:(NSArray *)numberArray;
//创建柱状图
-(void)createZhuZhuangTuWithLegend:(NSString *)legend ValueX:(NSArray *)arrayX showNumber:(NSArray *)numberArray  margin:(CGRect)frame;

@end

ZWWebViewManager.m

//
//  ZWWebViewManager.m
//  ECharts-OC
//
//  Created by rayootech on 16/5/24.
//  Copyright © 2016年 rayootech. All rights reserved.
//

#import "ZWWebViewManager.h"
#import <JavaScriptCore/JavaScriptCore.h>
@interface ZWWebViewManager()<UIWebViewDelegate>
/*webView*/
@property(nonatomic,weak)UIWebView *webView ;
//执行的js
@property(nonatomic,copy)NSString *js;
//执行的frame
@property(nonatomic,copy)NSString *jsframe;
/*JSContext*/
@property(nonatomic,strong)JSContext *context;
@end

@implementation ZWWebViewManager

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        UIWebView *webView = [[UIWebView alloc]initWithFrame:self.bounds];
        webView.delegate = self;
        webView.scrollView.scrollEnabled = NO;
        webView.backgroundColor = [UIColor greenColor];
        self.webView = webView;
        [self addSubview:webView];
        //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
        JSContext *context=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        self.context = context;
    }
    return self;
}

-(void)createZhuZhuangTuWithLegend:(NSString *)legend ValueX:(NSArray *)arrayX showNumber:(NSArray *)numberArray{

    if (!legend) {
        legend = @"";
    }
    NSString *path = [[NSBundle mainBundle]pathForResource:@"localjs_zhuzhuangtu" ofType:@"html"];
    NSURL *url = [NSURL URLWithString:path];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    NSMutableArray *msarray = [NSMutableArray arrayWithCapacity:arrayX.count];
    for (NSString *value  in arrayX) {
        [msarray addObject:[NSString stringWithFormat:@"'%@'",value]];
    }
    NSString * _value = [msarray componentsJoinedByString:@","];

    //显示数据
    NSString * _value2 = [numberArray componentsJoinedByString:@","];

    self.jsframe = [NSString  stringWithFormat:@"divframe(%.0f,%.0f,%.0f,%.0f)",0.0,0.0,self.bounds.size.width,self.bounds.size.height];
    self.js= [NSString  stringWithFormat:@"ZZT('%@',[%@],[%@])",legend,_value,_value2]; //准备执行的js代码
}

#pragma mark - 创建柱状图
-(void)createZhuZhuangTuWithLegend:(NSString *)legend ValueX:(NSArray *)arrayX
                        showNumber:(NSArray *)numberArray margin:(CGRect)frame{
    NSString *path = [[NSBundle mainBundle]pathForResource:@"localjs_zhuzhuangtu" ofType:@"html"];
    NSURL *url = [NSURL URLWithString:path];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    NSMutableArray *msarray = [NSMutableArray arrayWithCapacity:arrayX.count];
    for (NSString *value  in arrayX) {
        [msarray addObject:[NSString stringWithFormat:@"'%@'",value]];
    }
    NSString * _value = [msarray componentsJoinedByString:@","];

    //显示数据
    NSString * _value2 = [numberArray componentsJoinedByString:@","];

    self.jsframe = [NSString  stringWithFormat:@"divframe(%.0f,%.0f,%.0f,%.0f)",frame.origin.x,frame.origin.y,frame.size.width,frame.size.height];
    self.js= [NSString  stringWithFormat:@"ZZT('%@',[%@],[%@])",legend,_value,_value2]; //准备执行的js代码
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [self.context evaluateScript:self.jsframe];//通过oc方法调用js的alert
    [self.context evaluateScript:self.js];//通过oc方法调用js的alert

}
@end

调用：

ZWWebViewManager *manager = [[ZWWebViewManager alloc]initWithFrame:CGRectMake(-50, 50, 400, 400)];

//    [manager createZhuZhuangTuWithLegend:@"销量" ValueX:@[@"衬衫",@"羊毛衫",@"雪纺衫",@"裤子",@"高跟鞋",@"袜子"] showNumber:@[@5, @20, @40, @10, @10, @20]  margin:CGRectMake(-10, -10, 400, 400)];

    [manager createZhuZhuangTuWithLegend:nil ValueX:@[@"衬衫",@"羊毛衫",@"雪纺衫",@"裤子",@"高跟鞋",@"袜子"] showNumber:@[@5, @20, @40, @10, @10, @20]];
    [self.view addSubview:manager];

效果：
这里写图片描述