柱状图数量错误和横纵坐标问题解决方案

本文将解决以下两个问题：

柱状图数量不对: 在Java代码中，通过调用teamManageService.studentCount(className)方法获取每个班级的学生数量，然后将班级名称和学生数量存储到map中。在前端代码中，通过遍历data对象的键值对来分别获取横坐标和纵坐标的数据。问题可能出在teamManageService.studentCount(className)方法的实现上，或者在数据存储到map中时出现了问题。建议在Java代码中打印studentCount的值，检查是否正确获取到了学生数量。
横纵坐标是数字: 在前端代码中，通过xAxis和yAxis的type属性来指定横纵坐标的类型，目前都设置为了'value'，即数字类型。如果横坐标应该是字符串类型，可以将xAxis的type属性设置为'category'，然后将学科名称作为横坐标的数据。同时，将纵坐标的数据转换为数字类型，可以使用parseInt()或parseFloat()函数进行转换。例如，将yAxisData的赋值语句修改为：

const yAxisData = Object.values(data).map((value) => parseInt(value));

这样就可以将纵坐标的数据转换为数字类型。

前端代码

<template>
    <div>
        <div ref='chartRef' style='width: 600px; height: 400px;'></div>
    </div>
</template>

<script setup lang='ts'>
    import { ref, onMounted } from 'vue';
    import axios from 'axios';
    import * as echarts from 'echarts';

    const chartRef = ref(null);

    onMounted(() => {
        fetchData();
    });

    const fetchData = async () => {
        try {
            const response = await axios.get('api/chartDataServlet');
            const resultInfo = response.data;
            console.log(resultInfo);
            if (resultInfo.flag) {
                const data = resultInfo.data;
               renderChart(data);
                console.log(data);
            } else {
                console.log(resultInfo.message);
            }
        } catch (error) {
            console.log(error);
        }
    };


    const renderChart = (data) => {
            const chart = echarts.init(chartRef.value);
            if(chartRef.value) {
                const xAxisData = Object.keys(data).map((key) => key); // 学科名称作为横坐标
                const yAxisData = Object.values(data).map((value) => value); // 学科对应的值作为纵坐标
                const seriesData = Object.entries(data).map(([key, value]) => ({ // 这里根据实际需要调整数据结构
                    name: key,
                    value: value,
                }));
            const option = {
                title: {
                    text: '班级学生人数情况',
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                    },
                ],
            };
            chart.setOption(option);
        }
    };

</script>

Java代码

package com.hongmao.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.hongmao.pojo.ResultInfo;
import com.hongmao.pojo.Team;
import com.hongmao.service.TeamManageService;
import com.hongmao.service.impl.TeamManageServiceimpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author 聂海波
 * @version 2023.1.2
 * @date 2023/8/29 14:21 星期二
 */
@WebServlet("/chartDataServlet")
public class ChartDataServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String, Integer> map = new HashMap();
        TeamManageService teamManageService = new TeamManageServiceimpl();
        ResultInfo resultInfo = new ResultInfo();
        List<Team> list = teamManageService.seachTeamName();
        for (int i = 0; i < list.size(); i++) {
            String className = list.get(i).getClassName();
            int studentCount = teamManageService.studentCount(className);
            map.put(className, studentCount);
            System.out.println("className: " + className + ", studentCount: " + studentCount); // 打印验证数据是否正确
        }

        if (map != null) {
            resultInfo.setFlag(true);
            resultInfo.setData(convertDataToJson(map));
            resultInfo.setMessage("查找成功");
        } else {
            resultInfo.setFlag(false);
            resultInfo.setData(convertDataToJson(map));
            resultInfo.setMessage("查找失败");
        }
        response.setContentType("application/json");
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), resultInfo);
        System.out.println(resultInfo.getData());
    }

    private String convertDataToJson(Map<String, Integer> map) {
        StringBuilder json = new StringBuilder();
        json.append("{");
        for (Map.Entry<String, Integer> entry : map.entrySet()) {
            json.append("\"").append(entry.getKey()).append("\"").append(":").append(entry.getValue()).append(",");

        }
        json.deleteCharAt(json.length() - 1); // 删除最后一个逗号
        json.append("}");
        return json.toString();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

其他建议

在Java代码中，建议使用System.out.println()打印关键变量的值，以便检查数据是否正确获取。
在前端代码中，建议使用Echarts提供的更直观的API来配置图表选项，例如使用option.xAxis.data = xAxisData来设置横坐标数据。
尽量使用更具描述性的变量名称，例如将data变量改名为chartData，以提高代码可读性。

希望这些信息能帮助您解决问题。如果您还有其他问题，请随时提出。