一、json格式的list为:

在这里插入图片描述在这里插入图片描述
是一个具有温度、湿度、时间三个属性的json格式的list数据。

二.java后端代码

如代码所示:创建一个具有三属性的list对象并转化为json格式,准备传递给前端。

    @RequestMapping(value = "/getData", method = RequestMethod.POST)
    @ResponseBody
    public String getData() {
        logger.info("设置图表数据显示!");
        //从数据库中查询到所有数据对象
        List<BaseAdminChart> resultList = baseAdminChartMapper.selectAll();
        List list = new ArrayList();
        for (int i=0;i<resultList.size();i++) {
        //ChartRequest 为具有此三个属性的对象,插入到list中
            ChartRequest chart = new ChartRequest(resultList.get(i).getTemperature(),resultList.get(i).getHumilevel(),resultList.get(i).getRegTime());
            list.add(chart);
        }
        String data = JsonUtils.objectToJson(list);
        System.out.println("data数据为:"+data);
        return data;
    }

三、前端的ajax请求格式

1.此处result为从后端接收过来的json格式数据
2.下面的转换之后可以获取数据中的指定属性

    $.ajax({
        type: "POST",
        url: "/chart/getData",
        async: true,
        dataType: "json",
        success: function (result) {
            console.log("获取的result信息:"+result);
            /*将json数据转换为对象*/
            var obj = eval(result);
            var humilevel = new Array();
            var temperature = new Array();
            var regTime = new Array();
            for(var i in obj)
            {
                console.log("对象的温度"+obj[i].temperature);
                temperature[i] = obj[i].temperature;
                console.log("对象的湿度"+obj[i].humilevel);
                humilevel[i] = obj[i].humilevel;
                console.log("对象的时间"+obj[i].regTime);
                regTime[i] = obj[i].regTime;
            }
		}
	};

四、(echarts部分,无关)可以根据三个属性进行echarts列表属性的填写

//提交表单
window.onload = function (){
    //指定图表的配置项和数据
    var myChart2 = echarts.init(document.getElementById('chartmain'));
    myChart2.showLoading();
    $.ajax({
        type: "POST",
        url: "/chart/getData",
        async: true,
        dataType: "json",
        success: function (result) {
            console.log("获取的result信息:"+result);
            /*将json数据转换为对象*/
            var obj = eval(result);
            var humilevel = new Array();
            var temperature = new Array();
            var regTime = new Array();
            for(var i in obj)
            {
                console.log("对象的温度"+obj[i].temperature);
                temperature[i] = obj[i].temperature;
                console.log("对象的湿度"+obj[i].humilevel);
                humilevel[i] = obj[i].humilevel;
                console.log("对象的时间"+obj[i].regTime);
                regTime[i] = obj[i].regTime;
            }
            for (var j=0;j<humilevel.length;j++)
            {
                console.log("humilevel数组值为:"+humilevel[j]);
            }
            myChart2.hideLoading();//隐藏加载
            myChart2.setOption({
                title: {
                    text: '温湿度数据分析'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['期望温度', '温度', '期望湿度', '湿度']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                     data: regTime
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '期望温度',
                        type: 'line',
                        stack: '总量',
                        data: [25,27,23,20,26,24,28]
                    },
                    {
                        name: '温度',
                        type: 'line',
                        stack: '总量',
                        //data: [20,22,16,14,13,12,11]
                        data: temperature
                    },
                    {
                        name: '期望湿度',
                        type: 'line',
                        stack: '总量',
                        data: [30,32,29,35,27,38,34]
                    },
                    {
                        name: '湿度',
                        type: 'line',
                        stack: '总量',
                        data: humilevel
                    }
                ]
            });
            /*刷新页面*/
            //location.reload();
        }
    });
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