Echarts动态加载数据

最新推荐文章于 2024-04-25 22:02:20 发布

wisdom_bo

最新推荐文章于 2024-04-25 22:02:20 发布

阅读量9.9k

点赞数 2

分类专栏： web前端文章标签： echarts加载数据动态加载数据数据实时推送 window.setInterval自动

本文链接：https://blog.csdn.net/hh12211221/article/details/71244184

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在为写这个项目之前，并没有大范围的写过前端，这次也是锻炼了，由于项目需求，要求echarts图动态加载数据（定时加载），一下是我在网上看到的例子，在此基础上做了修改，实现了功能。但觉得还有很多需改进和学习的地方。

使用window.setInterval自动刷新数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="divProgress" style="width: 600px;height:400px;"></div>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    var myChart;
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('divProgress'));
                var option = {
                    tooltip: {
                        show: true
                    },
                    animation: false,
                    legend: {
                        data: ['销量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            "name": "销量",
                            "type": "bar",
                            "data": [5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );

    //这里用setTimeout代替ajax请求进行演示
    //3s刷新一次
    window.setInterval(function () {
        var data = [0, 0, 0, 0, 0, 0];
        refreshData(data);
    },3000);

    function refreshData(data){
        if(!myChart){
            return;
        }
        //更新数据
        var option = myChart.getOption();
        option.series[0].data = data;
        myChart.setOption(option);
    }
</script>
</body>
</html>

我认为这种方法存在一种弊端。如：在你设置的刷新时间较短的时候并未发现弊端，一旦设置刷新时间较长的话（如2min），很容易就会发现，在首次加载页面的时候并不能立即展示出数据，而是要经过刷新的时间间隔（2min）后，echarts方可展现。对此，我做了修改，修改之后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.loading.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column">
    <div class="panel info-list" id="solrsumPanel">
        <div class="panel-heading">
            <span class="panel-title">响应时间</span>
        </div>
        <div class="panel-body graph" style="height: 400px;"
             id="solrsumChart"></div>
    </div>
</div>

<script type="text/javascript">
    var drawsolr = function() {

        // 基于准备好的dom，初始化echarts实例
        $('#solrsumPanel').showLoading()// 显示loading效果，同时关闭提示消息
        var myChart = echarts.init(document.getElementById('solrsumChart'));
        $.ajax({
            type : 'get',
            url : "data.json",
            data : {

            },
            success : function(data) {
                $.each(data.dateTime, function(i, d) {
                    data.dateTime[i] = data.dateTime[i].substring(0, 10) + ' -'
                            + data.dateTime[i].substring(11, 19);// 截取日期
                });
                var date3 = [];
                var nums = [];
                var datalist = [];
                var times = [];
                for (var i = 0; i < data.dateTime.length; i++) {
                    date3.push(data.dateTime[i]);
                    datalist.push(data.nums[i]);
                    times.push(data.cost[i]);
                }
                $('#solrsumPanel').hideLoading()
                // 指定图表的配置项和数据
                var option = {
                    tooltip : {
                        trigger : 'axis',
                        axisPointer : {
                            type : 'cross',
                            label : {
                                backgroundColor : '#283b56'
                            }
                        }
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            dataView : {
                                readOnly : false
                            },
                            restore : {},
                            saveAsImage : {}
                        }
                    },
                    xAxis : [ {
                        type : 'category',
                        boundaryGap : true,
                        data : data.dateTime,
                        nameLocation : 'middle'
                    } ],
                    yAxis : [ {
                        type : 'value',
                        scale : true,
                        name : '数量',
                        boundaryGap : [ 0.2, 0.2 ],
                        axisLabel : {
                            formatter : '{value} 条'
                        }
                    }, {
                        type : 'value',
                        scale : true,
                        name : '时间',
                        boundaryGap : [ 0.2, 0.2 ],
                        splitLine : {
                            show : false
                        },
                        axisLabel : {
                            formatter : '{value} ms'
                        }
                    } ],
                    dataZoom : [ {
                        show : true,
                        realtime : true,
                        start : 65,
                        end : 85
                    }, {
                        type : 'inside',
                        realtime : true,
                        start : 65,
                        end : 85
                    } ],
                    series : [ {
                        name : '数量',
                        type : 'bar',
                        data : data.nums
                    }, {
                        name : '时间',
                        type : 'line',
                        yAxisIndex : 1,
                        data : data.cost
                    } ]
                };
                myChart.setOption(option);
            },
            error : function(XMLHttpRequest) {
                $('#solrsumPanel').hideLoading();
                $('#solrsumPanel').msg({
                    type : 'danger',
                    text : "查询数据出错，请联系管理人员！"
                });
            }
        });
    }


    $(function() {
        drawsolr();
    });

    //一分钟刷新一次
    setInterval(function() {
        drawsolr();
    }, 60000);
</script>
</body>
</html>

json数据格式如下：

{
    "dateTime": [
        "2017-05-05 00:10:02Z",
        "2017-05-05 00:20:02Z",
        "2017-05-05 00:30:02Z",
        "2017-05-05 00:40:02Z",
        "2017-05-05 00:50:02Z",
        "2017-05-05 01:00:02Z",
        "2017-05-05 01:10:02Z",
        "2017-05-05 01:20:02Z",
        "2017-05-05 01:30:02Z",
        "2017-05-05 01:40:02Z",
        "2017-05-05 01:50:02Z",
        "2017-05-05 02:00:02Z",
        "2017-05-05 02:10:02Z",
        "2017-05-05 02:20:02Z",
        "2017-05-05 02:30:02Z",
        "2017-05-05 02:40:02Z"
    ],
    "nums": [
        91,
        90,
        89,
        89,
        89,
        87,
        89,
        89,
        85,
        87,
        85,
        87,
        89,
        85,
        87,
        87
    ],
    "cost": [
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
    ]
}

这种方法虽然解决了上述的问题，但还是有不足的地方，例如：在动态加载数据的时候并不是局部（柱状折线）刷新，而是整张图都刷新，没有做到很好的数据实时推送。这一部分可以通过长轮询进行实现。后续会做进一步补充，今天就先到这儿吧......

wisdom_bo

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Echarts动态加载数据

在为写这个项目之前，并没有大范围的写过前端，这次也是锻炼了，由于项目需求，要求echarts图动态加载数据（定时加载），一下是我在网上看到的例子，在此基础上做了修改，实现了功能。但觉得还有很多需改进和学习的地方。使用window.setInterval自动刷新数据 var myChart; // 路径配置 require.conf
复制链接

扫一扫