首页 新闻 会员 周边

echarts折线图动态加载数据的问题

0
悬赏园豆：50 [待解决问题]

1、x轴为当日凌晨零点到当日24点

2、Y轴为value型

3、刷新页面查询数据库

拜托各位走过路过的大神指点一下，最好贴出js代码

阿_坤的主页 阿_坤 | 初学一级 | 园豆：98
提问于：2016-08-19 09:30
< >
分享
所有回答(3)
-2

又来直接求代码的？

顾晓北 | 园豆：10844 (专家六级) | 2016-08-19 09:46

是滴，我自己写的出问题了，关于websocket这部分可以不用，可以用json格式的数据代替，只要js代码就可以了

支持(0) 反对(0) 阿_坤 | 园豆：98 (初学一级) | 2016-08-19 10:07
-2

可以用json格式的数据代替

小熊vs | 园豆：20 (初学一级) | 2016-08-19 14:32

就这么蹭园豆真的好么

支持(0) 反对(0) 阿_坤 | 园豆：98 (初学一级) | 2016-08-19 16:18

@丨akun丨: 我真的不是故意的  0.0  ~.~  息怒

支持(0) 反对(0) 小熊vs | 园豆：20 (初学一级) | 2016-08-19 19:16
0 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>index</title>
 <script type="text/javascript" src="${ctxStatic}/common/echarts/echarts.min.js"></script>
</head>
<body >
 <div id="main" style="width: 580px;height:350px;">  </div>
</body>
</html>
  <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));  option = {

                            tooltip: {
                                trigger: 'axis'
                            },

//                            toolbox: {
//                                show : true,
//                                feature : {
//                                    mark : {show: true},
//                                    dataView : {show: true, readOnly: false},
//                                    magicType : {show: true, type: ['line', 'bar']},
//                                    restore : {show: true},
//                                    saveAsImage : {show: true}
//                                }
//                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            dataZoom : {
                                show : false,
                                start : 0,
                                end : 100
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: true,
                                    splitLine: {
                                        show: false
                                    },
                                    data: (function (){
                                        var res = [];
                                       var point = new Date(new Date().toLocaleDateString()).getTime();
                                        var len = 289;
                                        while (len--){
                                            res.push(new Date(parseInt(point)).toString().substring(16,21))
                                            point = point + 5*60*1000;
                                        }
                                        return res;
                                    })()
                                },
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '实时功率',
                                    boundaryGap: [0.2, 0.2],
                                    splitLine: {
                                        show: false
                                    }
                                },
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '辐照强度',
                                    boundaryGap: [0.2, 0.2],
                                    splitLine: {
                                        show: false
                                    },

                                }
                            ],
                            series: [
                                {
                                    name: '实时功率',
                                    type: 'line',

                                    data:[10,15,35,50,60,80,90,100,150,200,182,160,150,140,100,90,50,40]
                                },
                                {
                                    name: '辐照强度',
                                    type: 'line',
                                    data: (function () {
                                        var res = ["0"];
//                                        var len = 2;
//                                        while (len--) {
//                                            res.push(len);
//                                        }
                                        return res;
                                    })()
                                }
                            ]
                        };
                        var lastData = 11;
                        var axisData;
                        var timeTicket = null;
                        if (timeTicket != null) {
                            clearInterval(timeTicket);
                        }
                            myChart.setOption(option);

                    </script>

可以凑合着用了

阿_坤 | 园豆：98 (初学一级) | 2016-08-20 08:31
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。