iOS 中集成百度echarts3.0

617 0 0

作者:徒步天涯

突然项目中要用到图表，所以就用了百度的echarts，然后就是网上搜了一下，由于本人的JS不是很熟悉，但是研究了一下还是做出来了，其实也不是很难
最后做的效果大概如下图这种，由于界面上没调整，所以粗糙了一点
不多说前端的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script type="text/javascript" language="javascript">
        var title = "";
        var subtext = "";
        var legendData;
        var xAxisData;
        var valueDate;
        var valueDateA;
        var valueDateB;
        var valueDateC;
        var subType;
        var series;
        var myChart = null;
        var option;
        
        function setLegendData(legendDat) {
            legendData = legendDat;
        }
        function  setXAxisData(xAxisDat
                               ){
            xAxisData = xAxisDat;
        }
        function setValueDate(valueDat){
            valueDate = valueDat;
        }
        function setValueDateA(valuedatA){
            valueDateA = valuedatA;
        }
        function setValueDateB(valuedatB){
            valueDateB = valuedatB;
        }

        function setValueDateC(valuedatC){
            valueDateC = valuedatC;
        }
    
    function setSubType(type) {
        if(type == "I"){
            legendData = new Array('A相电流','B相电流','C相电流');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateC
                      },
                      ];
                      title = "电流曲线";
                      subtext = "单位（A）"
        }else if(type == "U"){
            legendData = new Array('A相电压','B相电压','C相电压');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateC
                      },
                      ];
                      title = "电压曲线";
                      subtext = "单位（V）"
        }else if(type == "P"){
            legendData = new Array('总有功功率','A相有功功率','B相有功功率','C相有功功率');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDate
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[3],
                      type:'line',
                      data:valueDateC
                      }
                      ];
                      
                      title = "有功功率曲线";
                      subtext = "单位（kW）"
        }else if(type == "Q"){
            legendData = new Array('总无功功率','A相无功功率','B相无功功率','C相无功功率');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDate
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[3],
                      type:'line',
                      data:valueDateC
                      }
                      ];
                      
                      title = "无功功率曲线";
                      subtext = "单位（kVar）"
        }else if(type == "S"){
            legendData = new Array('总视在功率','A相视在功率','B相视在功率','C相视在功率');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDate
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[3],
                      type:'line',
                      data:valueDateC
                      }
                      ];
                      title = "视在功率曲线";
                      subtext = "单位（kW）"
                      
        }else if(type == "cos"){
            legendData = new Array('总功率因数','A相功率因数','B相功率因数','C相功率因数');
            series = [{
                      name:legendData[0],
                      type:'line',
                      data:valueDate
                      },
                      {
                      name:legendData[1],
                      type:'line',
                      data:valueDateA
                      },
                      {
                      name:legendData[2],
                      type:'line',
                      data:valueDateB
                      },
                      {
                      name:legendData[3],
                      type:'line',
                      data:valueDateC
                      }
                      ];
                      title = "视在功率曲线";
                      
        }
    }
    
    function update() {
        // 指定图表的配置项和数据
         option = {
            
            title: {
                //            text: title,
                subtext:subtext
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:legendData
            },
            
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: series
        };
         myChart = echarts.init(document.getElementById('main'));
         myChart.setOption(option);
    }
    
    
    
  
    
    
    </script>
</head>
<body>
<div id="main" style="width: 100%;height:230px;"></div>
<script type="text/javascript" language="javascript">

</script>

</body>
</html>

json 文件代码如下

