AJAX获取JSON数据后ECharts柱状图无显示且无报错求助

我之前也碰到过一模一样的情况——控制台没报错但图表完全不显示，大概率是几个容易忽略的小问题：容器没设置尺寸、数据格式没转对，或者AJAX的逻辑没处理到位。结合你的需求，我给你整理了完整的修正方案：

先明确核心问题点 #

你的JSON数据里qty是字符串类型，ECharts的Y轴需要数值；另外很多人会忘记给ECharts容器设置明确的宽高，这会导致ECharts无法计算渲染区域，直接不显示。

完整可运行代码 #

HTML部分（必须给容器设宽高）

<!-- 一定要给容器设置具体的宽高，ECharts依赖这个渲染 -->
<div id="statusChart" style="width: 600px; height: 400px;"></div>

JavaScript部分（修复AJAX数据处理和图表初始化逻辑）

$(document).ready(function() {
    // 1. 先初始化ECharts实例，提前占好位置
    const chartInstance = echarts.init(document.getElementById('statusChart'));

    // 2. 设置基础空配置，避免页面一开始全空白
    const initialOption = {
        title: {
            text: '状态数量统计'
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: [] // 先留空，等AJAX数据回来再填充
        },
        yAxis: {
            type: 'value',
            name: '数量'
        },
        series: [{
            name: '状态数量',
            type: 'bar',
            data: [] // 先留空
        }]
    };

    // 加载基础配置
    chartInstance.setOption(initialOption);

    // 3. 发起AJAX请求
    $.ajax({
        url: 'php_file.php', // 替换成你的实际PHP脚本路径
        type: 'GET',
        dataType: 'json', // 让jQuery自动解析JSON，省去手动JSON.parse的麻烦
        success: function(responseData) {
            // 4. 处理数据：提取X轴和Y轴所需格式，注意把qty转成数字
            const xAxisData = responseData.map(item => item.status);
            const seriesData = responseData.map(item => parseInt(item.qty, 10));

            // 5. 更新图表数据
            chartInstance.setOption({
                xAxis: {
                    data: xAxisData
                },
                series: [{
                    data: seriesData
                }]
            });
        },
        // 关键！一定要加错误处理，不然AJAX失败你完全不知道
        error: function(xhr, status, errorMsg) {
            console.error('AJAX请求出错:', errorMsg);
            console.log('请求状态:', status);
            console.log('服务器返回内容:', xhr.responseText);
        }
    });
});

额外检查项 #

• 确保引入依赖：页面里要先加载jQuery和ECharts的脚本，比如：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

• PHP脚本返回正确的JSON：你的PHP要设置正确的响应头，并且输出纯净的JSON，不能有多余的空格或HTML：

<?php
header('Content-Type: application/json');
// 假设你的数据是从数据库或其他地方获取的
$data = [
    ["status"=>"Cleared","qty"=>"2"],
    ["status"=>"Issued","qty"=>"3"],
    ["status"=>"Rejected","qty"=>"1"],
    ["status"=>"Requested","qty"=>"2"]
];
echo json_encode($data);
?>

按照这个方案改完，应该就能正常显示柱状图了。如果还是有问题，打开控制台看error回调里的日志，就能快速定位是AJAX请求的问题还是数据处理的问题。

内容的提问来源于stack exchange，提问作者Drewy