解决 ECharts 图表无数据显示问题

news2025/4/26 6:56:07

问题：

在开发项目时，后端明明已经成功返回了数据，但在展示手账发布数量趋势和树洞帖子发布数量趋势的 ECharts 图表中，却只有坐标轴，没有任何数据显示。

以我的VUE项目开发可视化面板为例，下面将详细分析可能出现的情况以及对应的解决办法。

当后端有数据返回，但 ECharts 图表只有坐标轴而没有数据显示时，可能是由以下几个原因导致的，下面针对手账发布数量趋势和树洞帖子发布数量趋势的 ECharts 图表进行详细分析：

1. 数据处理问题

在 getArticlePostTrendData 和 getTreeholePostTrendData 函数中，可能存在数据处理不当的情况，导致 xAxis 和 yAxis 数据没有正确填充到 ECharts 选项中。

解决方案

检查 forEach 循环中对数据的处理是否正确，确保 createDate 能够正确匹配到 dates 数组中的日期。可以在关键位置添加 console.log 语句进行调试，例如：

// 获取手账发布数量趋势数据
const getArticlePostTrendData = async () => {
    try {
        const response = await articleByWeekService();
        const data = response.data;
        console.log('手账数据:', data);

        // 生成最近一周的日期数组
        const now = new Date();
        const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let d = new Date(oneWeekAgo); d <= now; d.setDate(d.getDate() + 1)) {
            dates.push(new Date(d).toISOString().split('T')[0]);
        }

        // 初始化每天的新增手账数为 0
        const counts = new Array(7).fill(0);

        // 统计每天新增的手账数
        data.forEach(item => {
            const createDate = new Date(item.createTime).toISOString().split('T')[0];
            console.log('手账创建日期:', createDate);
            const index = dates.indexOf(createDate);
            if (index !== -1) {
                counts[index]++;
            }
        });

        articlePostTrendData.value.xAxis = dates;
        articlePostTrendData.value.yAxis = counts;
        console.log('手账 xAxis:', articlePostTrendData.value.xAxis);
        console.log('手账 yAxis:', articlePostTrendData.value.yAxis);

        initArticlePostTrendChart();
    } catch (error) {
        console.error('获取手账发布数量趋势数据时出错:', error);
    }
};

// 获取树洞帖子发布数量趋势数据
const getTreeholePostTrendData = async () => {
    try {
        const response = await treeholebyweekService();
        const data = response.data;
        console.log('树洞数据:', data);

        // 生成最近一周的日期数组
        const now = new Date();
        const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let d = new Date(oneWeekAgo); d <= now; d.setDate(d.getDate() + 1)) {
            dates.push(new Date(d).toISOString().split('T')[0]);
        }

        // 初始化每天的新增树洞帖子数为 0
        const counts = new Array(7).fill(0);

        // 统计每天新增的树洞帖子数
        data.forEach(item => {
            const createDate = new Date(item.createTime).toISOString().split('T')[0];
            console.log('树洞创建日期:', createDate);
            const index = dates.indexOf(createDate);
            if (index !== -1) {
                counts[index]++;
            }
        });

        treeholePostTrendData.value.xAxis = dates;
        treeholePostTrendData.value.yAxis = counts;
        console.log('树洞 xAxis:', treeholePostTrendData.value.xAxis);
        console.log('树洞 yAxis:', treeholePostTrendData.value.yAxis);

        initTreeholePostTrendChart();
    } catch (error) {
        console.error('获取树洞帖子发布数量趋势数据时出错:', error);
    }
};

检查一下：

说明数据处理没有问题

2. 异步数据加载问题

由于数据是异步获取的，可能在 ECharts 初始化时数据还未完全加载完成，导致图表没有正确显示数据。

解决方案

确保在数据加载完成后再初始化 ECharts 图表。可以使用 await 关键字确保数据加载完成后再调用初始化函数。

检查一下：

异步数据加载没有问题

3. ECharts 选项问题

在 initArticlePostTrendChart 和 initTreeholePostTrendChart 函数中，可能存在 ECharts 选项设置错误的情况。

解决方案

检查 xAxis 和 yAxis 的数据绑定是否正确，确保 data 属性指向正确的数组。例如：

const initArticlePostTrendChart = () => {
    const chartDom = document.getElementById('article-post-trend');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '手账发布数量趋势'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: articlePostTrendData.value.xAxis // 确保使用 value 属性
        },
        yAxis: {
            type: 'value',
            integer: true
        },
        series: [
            {
                name: '手账数量',
                type: 'line',
                data: articlePostTrendData.value.yAxis // 确保使用 value 属性
            }
        ]
    };
    myChart.setOption(option);
};

const initTreeholePostTrendChart = () => {
    const chartDom = document.getElementById('treehole-post-trend');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '树洞帖子发布数量趋势'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: treeholePostTrendData.value.xAxis // 确保使用 value 属性
        },
        yAxis: {
            type: 'value',
            integer: true
        },
        series: [
            {
                name: '树洞帖子数量',
                type: 'line',
                data: treeholePostTrendData.value.yAxis // 确保使用 value 属性
            }
        ]
    };
    myChart.setOption(option);
};