Vue+highcharts interacción front-end y back-end java junta datos en formato json (gráfico circular, gráfico de columnas apiladas de porcentaje)

En la sección anterior, terminé el método de llamada dinámica de datos en la página de inicio de vue+highcharts. Ahora escriba sobre el formato y el método de consulta de la base de datos, y devuelva los datos en formato json al front-end a través de Java

Vue+highcharts front-end y back-end muestran el gráfico de forma interactiva. Los datos de llamadas dinámicas de front-end (gráfico circular, gráfico de columnas)
reglas antiguas, el código

Gráfico circular

La estructura de los datos del gráfico circular es relativamente simple, solo necesita juntar los ejemplos de datos de nombre (nombre_oculto) e y (términos) bajo el atributo de datos

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

Datos necesarios para la consulta de la base de datos

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

Procesamiento de piezas Java
Aquí, se utiliza un mapa para transferir valores al 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;

captura de pantalla del valor de retorno

gráfico de columnas

Los datos necesarios para la consulta de la base de datos
El gráfico de columnas debe devolver dos datos de la recepción, uno es el número correspondiente al atributo de categorías y el otro es el número de categorías correspondientes a la serie Ejemplo de
datos

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

código sql 1

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

consulta resultado

sql código 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

Captura de pantalla de los resultados de la consulta

Se han encontrado los datos necesarios y será más fácil para Java reconstruir la cadena de formato 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;

Captura de pantalla del valor devuelto

Después de armar el formato y volver a la interfaz,

puede mostrar el gráfico