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;

返回值截图

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

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