2
0
Эх сурвалжийг харах

fix: 修复企业小程序数据统计页面饼图点击后图例变黑问题

- 禁用饼图和环形图的 emphasis 效果,避免小程序 canvas 阴影渲染问题
- 添加 legend.selectedMode: false 防止图例选中状态异常
- 添加 legend.textStyle 和 inactiveColor 确保图例显示正常

Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 3 долоо хоног өмнө
parent
commit
c027589feb

+ 1 - 1
mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": true,
   "description": "",
   "templateInfo": {

+ 26 - 12
mini/src/pages/yongren/statistics/index.tsx

@@ -369,23 +369,30 @@ const Statistics: React.FC<StatisticsProps> = () => {
           legend: {
             orient: 'vertical',
             right: 10,
-            top: 'center'
+            top: 'center',
+            // 禁用图例的选中模式,防止点击饼图块时图例变黑
+            selectedMode: false,
+            // 设置图例文字样式
+            textStyle: {
+              color: '#666'
+            },
+            // 设置未选中状态的颜色(透明度降低,但不完全变黑)
+            inactiveColor: '#ccc'
           },
           series: [{
             name: '人数',
             type: 'pie',
             radius: '60%',
             center: ['35%', '50%'],
+            // 禁用饼图块的选中模式
+            selectedMode: false,
             data: stats.map(item => ({
               name: item.key,
               value: Math.round(item.value || 0)
             })),
+            // 小程序环境中禁用 emphasis,避免阴影渲染问题导致图例区域变黑
             emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
+              disabled: true
             },
             label: {
               show: false
@@ -413,23 +420,30 @@ const Statistics: React.FC<StatisticsProps> = () => {
           legend: {
             orient: 'vertical',
             right: 10,
-            top: 'center'
+            top: 'center',
+            // 禁用图例的选中模式,防止点击饼图块时图例变黑
+            selectedMode: false,
+            // 设置图例文字样式
+            textStyle: {
+              color: '#666'
+            },
+            // 设置未选中状态的颜色(透明度降低,但不完全变黑)
+            inactiveColor: '#ccc'
           },
           series: [{
             name: '人数',
             type: 'pie',
             radius: ['40%', '70%'],
             center: ['35%', '50%'],
+            // 禁用饼图块的选中模式
+            selectedMode: false,
             data: stats.map(item => ({
               name: item.key === '已离职' ? '离职' : item.key,
               value: Math.round(item.value || 0)
             })),
+            // 小程序环境中禁用 emphasis,避免阴影渲染问题导致图例区域变黑
             emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
+              disabled: true
             },
             label: {
               show: false