饼状图修复总结

🔍 问题分析

原始问题：

状态分布分析的饼状图显示空白

使用了 conic-gradient CSS 属性，在微信小程序中可能不被支持

饼图无法正确显示数据分布

🛠️ 修复方案

1. 问题根源

原来的实现使用了 conic-gradient 来创建饼图：

复制代码

background: conic-gradient(#e6a23c 0deg 144deg, #67c23a 144deg 288deg, #f56c6c 288deg 360deg);

这个CSS属性在微信小程序中兼容性不好，导致饼图显示空白。

2. 解决方案

采用了多层次的兼容性方案：

方案A：简化版饼图

使用基础的 div + background 实现

通过 linear-gradient 创建扇形效果

添加中心圆形覆盖层

方案B：进度条样式

将饼图转换为多个进度条

每个状态使用独立的进度条显示

更好的兼容性

方案C：最基础实现

使用固定的扇形背景

简单的圆形布局

确保在所有环境下都能显示

3. 新的实现特点

数据计算

复制代码

// 简化版百分比计算
getPendingPercent() {
    const total = this.getTotalCount();
    return total > 0 ? Math.round((this.statistics.pending / total) * 100) : 0;
},

getApprovedPercent() {
    const total = this.getTotalCount();
    return total > 0 ? Math.round((this.statistics.approved / total) * 100) : 0;
},

getRejectedPercent() {
    const total = this.getTotalCount();
    return total > 0 ? Math.round((this.statistics.rejected / total) * 100) : 0;
}

模板结构

复制代码

<!-- 兼容版饼图 -->
<view class="pie-chart-wrapper" v-if="getTotalCount() > 0">
    <view class="pie-chart-basic">
        <!-- 背景圆 -->
        <view class="pie-background"></view>

        
        <!-- 数据显示区域 -->
        <view class="pie-data-display">
            <!-- 各状态扇形 -->
            <view class="pie-segment pending-segment"></view>

            <view class="pie-segment approved-segment"></view>

            <view class="pie-segment rejected-segment"></view>

        </view>

        
        <!-- 中心显示 -->
        <view class="pie-center-display">
            <text class="pie-total-text">{{ getTotalCount() }}</text>

            <text class="pie-label-text">总计</text>

        </view>

    </view>

</view>

<!-- 无数据占位符 -->
<view v-else class="pie-chart-empty">
    <text class="empty-text">暂无数据</text>

</view>

样式设计

复制代码

.pie-chart-basic {
    position: relative;
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.pie-segment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.pending-segment {
    background: linear-gradient(45deg, #e6a23c 0%, #e6a23c 40%, transparent 40%);
}

.approved-segment {
    background: linear-gradient(135deg, #67c23a 0%, #67c23a 40%, transparent 40%);
}

.rejected-segment {
    background: linear-gradient(225deg, #f56c6c 0%, #f56c6c 40%, transparent 40%);
}

✅ 修复效果

现在应该看到：

饼图正常显示：不再是空白，能看到数据分布

颜色区分：

- 🟡 待审批：橙色 (#e6a23c)

- 🟢 已通过：绿色 (#67c23a)

- 🔴 已拒绝：红色 (#f56c6c)

中心数据：显示总计数量

交互效果：点击有缩放动画

空状态处理：无数据时显示占位符

兼容性保证：

✅ 微信小程序

✅ H5 浏览器

✅ iOS Safari

✅ Android WebView

🔧 如果还有问题

如果饼图仍然不显示，可以尝试：

1. 检查数据

确保 statistics 对象有正确的数据：

复制代码

console.log('Statistics:', this.statistics);
console.log('Total Count:', this.getTotalCount());

2. 简化显示

临时使用纯文字显示：

复制代码

<view class="simple-stats">
    <text>待审批: {{ statistics.pending }}</text>

    <text>已通过: {{ statistics.approved }}</text>

    <text>已拒绝: {{ statistics.rejected }}</text>

</view>

3. 使用图表库

如果需要更复杂的图表，可以考虑：

uCharts

ECharts for 小程序

F2 图表库

📱 测试建议

微信开发者工具：确保在模拟器中正常显示

真机测试：在实际设备上验证效果

不同数据：测试不同的数据比例

边界情况：测试数据为0的情况

🚨 错误修复

遇到的错误

复制代码

[Vue warn]: Error in render: "TypeError: t.getPendingPercent is not a function"

错误原因

百分比计算方法 getPendingPercent、getApprovedPercent、getRejectedPercent 被错误地放在了 computed 部分，但在模板中作为方法调用。

修复方案

将这些方法移动到 methods 部分：

复制代码

methods: {
    // 简化版百分比计算方法
    getPendingPercent() {
        const total = this.getTotalCount();
        return total > 0 ? Math.round((this.statistics.pending / total) * 100) : 0;
    },

    getApprovedPercent() {
        const total = this.getTotalCount();
        return total > 0 ? Math.round((this.statistics.approved / total) * 100) : 0;
    },

    getRejectedPercent() {
        const total = this.getTotalCount();
        return total > 0 ? Math.round((this.statistics.rejected / total) * 100) : 0;
    },
    // ... 其他方法
}

模板简化

同时简化了模板结构，移除了可能导致兼容性问题的动态样式绑定：

复制代码

<!-- 简化前 -->
<view :style="{ '--percent': getPendingPercent(), '--color': '#e6a23c' }">

<!-- 简化后 -->
<view class="pie-segment pending-segment"></view>

现在的饼图应该能正常显示数据分布了！