|
@@ -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>
|