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}
})
上一篇: Linux 下解压 rar 文件的方法
下一篇: php aes加解密