java 后台返回echarts地图data数据源格式的封装

最新推荐文章于 2024-01-04 15:46:13 发布

雨后d夏天

最新推荐文章于 2024-01-04 15:46:13 发布

阅读量1.5k

点赞数 1

文章标签： java

本文链接：https://blog.youkuaiyun.com/sj_liu/article/details/106668146

版权

java 后台返回echarts地图data数据源格式的封装

项目框架以ruoyi为基础
注意地图数据中不能出现市，省等词：比如：北京市------->北京河南省----->河南
数据源格式data：
[{name: ‘北京市’, value: 23},
{name: ‘天津市’, value: 22},
{name: ‘上海市’, value: 15},
{name: ‘重庆市’, value: 1},
{name: ‘河北省’, value: 2}]
出错！需改为以下格式：
[{name: ‘北京’, value: 23},
{name: ‘天津’, value: 22},
{name: ‘上海’, value: 15},
{name: ‘重庆’, value: 1},
{name: ‘河北’, value: 2}]
以下为代码：
public String smartKanBan(ModelMap mmap) {
//查询每省的盘厂和供应商个数
List mapList = companyInfoService.selectCompanyTypeCountForMap(“1”);//盘厂
List mapList2 = companyInfoService.selectCompanyTypeCountForMap(“2”);//供应商
//1.将数据封装进map对象中
Map<String,Integer> map = new HashMap<>();
Map<String,Integer> map2 = new HashMap<>();
for (int i = 0 ; i< mapList.size();i++) {
CompanyInfo companyInfo = mapList.get(i);
String proviceName = companyInfo.getProviceName();
int num = companyInfo.getCountNum();
map.put(proviceName, num);
}
for (int i = 0 ; i< mapList2.size();i++) {
CompanyInfo companyInfo = mapList2.get(i);
String proviceName = companyInfo.getProviceName();
int num = companyInfo.getCountNum();
map2.put(proviceName, num);
}
//2.封装成jsonArray对象
JSONArray jArray = new JSONArray();
JSONArray jArray2 = new JSONArray();
for (int i = 0 ; i< mapList.size();i++) {
JSONObject json = new JSONObject();
CompanyInfo companyInfo = mapList.get(i);
String proviceName = companyInfo.getProviceName();
String replace = proviceName;
if(proviceName.contains(“省”)){
replace = proviceName.replace(“省”, “”);
}else if(proviceName.contains(“市”)){
replace = proviceName.replace(“市”, “”);
}else if(proviceName.contains(“自治区”)){
replace = proviceName.replace(“自治区”, “”);
}
json.put(“name”, replace);
json.put(“value”, map.get(proviceName));
jArray.add(json);
}
for (int i = 0 ; i< mapList2.size();i++) {
JSONObject json = new JSONObject();
CompanyInfo companyInfo = mapList2.get(i);
String proviceName = companyInfo.getProviceName();
String replace = proviceName;
if(proviceName.contains(“省”)){
replace = proviceName.replace(“省”, “”);
}else if(proviceName.contains(“市”)){
replace = proviceName.replace(“市”, “”);
}else if(proviceName.contains(“自治区”)){
replace = proviceName.replace(“自治区”, “”);
}
json.put(“name”, replace);
json.put(“value”, map2.get(proviceName));
jArray2.add(json);
}
//3.封装成JSON对象
JSONObject data_json = new JSONObject();
JSONObject data_json2 = new JSONObject();
data_json.put(“data”, jArray);
data_json2.put(“data”, jArray2);
mmap.put(“dataMap1”,data_json.toString());
mmap.put(“dataMap2”,data_json2.toString());
return prefix + “/znkb”;
}
前端效果如图所示：
在这里插入图片描述

前端代码:
function getCenterMap() {
//获取java后台传递的参数
var data1 =

. p a r s e J S O N ([[

{dataMap1}]]).data;
var data2 =

. p a r s e J S O N ([[

{dataMap2}]]).data;
//初始化地图
let Map = document.getElementById(‘centerId’)；
var instancel = echarts.init(Map)；
option = {
legend: {
show: false,
backgroundColor: ‘#0099ff’
},
tooltip: {
trigger: ‘item’,
formatter: function(params) {
//debugger;
var res = params.name+’
’;
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +’ : ‘+myseries[i].data[j].value+’’;
}
}
}
return res;
}
},
visualMap: {
left: ‘right’,
min: 900,
max: 200,
top: ‘bottom’,
text: [‘高’, ‘低’], // 文本，默认为数值文本
calculable: true,
show: false
},
series: [
{
type: ‘map’,
name: ‘成套企业’,
mapType: ‘china’,
roam: false,
label: {
show: false,
normal: {
show: false
},
emphasis: {
show: true,
}
},
data: data1
},
{
type: ‘map’,
name: ‘供应商’,
mapType: ‘china’,
roam: false,
label: {
show: false,
normal: {
show: false
},
emphasis: {
show: true,
}
},
data: data2
}
],
};
instancel.setOption(option);
}