饼状图修复总结

🔍 问题分析

原始问题:

  • 状态分布分析的饼状图显示空白
  • 使用了 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%);
}

✅ 修复效果

现在应该看到:

  1. 饼图正常显示:不再是空白,能看到数据分布
  1. 颜色区分
    • 🟡 待审批:橙色 (#e6a23c)
    • 🟢 已通过:绿色 (#67c23a)
    • 🔴 已拒绝:红色 (#f56c6c)
  1. 中心数据:显示总计数量
  1. 交互效果:点击有缩放动画
  1. 空状态处理:无数据时显示占位符

兼容性保证:

  • ✅ 微信小程序
  • ✅ 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 图表库

📱 测试建议

  1. 微信开发者工具:确保在模拟器中正常显示
  1. 真机测试:在实际设备上验证效果
  1. 不同数据:测试不同的数据比例
  1. 边界情况:测试数据为0的情况

🚨 错误修复

遇到的错误

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

错误原因

百分比计算方法 getPendingPercentgetApprovedPercentgetRejectedPercent 被错误地放在了 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>

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

相关推荐
狂团商城小师妹1 天前
JAVA无人共享台球杆台球柜系统球杆柜租赁系统源码支持微信小程序
java·开发语言·微信小程序·小程序
麦麦鸡腿堡1 天前
Java的抽象类实践-模板设计模式
java·开发语言·设计模式
沙虫一号1 天前
聊聊Java里的那把锁:ReentrantLock到底有多强大?
java
无心水1 天前
Java主流锁全解析:从分类到实践
java·面试·架构
空空kkk1 天前
Java——接口
java·开发语言·python
linyb极客之路1 天前
Spring Boot Map 依赖注入血坑实录:为什么我的 Map 总是少了一半数据?
spring boot
MaxHua1 天前
JAVA开发处理金额的数据类型你知道多少?
java·后端
oak隔壁找我1 天前
公司级 Maven Parent POM 设计指南
java·后端
zl9798991 天前
SpringBoot-Web开发之内容协商
java·spring boot
李昊哲小课1 天前
spring 中 HttpStatus 与 ResponseEntity
spring boot·后端·spring·http·spring cloud·restful