{
    "status": "1",
    "message": "成功",
    "data": [
        {
            "p": "174",
            "qb": "33",
            "q": "39",
            "qc": "50",
            "ia": "27",
            "fixTimeDate": "1490284800000",
            "s": "127",
            "cosb": "93",
            "cos": "29",
            "ib": "30",
            "ua": "10720",
            "ub": "10387",
            "ic": "23",
            "devId": "8a3ae71e5ac56347015ac6520afd0002",
            "uc": "10646",
            "id": "418A48AEDFAA4236854388B4F38D41F6",
            "pa": "144",
            "recTime": "1490284599000",
            "sa": "137",
            "cosc": "58",
            "pb": "187",
            "sb": "109",
            "pc": "132",
            "sc": "119",
            "cosa": "20",
            "qa": "31"
        },
        {
            "p": "174",
            "qb": "33",
            "q": "39",
            "qc": "50",
            "ia": "27",
            "fixTimeDate": "1490284800000",
            "s": "127",
            "cosb": "93",
            "cos": "29",
            "ib": "30",
            "ua": "10720",
            "ub": "10387",
            "ic": "23",
            "devId": "8a3ae71e5ac56347015ac6520afd0002",
            "uc": "10646",
            "id": "418A48AEDFAA4236854388B4F38D41F6",
            "pa": "144",
            "recTime": "1490284599000",
            "sa": "137",
            "cosc": "58",
            "pb": "187",
            "sb": "109",
            "pc": "132",
            "sc": "119",
            "cosa": "20",
            "qa": "31"
        },
        {
            "p": "174",
            "qb": "33",
            "q": "39",
            "qc": "50",
            "ia": "27",
            "fixTimeDate": "1490284800000",
            "s": "127",
            "cosb": "93",
            "cos": "29",
            "ib": "30",
            "ua": "10720",
            "ub": "10387",
            "ic": "23",
            "devId": "8a3ae71e5ac56347015ac6520afd0002",
            "uc": "10646",
            "id": "418A48AEDFAA4236854388B4F38D41F6",
            "pa": "144",
            "recTime": "1490284599000",
            "sa": "137",
            "cosc": "58",
            "pb": "187",
            "sb": "109",
            "pc": "132",
            "sc": "119",
            "cosa": "20",
            "qa": "31"
        },
        {
            "p": "174",
            "qb": "33",
            "q": "39",
            "qc": "50",
            "ia": "27",
            "fixTimeDate": "1490284800000",
            "s": "127",
            "cosb": "93",
            "cos": "29",
            "ib": "30",
            "ua": "10720",
            "ub": "10387",
            "ic": "23",
            "devId": "8a3ae71e5ac56347015ac6520afd0002",
            "uc": "10646",
            "id": "418A48AEDFAA4236854388B4F38D41F6",
            "pa": "144",
            "recTime": "1490284599000",
            "sa": "137",
            "cosc": "58",
            "pb": "187",
            "sb": "109",
            "pc": "132",
            "sc": "119",
            "cosa": "20",
            "qa": "31"
        }
    ]
}

这里做的只是一个测试项目，所以json 里面的数据都是一样的

控制器中设立了一个表格然后读取本地的数据

#import "ViewController.h"
#import "HistoryDateCell.h"
#import "HistoryDateModel.h"
#import "MJExtension.h"
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
/** 表格 */
@property(strong,nonatomic) UITableView *tableView;
@property(strong,nonatomic) NSArray *historyArray;

@end

@implementation ViewController
static NSString *HistoryDateCellID = @"HistoryDateCellId";

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupTableView];
    [self initJson];
    
}


#pragma mark - JSON 解析
-(void)initJson{
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"json"];
    NSData *jdata = [[NSData alloc]initWithContentsOfFile:filePath];

    NSDictionary *hisDict = [NSJSONSerialization JSONObjectWithData:jdata options:kNilOptions error:nil];
    self.historyArray = [HistoryDateModel mj_objectArrayWithKeyValuesArray:hisDict[@"data"]];
}

#pragma mark - 设置表格
-(void)setupTableView{
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    for (UIView *subView in self.tableView.subviews) {
        if ([subView isKindOfClass:[UIScrollView class]]) {
            ((UIScrollView *)subView).delaysContentTouches = NO;
        }
    }
    self.tableView.delaysContentTouches = NO;
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([HistoryDateCell class]) bundle:nil] forCellReuseIdentifier:HistoryDateCellID];
    
    [self.view addSubview:self.tableView];



}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    HistoryDateCell *cell = [tableView dequeueReusableCellWithIdentifier:HistoryDateCellID];
    cell.historyDate = self.historyArray;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 320;

}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

然后话折线图的代码都放在自定义cell 的代码里面，具体如下，我这里是对传入的参数进行了分类真正测试的话不会有这个复杂，并且我用的是wkwebview，这个的内存泄露没UIwebview那么严重，所以就用了这个

#import "HistoryDateCell.h"
#import "HistoryDateModel.h"
#import <WebKit/WebKit.h>
#import "TimeTools.h"

