177 lines
3.7 KiB
Plaintext
177 lines
3.7 KiB
Plaintext
<template>
|
|
<view class="gender-card">
|
|
<view class="card-header">
|
|
<text class="title">用户性别比例</text>
|
|
</view>
|
|
|
|
<view class="card-content">
|
|
<view class="chart-container">
|
|
<EChartsView :option="chartOption" class="donut-chart" />
|
|
<view class="center-text">
|
|
<text class="total-label">总用户数</text>
|
|
<text class="total-value">{{ totalUsers }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
|
|
|
export default {
|
|
components: {
|
|
EChartsView
|
|
},
|
|
data() {
|
|
return {
|
|
totalUsers: 525,
|
|
chartOption: {} as any
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
this.initChart()
|
|
}, 200)
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
top: '0%',
|
|
left: 'center',
|
|
icon: 'rect',
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#666'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '性别比例',
|
|
type: 'pie',
|
|
radius: ['50%', '75%'],
|
|
center: ['50%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 450, name: '未知', itemStyle: { color: '#999999' } },
|
|
{ value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
|
|
{ value: 25, name: '女', itemStyle: { color: '#f97316' } }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
this.chartOption = this.toPlainObject(option)
|
|
},
|
|
toPlainObject(obj: any): any {
|
|
if (obj == null) return null
|
|
if (typeof obj !== 'object') return obj
|
|
if (Array.isArray(obj)) {
|
|
return obj.map((item) => this.toPlainObject(item))
|
|
}
|
|
const plain: any = {}
|
|
for (const key in obj) {
|
|
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
const value = obj[key]
|
|
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
|
continue
|
|
}
|
|
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
|
let isSimple = true
|
|
for (const k in value) {
|
|
if (typeof value[k] === 'object' && value[k] !== null) {
|
|
isSimple = false
|
|
break
|
|
}
|
|
}
|
|
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
|
} else {
|
|
plain[key] = value
|
|
}
|
|
}
|
|
}
|
|
return plain
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.gender-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
height: 521px;
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 400px;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.donut-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.center-text {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.total-label {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.total-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|