- 突然项目中要用到图表，所以就用了百度的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=" 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