eCharts.js使用心得

Posted 键盘敲飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了eCharts.js使用心得相关的知识,希望对你有一定的参考价值。

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

最近刚刚做了一个项目,需求是使用eCharts实现实时监控,可以动态的增加和删除数据,可以全屏展示,趁着现在还没忘干净,整理一下使用过程中出现的问题和经验。可能有分析的不到位的地方,不喜勿喷!

 一、图表的配置,配置方面没什么好说的,参数官方文档中都有解释,时间轴的生成也是参考的官方实例,只是增加了一个刷新频率cycle参数,项目中要求的。

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;
                })()
            };

二、初始化实例

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

三、setOption

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

四、下面来说动态增加和删除折线,说是删除图表中的元素,其实本质上都是对数据的操作。

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

所谓增加折线,其实就是向数组里添加一条数据。

删除也是,将数组中对应的数据删除掉,但是要多执行一步操作

myChart.setOption(optiondel, true);

 如果不执行这个的话,图表上的监控折线虽然停止了运动,但是之前的线会留在图上,所以这步操作是必须的,也是值得注意的一点。

五、开始和停止监控,这块没什么好讲的,就是用到了两个定时器,一个负责记录剩余时长,一个用来执行刷新函数。

//开始
timer1 = setInterval(leftTimeFun,1000);//剩余时长
timer = setInterval(monitorFun,1000 * cycle);//监控频率
//停止
clearInterval(timer);
clearInterval(timer1);

六、监控函数,这部分功能应该算是核心功能了(有些变量名改了),其实这个也是对数组的操作,通过定时器定时执行,每次从服务器获取一条最新数据插入到数组,从数组弹出最早的一条数据,形成一个队列式操作,展现在图表上就是实时监控的效果,setOption 中设置的都是有所改变的项,每操作一次,都要 setOption 。

//监测函数
            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();
                }
            }

有不明确的地方可以交流一下,随时恭候,不对的地方也请指正,共同进步。 

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464


以上是关于eCharts.js使用心得的主要内容,如果未能解决你的问题,请参考以下文章

使用ECharts画K线图

python测试开发django-149.ECharts 生成柱状图

python测试开发django-147.ECharts 生成饼图

python测试开发django-150.ECharts 生成折线图

AngularJS引入Echarts的Demo

python测试开发django-148.ECharts 生成环状图(饼图)