eCharts.js使用心得

時間 2019-11-21

標籤 echarts.js echarts 使用心得欄目 JavaScript 简体版

原文原文鏈接

最近剛剛作了一個項目，需求是使用eCharts實現實時監控，能夠動態的增長和刪除數據，能夠全屏展現，趁着如今還沒忘乾淨，整理一下使用過程當中出現的問題和經驗。可能有分析的不到位的地方，不喜勿噴！前端

1、圖表的配置，配置方面沒什麼好說的，參數官方文檔中都有解釋，時間軸的生成也是參考的官方實例，只是增長了一個刷新頻率cycle參數，項目中要求的。ajax

option = {
                backgroundColor: '#f0f0f0',
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                legend: {
                    data:legendData
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: true,
                    start: 0,
                    end: 100
                },
                xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: (function (){
                            var now = new Date();
                            var res = [];
                            var len = 100;
                            while (len--) {
                                res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                                now = new Date(now - 1000 * cycle);
                            }
                            return res;
                        })()
                    },
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        boundaryGap: [0, '100%'],
                        name: unit,
                        splitLine: {
                            show: true
                        }
                    }
                ],
                series: (function(){
                    var serie = [];
                    for(i=0; i<testData.length; i++){
                        var item = {
                            name: testData[i].name,
                            type: 'line',
                            showSymbol: false,
                            data: testData[i].data
                        }
                        serie.push(item);
                    }
                    return serie;
                })()
            };

2、初始化實例json

var myChart = echarts.init(document.getElementById('line-main'));

3、setOption數組

if (option && typeof option === "object") {
  myChart.setOption(option, true);
}

4、下面來講動態增長和刪除折線，說是刪除圖表中的元素，其實本質上都是對數據的操做。服務器

eoUnit.id = eoVal;
eoUnit.name =  eoText;
eoUnit.data = eoData;
testData.push(eoUnit);
legendData.push(eoText);

所謂增長折線，其實就是向數組裏添加一條數據。echarts

刪除也是，將數組中對應的數據刪除掉，可是要多執行一步操做async

myChart.setOption(optiondel, true);

若是不執行這個的話，圖表上的監控折線雖然中止了運動，可是以前的線會留在圖上，因此這步操做是必須的，也是值得注意的一點。函數

5、開始和中止監控，這塊沒什麼好講的，就是用到了兩個定時器，一個負責記錄剩餘時長，一個用來執行刷新函數。post

//開始
timer1 = setInterval(leftTimeFun,1000);//剩餘時長
timer = setInterval(monitorFun,1000 * cycle);//監控頻率
//中止
clearInterval(timer);
clearInterval(timer1);

6、監控函數，這部分功能應該算是核心功能了（有些變量名改了），其實這個也是對數組的操做，經過定時器定時執行，每次從服務器獲取一條最新數據插入到數組，從數組彈出最先的一條數據，造成一個隊列式操做，展示在圖表上就是實時監控的效果，setOption 中設置的都是有所改變的項，每操做一次，都要 setOption 。url

//監測函數
            function monitorFun(){
                var fdgal = $("#fdgd").val();
                $.ajax({
                    type:"post",
                    url: "aaaaa.action", 
                    async:false, 
                    timeout:1000,
                    data:{"aaaaList":aassList,"aaddid":ssssVal},
                    traditional: true,
                    dataType: "json", 
                    success: function(data){
                        var jsonData = eval("("+data+")");
                        var rightP = $(".datacol p");
                        for(i=0; i<testData.length; i++){
                            testData[i].showSymbol = false;
                            for (var j = 0; j < jsonData.length; j++){
                               if(jsonData[j].moId == testData[i].id){
                                    testData[i].data.shift();
                                    if(jsonData[j].value==""){
                                        testData[i].data.push(barData[i]);
                                        $(rightP[i]).text(barData[i]);
                                    }else{
                                        testData[i].data.push(jsonData[j].value);
                                        $(rightP[i]).text(jsonData[j].value);
                                    }
                               }
                           }
                        }
                    }
                });
                axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
                myChart.setOption({
                    legend: {
                        data:legendData
                    },
                    xAxis: {
                        data: (function (){
                            var now = new Date();
                            var res = [];
                            var len = 100;
                            while (len--) {
                                res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                                now = new Date(now - 1000 * cycle);
                            }
                            return res;
                        })()
                    },
                    series: (function(){
                        var serie = [];
                        for(i=0; i<testData.length; i++){
                            var item = {
                                name:testData[i].name,
                                type: 'line',
                                showSymbol: false,
                                data:testData[i].data
                            }
                            serie.push(item);
                        }
                        return serie;
                    })()
                });
                option.xAxis.data.shift();
                option.xAxis.data.push(axisData);
                cycleCount -= cycle;
                if(cycleCount < 0){
                    pause();
                }
            }