vue+highcharts前后端交互 之 java拼凑json格式数据（饼图，百分比堆叠柱形图）

上一节写完了vue+highcharts的前端页面动态调用数据的方式。现在写一下数据库查询格式和方法，以及通过java进行拼凑json格式数据返回到前端

vue+highcharts前后端交互展示图表 之 前端动态调用数据（饼图，柱形图）
老规矩，上代码

饼图

饼图数据的结构比较简单，只需要拼凑data属性下的name（hidden_name）和y（terms）
数据示例

series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: '管道腐蚀',
y: 60,
sliced: true,
selected: true
}, {
name: '管道腐蚀1',
y: 20
},{
name: '管道腐蚀2',
y: 10
}, {
name: '管道腐蚀31',
y: 10
}]
}]

数据库查询需要的数据

SELECT
hidden_name,
(
SELECT
COUNT (*)
FROM
TABLE_X
WHERE
hidden_id = A .hidden_id
) terms
FROM
TABLE_X A
GROUP BY
hidden_name

java部分处理
这里使用一个map实现传值到前端。

List<HiddenEntity> list = hiddenEntityMapper.getTestBingTu();
List<Map<String,Object>> data=new ArrayList<Map<String,Object>>();
for(HiddenEntity li:list){
Map<String,Object> map = new HashMap<String,Object>();
map.put("name",li.getHidden_name());
map.put("y",li.getTerms());
data.add(map);
}
return data;

返回值截图

柱形图

数据库查询需要的数据
柱形图需要前台传回两条数据，一条是categories属性对应的数字，一条是series对应的种类个数
数据示例

xAxis: {
categories: ['1', '2', '3']
},
series: [{
name: '管道腐蚀',
data: [1, 0, 1]
}, {
name: '管道腐蚀1',
data: [0, 1, 0]
}, {
name: '管道腐蚀2',
data: [0, 1, 0]
}, {
name: '管道腐蚀31',
data: [1, 0, 0]
}]

sql代码1

查询categories属性对应的数字
select DISTINCT hidden_id from TABLE_X

查询结果

sql代码2

SELECT
hidden_type,--名字
(
SELECT
COUNT (*)
FROM
TABLE_X
WHERE
hidden_id = '1'--hidden_id指的是categories属性对应的数字
AND hidden_type = x.hidden_type --通过hidden_type查出每一个数字所对应的类型个数
) dw1,
(
SELECT
COUNT (*)
FROM
TABLE_X
WHERE
hidden_danger_dep = '2'
AND hidden_type = x.hidden_type
) dw2,
(
SELECT
COUNT (*)
FROM
TABLE_X
WHERE
hidden_danger_dep = '3'
AND hidden_type = x.hidden_type
) dw3
FROM
TABLE_1 x
GROUP BY
hidden_name

查询结果截图

需要的数据查到了，接下来java拼凑json格式字符串就比较容易

List<HiddenEntity> list = hiddenEntityMapper.getTestZhuXingTu() ();
List<HiddenEntity> unit = hiddenEntityMapper.getHengZuoBiao();
List<String> categories = new ArrayList<String>();
Map<String,Object> map1 = new HashMap<String,Object>();
List<Map<String,Object>> series=new ArrayList<Map<String,Object>>();
for(HiddenEntity st:list){
Map<String,Object> map = new HashMap<String,Object>();
List<Integer> data=new ArrayList<Integer>();
map.put("name",st.getHiddenType());
data.add(st.getDw1());
data.add(st.getDw2());
data.add(st.getDw3());
map.put("data",data);
series.add(map);
}
for(HiddenEntity li:unit){
categories.add(li.getHiddenId());
}
map1.put("categories",categories);
map1.put("series",series);

return map1;

返回值截图

拼凑好格式返回前端后，就可以展示图表了

如有写的不到位的地方欢迎各位大佬指正，我会虚心采纳

• 点赞
• 收藏
• 分享
• 文章举报