#define BTN_BACKCOLOR JdryRGBColorAlpha(25, 180, 212, 0.2)
#define SELECTBTN_BACKCOLOR JdryColorFromHex(0xFFFFFF)
/* 颜色进行宏定义 */
#define JdryColorFromHex(s)  [UIColor colorWithRed:(((s & 0xFF0000) >> 16))/255.0 green:(((s &0xFF00) >>8))/255.0 blue:((s &0xFF))/255.0 alpha:1.0]
#define JdryRGBColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define JdryRGBColorAlpha(r,g,b,a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:a];
#define BACK_COLOR JdryColorFromHex(0xE8F0F2)
#define BLUE_COLOR JdryColorFromHex(0x19B5D4)
#define RED_COLOR JdryColorFromHex(0xF95656)

/* 获取设备屏幕的大小 */
#define JdryScreeWidth [UIScreen mainScreen].bounds.size.width
#define JdryScreeHeight [UIScreen mainScreen].bounds.size.height
#define JdryScreeBounds [UIScreen mainScreen].bounds
@interface HistoryDateCell ()<WKNavigationDelegate>
@property (weak, nonatomic) IBOutlet UIButton *dayBtn;
@property (weak, nonatomic) IBOutlet UIButton *monthBtn;
@property (weak, nonatomic) IBOutlet UIButton *yearBtn;
/** echart */
@property(strong,nonatomic) WKWebView *wkWebView;
/** xAxisData */
@property(strong,nonatomic) NSString *xAxisData;
/** 总 */
@property(strong,nonatomic) NSMutableString *valueDat;
/** A */
@property(strong,nonatomic) NSMutableString *valueDatA;
/** B */
@property(strong,nonatomic) NSMutableString *valueDatB;
/** C */
@property(strong,nonatomic) NSMutableString *valueDatC;
/** X轴 */
@property(strong,nonatomic) NSMutableString *xAxis;

@end

@implementation HistoryDateCell

- (void)awakeFromNib {
    [super awakeFromNib];
 
    self.xAxis = [NSMutableString string];
    [self setEcharts:self.webContentView];
}

-(void)setHistoryDate:(NSArray *)historyDate{
    _historyDate = historyDate;
    self.subType = @"cos";
    self.timeType = @"2";
    [self selectSubType:self.subType timeType:_timeType];
}

-(void)selectSubType:(NSString *)subType timeType:(NSString *)timeType{
    self.valueDat = [NSMutableString string];
    self.valueDatA = [NSMutableString string];
    self.valueDatB = [NSMutableString string];
    self.valueDatC = [NSMutableString string];
    
    if ([subType isEqualToString:@"I"]) {
        for (HistoryDateModel *model in _historyDate) {
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.ia]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.ib]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.ic]];
        }
    }else if ([subType isEqualToString:@"U"]){
        for (HistoryDateModel *model in _historyDate) {
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.ua]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.ub]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.uc]];
        }
    }else if ([subType isEqualToString:@"P"]){
        for (HistoryDateModel *model in _historyDate) {
            [_valueDat appendString:[NSString stringWithFormat:@"'%@',",model.p]];
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.pa]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.pb]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.pc]];
        }
    }else if ([subType isEqualToString:@"Q"]){
        for (HistoryDateModel *model in _historyDate) {
            [_valueDat appendString:[NSString stringWithFormat:@"'%@',",model.q]];
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.qa]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.qb]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.qc]];
        }
    }else if ([subType isEqualToString:@"S"]){
        for (HistoryDateModel *model in _historyDate) {
            [_valueDat appendString:[NSString stringWithFormat:@"'%@',",model.s]];
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.sa]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.sb]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.sc]];
        }
    }else if ([subType isEqualToString:@"cos"]){
        for (HistoryDateModel *model in _historyDate) {
            [_valueDat appendString:[NSString stringWithFormat:@"'%@',",model.cos]];
            [_valueDatA appendString:[NSString stringWithFormat:@"'%@',",model.cosa]];
            [_valueDatB appendString:[NSString stringWithFormat:@"'%@',",model.cosb]];
            [_valueDatC appendString:[NSString stringWithFormat:@"'%@',",model.cosc]];
        }
    }
    
    for (HistoryDateModel *model in _historyDate) {
        if ([timeType isEqualToString:@"0"]) {
            [_xAxis appendString:[NSString stringWithFormat:@"'%@',",[TimeTools timeWithDateAndHourAndMIn:model.fixTimeDate]]];
        }else if ([timeType isEqualToString:@"1"]){
            [_xAxis appendString:[NSString stringWithFormat:@"'%@',",[TimeTools timeWithDayAndMonthString:model.fixTimeDate]]];
        }else if ([timeType isEqualToString:@"2"]){
            [_xAxis appendString:[NSString stringWithFormat:@"'%@月',",[TimeTools timeWithDateAndMonth:model.fixTimeDate]]];
        }
        
    }
    
    
    if (![subType isEqualToString:@"I"] && ![subType isEqualToString:@"U"]) {
        [_valueDat deleteCharactersInRange:NSMakeRange(_valueDat.length -1, 1)];
    }
    [_valueDatA deleteCharactersInRange:NSMakeRange(_valueDatA.length -1, 1)];
    [_valueDatB deleteCharactersInRange:NSMakeRange(_valueDatB.length -1, 1)];
    [_valueDatC deleteCharactersInRange:NSMakeRange(_valueDatC.length -1, 1)];
    [_xAxis deleteCharactersInRange:NSMakeRange(_xAxis.length -1, 1)];
}

