后端传到前端的数据导致柱状图显示错误的解决方案

"后端传到前端是这个代码"{"信科20-2":0,"计算机20-1":4,"物理22-1":0,"英语20-1":3,"农机20-1":2,"金融19-1":2}";\n<template>\n <div>\n <div ref="chartRef" style="width: 600px; height: 400px;"></div>\n </div>\n</template>\n\n<script setup lang="ts">\n import { ref, onMounted } from 'vue';\n import axios from 'axios';\n import * as echarts from 'echarts';\n\n const chartRef = ref(null);\n\n onMounted(() => {\n fetchData();\n });\n\n const fetchData = async () => {\n try {\n const response = await axios.get('api/chartDataServlet');\n const resultInfo = response.data;\n console.log(resultInfo);\n if (resultInfo.flag) {\n const data = resultInfo.data;\n renderChart(data);\n console.log(data);\n } else {\n console.log(resultInfo.message);\n } \n } catch (error) {\n console.log(error);\n } \n };\n\n\n const renderChart = (data) => {\n const chart = echarts.init(chartRef.value);\n if(chartRef.value) {\n const xAxisData = Object.keys(data).map((key) => key); // 学科名称作为横坐标\n const yAxisData = Object.values(data).map((value) => value); // 学科对应的值作为纵坐标\n const option = {\n title: {\n text: '班级学生人数情况',\n },\n xAxis: {\n type: 'category',\n data: xAxisData\n },\n yAxis: {\n type: 'value',\n },\n series: [\n {\n data: yAxisData,\n type: 'bar',\n },\n ],\n };\n chart.setOption(option);\n }\n };\n\n</script>这是前端代码\n为什么柱状图数量不对，还有横纵坐标是数字内容：根据提供的代码，柱状图数量不对的原因可能是因为数据的格式不正确。在数据传递到前端之前，确保数据格式是正确的。从后端传递的数据是一个对象，其中键是学科名称，值是学科对应的数量。将这个对象转换为数组，其中每个元素包含学科名称和对应的数量。修改代码如下：\n\njavascript\nconst renderChart = (data) => {\n const chart = echarts.init(chartRef.value);\n if (chartRef.value) {\n const xAxisData = Object.keys(data).map((key) => key); // 学科名称作为横坐标\n const yAxisData = Object.values(data).map((value) => value); // 学科对应的值作为纵坐标\n const seriesData = Object.entries(data).map(([key, value]) => ({\n name: key,\n value: value,\n }));\n\n const option = {\n title: {\n text: \'班级学生人数情况\',\n },\n xAxis: {\n type: \'category\',\n data: xAxisData,\n },\n yAxis: {\n type: \'value\',\n },\n series: [\n {\n data: seriesData,\n type: \'bar\',\n },\n ],\n };\n chart.setOption(option);\n }\n};\n\n\n使用Object.keys(data).map((key) => key)和Object.values(data).map((value) => value)将键和值分别提取到数组中，以便用作横坐标和纵坐标数据。使用Object.entries(data).map(([key, value]) => ({ name: key, value: value }))将键值对转换为包含name和value属性的对象数组，用作柱状图系列的数据。这样可以确保柱状图的数量和横纵坐标都正确显示。