Vue+highcharts front-end and back-end interaction java piece together json format data (pie chart, percentage stacked column chart)

In the previous section, I finished the method of dynamically calling data on the front-end page of vue+highcharts. Now write about the database query format and method, and return the data in json format to the front end through java

Vue+highcharts front-end and back-end interactively display the chart. The front-end dynamic call data (pie chart, column chart)
old rules, the code

pie chart

The structure of the pie chart data is relatively simple, you only need to piece together the name (hidden_name) and y (terms) data examples under the data attribute

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
				}]
		}]

Data required for database query

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

Java part processing
Here, a map is used to transfer values to the front end.

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;

screenshot of return value

column chart

The data required for database query
The column chart needs to return two pieces of data from the front desk, one is the number corresponding to the categories attribute, and the other is the number of categories corresponding to the series
Data example

 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 code 1

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

Query result
insert image description here
sql code 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

Screenshot of query results
insert image description here
The required data has been found, and it will be easier for java to piece together the json format string

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;

Screenshot of the return value
insert image description here
After putting together the format and returning to the front end,
example
you can display the chart