#pragma mark - 设置echarts
-(void)setEcharts:(UIView *)contentView{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"HistoryData" ofType:@"html"];
    self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, JdryScreeWidth - 30, 406)];
    if(path){
        if ([[UIDevice currentDevice].systemVersion floatValue] >= 9.0) {
            NSURL *fileURL = [NSURL fileURLWithPath:path];
            [self.wkWebView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
        } else {
            NSURL *fileURL = [self fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:path]];
            NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
            [self.wkWebView loadRequest:request];
        }
    }
    self.wkWebView.navigationDelegate = self;
    [contentView addSubview: self.wkWebView];
}

- (NSURL *)fileURLForBuggyWKWebView8:(NSURL *)fileURL {
    NSError *error = nil;
    if (!fileURL.fileURL || ![fileURL checkResourceIsReachableAndReturnError:&error]) {
        return nil;
    }
    // Create "/temp/www" directory
    NSFileManager *fileManager= [NSFileManager defaultManager];
    NSURL *temDirURL = [[NSURL fileURLWithPath:NSTemporaryDirectory()] URLByAppendingPathComponent:@"www"];
    [fileManager createDirectoryAtURL:temDirURL withIntermediateDirectories:YES attributes:nil error:&error];
    
    NSURL *dstURL = [temDirURL URLByAppendingPathComponent:fileURL.lastPathComponent];
    // Now copy given file to the temp directory
    [fileManager removeItemAtURL:dstURL error:&error];
    [fileManager copyItemAtURL:fileURL toURL:dstURL error:&error];
    // Files in "/temp/www" load flawlesly :)
    return dstURL;
}

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setValueDate([%@])",_valueDat] completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);

    }];
    
    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setValueDateA([%@])",_valueDatA] completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);

    }];
    
    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setValueDateB([%@])",_valueDatB]completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);

    }];
    
    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setValueDateC([%@])",_valueDatC] completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);

    }];
    
    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setXAxisData([%@])",_xAxis]
completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);
        
    }];

    [self.wkWebView evaluateJavaScript:[NSString stringWithFormat:@"setSubType('%@')",self.subType]
 completionHandler:^(id dict, NSError * error) {
    
        
    
        NSLog(@"%@",error);

    }];
    [self.wkWebView evaluateJavaScript:@"update()" completionHandler:^(id dict, NSError * error) {
        NSLog(@"%@",error);
        
    }];
  
   
}

-(void)setFrame:(CGRect)frame{
    frame.origin.y = frame.origin.y += 10;
    frame.size.height = frame.size.height -= 10;
    
    [super setFrame:frame];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}
- (IBAction)selectDay:(UIButton *)sender {
    sender.backgroundColor = SELECTBTN_BACKCOLOR;
    self.monthBtn.backgroundColor = BTN_BACKCOLOR;
    self.yearBtn.backgroundColor = BTN_BACKCOLOR;
}


- (IBAction)selectMonth:(UIButton *)sender {
    sender.backgroundColor = SELECTBTN_BACKCOLOR;
    self.dayBtn.backgroundColor = BTN_BACKCOLOR;
    self.yearBtn.backgroundColor = BTN_BACKCOLOR;
}


- (IBAction)selectYear:(UIButton *)sender {
    sender.backgroundColor = SELECTBTN_BACKCOLOR;
    self.monthBtn.backgroundColor = BTN_BACKCOLOR;
    self.dayBtn.backgroundColor = BTN_BACKCOLOR;
}

@end

内容来源于网络如有侵权请私信删除

标签： IOS 苹果手机应用开发 IOS系统

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

iOS 中集成百度echarts3.0

iOS 中集成百度echarts3.0

热门标签

推荐文章