iOS-中集成百度echarts3-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-中集成百度echarts3-0相关推荐

iOS 中集成百度echarts3.0
突然项目中要用到图表,所以就用了百度的echarts,然后就是网上搜了一下,由于本人的JS不是很熟悉,但是研究了一下还是做出来了,其实也不是很难最后做的效果大概如下图这种,由于界面上没调整,所以粗糙 ...
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
AngularJS进阶十九在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
网页中集成百度商桥，自定义样式，可参照江苏美圣官网
下文是2016年10-24写的,11月份发现百度商桥更新了,所以下面的方法已经不存在了,目前(2016-11-18)商桥删除了内嵌样式,所以不能自定义了. 如今想在网站中集成一个在线即时沟通的功能是非 ...
iOS中集成ijkplayer视频直播框架
原文链接 ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何 ...
ios中使用百度地图API
首先打开百度地图api 然后登陆你的百度账号. 接下来就可以往下走了申请key 申请key有点不同,v2.0.2之后要申请新版的key! 新Key的申请地址为:http://lbsyun.baidu ...
在iOS中集成ZXing实现二维码扫描
图片找不到了.代码也找不到了.强制必须支持arm64位之后原来的zxing也不好用了. 现在苹果原生AVCaptureSession在iOS 7以上已经提供了二维码扫描功能,不用再依赖于Zxing了. ...
iOS中设置百度地图自定义标注图片，自定义泡泡
#pragma mark - BMKMapViewDelegate // 根据anntation生成对应的View - (BMKAnnotationView *)mapView:(BMKMapView ...
对ios中CGContextRef和image的处理
转自:http://blog.csdn.net/likendsl/article/details/7662739 1.UIImageView不支持内部图片平铺(tile) 2.资源中的图片要用小写 ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...

iOS-中集成百度echarts3-0

iOS-中集成百度echarts3-0相关推荐

最新文章

热门文章