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閱讀 227,663評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,125評論 3贊 414
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,506評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,614評論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,402評論 6贊 404
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,934評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,021評論 3贊 440
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,168評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,690評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,288評論 5贊 357
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,027評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2贊 370