关于json与echarts的问题 10C

第一段代码如下

 var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)};

返回数组形式的是

 var data = [{"id":"0000000000000000000000000000000000000000000000000000000000000014","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 09:46:16","temperature":"30.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000019","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 12:52:11","temperature":"40.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000020","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-26 13:20:28","temperature":"20.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000027","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-04-27 14:17:09","temperature":"50.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}},{"id":"0000000000000000000000000000000000000000000000000000000000000040","isNewRecord":false,"remarks":"电源柜标签10","tagId":"E281CA0020000000000002DA","addTime":"2017-05-02 15:59:34","temperature":"70.0","tblTemperature":{"id":"1c3782ea07514577b04c1a87c3d824f0","isNewRecord":false}}];

我该如何把addTime和temperature放进Echarts的data中?

 var temperature=[];//温度
    var addTime=[];//获取时间

        $.ajax({
                    type : "post",
                    async : true,//异步请求
                    dataType : "json",
                    url:"${ctx}/temperaturehistory/tblTemperature/axisTem?id=${tblTemperature.id}", 
                    data:{},
                            success : function(result) {
                        temperature.push(result.temperature);
                        addTime.push(result.addTime);
                        myChart.setOption({
                            xAxis : [ {
                                data : addTime
                            } ],
                            series : [ {
                                data : temperature
                            } ]
                        })
                    }
                });
        myChart.setOption(option);

整个jsp也面

 <script type="text/javascript">

        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }))

        }

    </script>
</head>
<body>
    <div id="main" style="width: 1500px; height: 600px;"></div>
    <div class="control-group">
        <label class="control-label">子:</label>
        <div class="controls">
            <table id="contentTable"
                class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th class="hide"></th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <shiro:hasPermission name="temperaturehistory:tblTemperature:edit">
                            <th width="10">&nbsp;</th>
                        </shiro:hasPermission>
                    </tr>
                </thead>
                <tbody id="tblTemperatureHistoryList">
                </tbody>

            </table>
            <script type="text/template" id="tblTemperatureHistoryTpl">//<!--
                        <tr id="tblTemperatureHistoryList{{idx}}">
                            <td class="hide">
                                <input id="tblTemperatureHistoryList{{idx}}_id" name="tblTemperatureHistoryList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
                                <input id="tblTemperatureHistoryList{{idx}}_delFlag" name="tblTemperatureHistoryList[{{idx}}].delFlag" type="hidden" value="0"/>
                            </td>
                            <td>
                                <input id="tblTemperatureHistoryList{{idx}}_tagId" name="tblTemperatureHistoryList[{{idx}}].tagId" type="text" value="{{row.tagId}}" maxlength="64" class="input-small "/>
                            </td>
                            <td>
                                <input id="addTime" name="tblTemperatureHistoryList[{{idx}}].addTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                                    value="{{row.addTime}}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
                            </td>
                            <td>
                                <input id="temperature" name="tblTemperatureHistoryList[{{idx}}].temperature" type="text" value="{{row.temperature}}" class="input-small "/>
                            </td>
                            <td>
                                <textarea id="tblTemperatureHistoryList{{idx}}_remarks" name="tblTemperatureHistoryList[{{idx}}].remarks" rows="4" maxlength="255" class="input-small ">{{row.remarks}}</textarea>
                            </td>
                            <shiro:hasPermission name="temperaturehistory:tblTemperature:edit"><td class="text-center" width="10">
                                {{#delBtn}}<span class="close" onclick="delRow(this, '#tblTemperatureHistoryList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
                            </td></shiro:hasPermission>
                        </tr>//-->
                    </script>

            <script type="text/javascript"
                src="/jeesite/static/js/echarts/echarts.js"></script>
            <script type="text/javascript"
                src="/jeesite/static/jquery/jquery-1.8.3.js"></script>
            <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'))
option= {
                    color: ['#ff3d3d', '#00a0e9', '#f603ff','#00b419','#5f52a0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: 'left',
                        padding: [10, 20,0,20],
                        data:['温度'],
                    },
                    grid: {
                        left: '0',
                        right: '3%',
                        bottom: '3%',
                        top:'13%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        splitLine:{//网格线
                            show: true,
                            lineStyle:{
                                color:['#b1b1b1'],
                                type:'dashed'
                            }
                        },
                        data: []
                    },
                    yAxis: {
                        splitLine:{//网格线
                            show: true,
                            lineStyle:{
                                color:['#b1b1b1'],
                                type:'dashed'
                            }
                        }
                    },
                    series: [
                        {
                            name:'温度',
                            type:'line',
                            data:[],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'//值显示
                                }
                            }
                        }
                    ]
                };
    var datai = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)};
    var temperature=[];//温度
    var addTime=[];//获取时间

                    $.ajax({
                    type : "post",
                    async : true,//异步请求
                    dataType : "json",
                    data:{},
                    success : function(result) {
                                for(var i =0;i<datai.length;i++){
                                    for(var j=0;j<data[i].length;j++){
                                    temperature.push(datai[i][j].temperatuer);
                                    addTime.push(datai[i][j].addTime);
                                }
                                }
                        myChart.setOption({
                             xAxis :{
                                 data:addTime
                             },
                             series : {
                                 data:temperature
                             }
                        })
                    }
                  });
        myChart.setOption(option);
        //打印数据,用于测试数据是否得到
        console.warn(temperature, addTime);
</script>

            <script type="text/javascript">
                        var tblTemperatureHistoryRowIdx = 0, 
                            tblTemperatureHistoryTpl = $("#tblTemperatureHistoryTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                        $(document).ready(function() {
                            alert(1)

                            var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)};
                            for (var i=0; i<data.length; i++){
                                addRow('#tblTemperatureHistoryList', tblTemperatureHistoryRowIdx, tblTemperatureHistoryTpl, data[i]);
                                tblTemperatureHistoryRowIdx = tblTemperatureHistoryRowIdx + 1;
                            }

                        });

                    </script>
        </div>
    </div>


</body>

6个回答

你的这个和ajax什么关系?直接页面上付给给js变量的那不是自己遍历data数组压入temperature和addTime中setOption

    var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)};
    var temperature = [];//温度
    var addTime = [];//获取时间
    for (var i = 0; i < data.length; i++) {
        temperature.push(data[i].temperature);
        addTime.push(data[i].addTime)
    }
    option.xAxis = [{ data: addTime }]
    option.series = [{ data: temperature }]
qq_35649402
你们让我起个名啊 回复你们让我起个名啊: 方便加你QQ什么的聊吗?
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 回复showbo: 是在页面的
接近 3 年之前 回复
showbo
支付宝加好友偷能量挖 回复你们让我起个名啊: 你贴出来的1维json数组,哪来的二维? var data = ${fns:toJson(tblTemperature.tblTemperatureHistoryList)};你这个是在页面里面还是其他地方的?
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 然而我这个是二维数组...
接近 3 年之前 回复

同学您好,因为你的代码是直接用Ajax提交的,所以后台的数据封装好了直接以数据字典的形式返回给你前台了,所以可以data.temperature,您可以试试?如果错了,再另寻其他解决。

qq_35649402
你们让我起个名啊 这样不行啊
接近 3 年之前 回复

照楼上说的做应该就可以了!!!

![![图片说明](https://img-ask.csdn.net/upload/201705/03/1493782575_52610.jpg)图片说明](https://img-ask.csdn.net/upload/201705/03/1493782544_512523.jpg)

图片说明

图片说明

qq_35649402
你们让我起个名啊 方便qq联系吗?
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问