后端传到前端是这个代码信科20-20计算机20-14物理22-10英语20-13农机20-12金融19-12；template div div ref=chartRef style=width 600px; height 400px;div divtemplatescript setup lang=ts import ref onMounted from vue

根据提供的代码，柱状图数量不对的原因可能是因为数据的格式不正确。在数据传递到前端之前，确保数据格式是正确的。从后端传递的数据是一个对象，其中键是学科名称，值是学科对应的数量。将这个对象转换为数组，其中每个元素包含学科名称和对应的数量。修改代码如下：

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);
    }
};

使用Object.keys(data).map((key) => key)和Object.values(data).map((value) => value)将键和值分别提取到数组中，以便用作横坐标和纵坐标数据。使用Object.entries(data).map(([key, value]) => ({ name: key, value: value }))将键值对转换为包含name和value属性的对象数组，用作柱状图系列的数据。这样可以确保柱状图的数量和横纵坐标都正确显示