Просмотр исходного кода

fix: 完善故障1图表视觉改进 - 修复横轴小数刻度显示问题

- 横向柱状图(户籍省份分布、薪资分布)添加xAxis.format配置,确保横轴只显示整数刻度
- 增加所有图表高度(280-300px → 320px)使图表更明显
- 为柱状图和饼图添加数据标签显示
- 增加饼/环形图的激活半径和标签宽度
- 增加横向柱状图的柱宽(30px → 45-50px)
- 为饼图添加图例显示

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 1 месяц назад
Родитель
Сommit
68003466ce
1 измененных файлов с 52 добавлено и 7 удалено
  1. 52 7
      mini/src/pages/yongren/statistics/index.tsx

+ 52 - 7
mini/src/pages/yongren/statistics/index.tsx

@@ -358,10 +358,13 @@ const Statistics: React.FC<StatisticsProps> = () => {
                   <ColumnChart
                   <ColumnChart
                     canvasId="disability-type-chart"
                     canvasId="disability-type-chart"
                     width={650}
                     width={650}
-                    height={300}
+                    height={320}
                     categories={chartData.categories}
                     categories={chartData.categories}
                     series={chartData.series}
                     series={chartData.series}
-                    config={{ color: ['#3b82f6'] }}
+                    config={{
+                      color: ['#3b82f6'],
+                      dataLabel: true,
+                    }}
                   />
                   />
                 </View>
                 </View>
               )
               )
@@ -383,7 +386,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
                   <ColumnChart
                   <ColumnChart
                     canvasId="gender-chart"
                     canvasId="gender-chart"
                     width={650}
                     width={650}
-                    height={300}
+                    height={320}
                     categories={genderStats.map(s => s.key)}
                     categories={genderStats.map(s => s.key)}
                     series={[{
                     series={[{
                       name: '人数',
                       name: '人数',
@@ -391,6 +394,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     }]}
                     }]}
                     config={{
                     config={{
                       color: ['#3b82f6', '#ec4899'],
                       color: ['#3b82f6', '#ec4899'],
+                      dataLabel: true,
                     }}
                     }}
                   />
                   />
                 </View>
                 </View>
@@ -412,11 +416,23 @@ const Statistics: React.FC<StatisticsProps> = () => {
                   <PieChart
                   <PieChart
                     canvasId="age-chart"
                     canvasId="age-chart"
                     width={650}
                     width={650}
-                    height={300}
+                    height={320}
                     series={convertToPieData(ageStats)}
                     series={convertToPieData(ageStats)}
                     config={{
                     config={{
                       color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
                       color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
                       dataLabel: true,
                       dataLabel: true,
+                      extra: {
+                        pie: {
+                          activeRadius: 15,
+                          labelWidth: 18,
+                          borderWidth: 2,
+                        }
+                      },
+                      legend: {
+                        show: true,
+                        position: "right",
+                        lineHeight: 22
+                      }
                     }}
                     }}
                   />
                   />
                 </View>
                 </View>
@@ -453,12 +469,23 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     <BarChart
                     <BarChart
                       canvasId="household-chart"
                       canvasId="household-chart"
                       width={650}
                       width={650}
-                      height={280}
+                      height={320}
                       categories={chartData.categories}
                       categories={chartData.categories}
                       series={chartData.series}
                       series={chartData.series}
                       config={{
                       config={{
                         color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#ec4899'],
                         color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#ec4899'],
                         dataLabel: true,
                         dataLabel: true,
+                        xAxis: {
+                          disableGrid: true,
+                          // 确保横轴刻度为整数
+                          min: 0,
+                          format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                        },
+                        extra: {
+                          bar: {
+                            width: 45,
+                          }
+                        }
                       }}
                       }}
                     />
                     />
                   </View>
                   </View>
@@ -482,7 +509,8 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     <RingChart
                     <RingChart
                       canvasId="job-status-chart"
                       canvasId="job-status-chart"
                       width={650}
                       width={650}
-                      height={300}
+                      height={320}
+                      ringWidth={0.75}
                       series={convertToPieData(stats)}
                       series={convertToPieData(stats)}
                       config={{
                       config={{
                         color: ['#3b82f6', '#f59e0b', '#ef4444', '#10b981'],
                         color: ['#3b82f6', '#f59e0b', '#ef4444', '#10b981'],
@@ -492,6 +520,12 @@ const Statistics: React.FC<StatisticsProps> = () => {
                           position: "right",
                           position: "right",
                           lineHeight: 25
                           lineHeight: 25
                         },
                         },
+                        extra: {
+                          ring: {
+                            activeRadius: 15,
+                            labelWidth: 18,
+                          }
+                        }
                       }}
                       }}
                     />
                     />
                   </View>
                   </View>
@@ -516,12 +550,23 @@ const Statistics: React.FC<StatisticsProps> = () => {
                     <BarChart
                     <BarChart
                       canvasId="salary-chart"
                       canvasId="salary-chart"
                       width={650}
                       width={650}
-                      height={280}
+                      height={320}
                       categories={chartData.categories}
                       categories={chartData.categories}
                       series={chartData.series}
                       series={chartData.series}
                       config={{
                       config={{
                         color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
                         color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
                         dataLabel: true,
                         dataLabel: true,
+                        xAxis: {
+                          disableGrid: true,
+                          // 确保横轴刻度为整数
+                          min: 0,
+                          format: (val: number) => Number.isInteger(val) ? val.toString() : '',
+                        },
+                        extra: {
+                          bar: {
+                            width: 50,
+                          }
+                        }
                       }}
                       }}
                     />
                     />
                   </View>
                   </View>