iOS 使用ECharts实现动态数据+时间坐标轴

最近写一个项目要实现画图，感觉ECharts这个框架里边的图效果好一点，所以就用这个插件来实现我得画图功能，我用的是折线图，想要画柱状图、饼图等，官网都有例子，以下是我的实现步骤：

1、先用webStorm创建一个index.html；

2、直接进ECharts官网：
（http://echarts.baidu.com/tutorial.html#5%20分钟上手%20ECharts）
通过里边给的几种方式来获取 ECharts，我用的是第一种方式直接下载，将下载下来的echarts.min.js拖入到index所在的文件夹；

屏幕快照.png

3、官网上边有图形使用的js的源代码，但是直接拿来用会报错，以动态数据+时间坐标轴为例，官网的源代码是：

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

以下是改之后可以直接复制到index.html运行的代码：

<!DOCTYPE html>    
<html>    
<head>
    <meta charset="utf-8">
    <script type='text/javascript' src='echarts.min.js' charset='utf-8'></script>
  <title>charts</title>
</head>
<body>    
    <div id="main" style="width: 600px;height:400px;"></div>    
    <script type="text/javascript">    
        // 基于准备好的dom，初始化echarts实例    
        var myChart = echarts.init(document.getElementById('main'));//定义折线图显示的位置对象  
        function randomData() {    
            now = new Date(+now + oneDay);    
            value = value + Math.random() * 21 - 10;    
            return {    
                name: now.toString(),     
                value: [    
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),    
                    Math.round(value)    
                ]    
                   
            }    
        }    
            
        var data = [];    
        var now = +new Date(1997, 9, 3);    
        var oneDay = 24 * 3600 * 1000;    
        var value = Math.random() * 1000;    
        for (var i = 0; i < 1000; i++) {    
            data.push(randomData());    
        }    
            
        option = {    
            title: {    
                text: '动态数据 + 时间坐标轴'    
            },    
            tooltip: {    
                trigger: 'axis',    
                formatter: function (params) {    
                    params = params[0];    
                    var date = new Date(params.name);    
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];    
                },    
                axisPointer: {    
                    animation: false    
                }    
            },    
            xAxis: {    
                type: 'time',    
                splitLine: {    
                    show: false    
                }    
            },    
            yAxis: {    
                type: 'value',    
                boundaryGap: [0, '100%'],    
                splitLine: {    
                    show: false    
                }    
            },    
            series: [{    
                name: '模拟数据',    
                type: 'line',    
                showSymbol: false,    
                hoverAnimation: false,    
                data: data    
            }]    
        };    
            
       setInterval(function () {      
            for (var i = 0; i < 5; i++) {    
                data.shift();    
                data.push(randomData());    
            }    
           myChart.setOption(option);  
        }, 1000);    
    </script>    
</body>    
</html>

4、开始实现iOS跟html的交互，首先在iOS工程里边创建WebView用来显示html，要挂上代理UIWebViewDelegate

UIWebView *myWebView;

以下是UIWebView加载html页面的代码：

- (void)loadChat{

    myWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64, self.view.width, self.view.height)];
    myWebView.scalesPageToFit = YES;
    myWebView.delegate = self;
    [self.view addSubview:myWebView];
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    [myWebView loadHTMLString:htmlString baseURL:[NSURL URLWithString:filePath]];
}

以下是UIWebView的代理方法：

//开始加载请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    return YES;
}
//加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView{

}

注意在将html文件导入工程的时候要手动导入路径，不然会找不到路径

5、在index.html里边添加与ios交互的方法，代码如下：

    var ocValueData = [];
    function setValueData(ocValue) {
        console.log("ocValue"+ocValue);

        for (var i = 0; i < ocValue.length; i++) {
            ocValueData.push(randomData(ocValue[i],5));
        }
        myChart.setOption({
            series: [{
                data: ocValueData
            }]
        });
    }

6、iOS传数据到html页面，我是用定时器生成随机数直接传到html页面，代码如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    sendDataArray = [NSMutableArray array];
    [NSTimer scheduledTimerWithTimeInterval:0.15 target:self selector:@selector(action) userInfo:nil repeats:YES];
}

- (void)action{
    sendDataArray = [NSMutableArray array];
    for (int i = 0; i<9; i++) {
        [sendDataArray addObject:@(arc4random()%2500+3000)];
    }
    NSLog(@"sendDataArray:%@",sendDataArray);
    NSString *setValueData = [NSString stringWithFormat:@"setValueData([%@])",[sendDataArray componentsJoinedByString:@","]];
    [myWebView stringByEvaluatingJavaScriptFromString:setValueData];
}

7、以下是html实现交互之后的所有代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type='text/javascript' src='echarts.min.js' charset='utf-8'></script>

    <title>charts</title>

</head>

<body>

<div id="main" style="width: 100%;height:800px;"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">

    var ocValueData = [];
    function setValueData(ocValue) {
        console.log("ocValue"+ocValue);

        for (var i = 0; i < ocValue.length; i++) {
            if (ocValueData.length>600){
                ocValueData.shift();
            }
            ocValueData.push(randomData(ocValue[i],5));
        }
        myChart.setOption({
            series: [{
                data: ocValueData
            }]
        });
    }
   var myChart = echarts.init(document.getElementById('main'));
    function randomData(ocValue,time) {
        now = new Date(+now +time);
        value = ocValue;
        return {
            name: now.toString(),
            value: [
                now,
                ocValue
            ]
        }
    }
    var now = new Date();
    var value = Math.random() * 1000;
    var option = {
        title: {
            text: 'Realtime PPG'
        },
        textStyle:{
            fontSize:30
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },

        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: ocValueData
        }
        ]
    };
    myChart.setOption(option);

</script>
</body>

</html>

了解：

ocValueData.shift()：shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 ocValueData；

ocValueData.length：数组ocValueData的元素个数；

ocValueData.push()：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。push() 方法可把它的参数顺序添加到 ocValueData 的尾部。它直接修改 ocValueData，而不是创建一个新的数组。

设置x轴的时间间隔：通过更改randomData()方法里边的time参数，单位是毫秒，以上代码时间间隔设置的是5毫秒,如果想显示24小时的数据，可以把now = new Date(+now +time)改成now = new Date();

setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption(option);
}, 1000);
这个方法是定时器，下边的参数1000的单位是毫秒，也就是1秒产生5个随机数

demo地址：https://github.com/chenmengdi/TestDemo
最后附上我的实现效果图：

屏幕快照 .png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352