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

问题：

在开发项目时，后端明明已经成功返回了数据，但在展示手账发布数量趋势和树洞帖子发布数量趋势的 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]);}// 初始化每天的新增手账数为 0const 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]);}// 初始化每天的新增树洞帖子数为 0const 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);
};

检查一下：

发现确实是少了value属性

通过以上步骤，你可以逐步排查问题并解决 ECharts 图表没有数据显示的问题。

成功解决：

总结

当 ECharts 图表只有坐标轴但没有数据显示时，要从数据传递、数据格式、图表初始化时机和元素获取等方面进行检查。通过仔细排查，通常可以找到问题并解决。