欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts使用,Java后台传数据,前台数据展示

程序员文章站 2024-03-14 17:27:40
...

1.后台Service

@Override
    public Map<String, Object> getCityPm25List() {

        List<CityPm25> resultList=new ArrayList<>();
        try{
            resultList=cityPmDAO.getCityPm25List();
        } catch (Exception e) {
            e.printStackTrace();
        }
        Map<String,Object> map=new HashMap<>();
        List<String> cityNameList=resultList.stream().map(i->i.getCityName()).collect(Collectors.toList());
        List<String> pm25List=resultList.stream().map(i->i.getPm25()).collect(Collectors.toList());
        map.put("cityNameList",cityNameList);
        map.put("pm25List",pm25List);
        return map;
    }

后台需要使用HashMap,传两个List,一个List存横坐标,一个List存纵坐标

最后得到的数据

{
    "pm25List": [
        "115",
        "80",
        "120",
        "90",
        "40"
    ],
    "cityNameList": [
        "衡阳",
        "长沙",
        "株洲",
        "岳阳",
        "郴州"
    ]
}

2.前端JS

(1)横坐标位置,data写[ ]

xAxis: [{
        type: 'category',
      		data: [],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },

(2)纵坐标位置

series: [
		{
        type: 'bar',
        data: [],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }		
	]

(3)ajax处理uri


//调用(/getCityPmList)接口获取数据
    $.ajax({
        type : "get",
        url : "/getCityPmList",
        dataType : "json",
        success : function(result) {
            myChart.setOption({
                xAxis:{data: result.cityNameList},
                series:{data: result.pm25List}
            })
        }
    });

3.分析
重点在这一块,数据才会生效

 myChart.setOption({
                xAxis:{data: result.cityNameList},
                series:{data: result.pm25List}
            })
相关标签: java echarts