diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue index 771341da..24c67e32 100644 --- a/src/views/iot/home/index.vue +++ b/src/views/iot/home/index.vue @@ -8,7 +8,7 @@
品类数量 - +
{{ statsData.categoryTotal }} @@ -24,7 +24,7 @@
产品数量 - +
{{ statsData.productTotal }} @@ -40,7 +40,7 @@
设备数量 - +
{{ statsData.deviceTotal }} @@ -56,7 +56,7 @@
物模型消息 - +
{{ statsData.reportTotal }} @@ -236,12 +236,19 @@ const initCharts = () => { /** 初始化仪表盘图表 */ const initGaugeChart = (el: any, value: number, color: string) => { + // 计算百分比,保留1位小数 + const percentage = statsData.value.deviceTotal > 0 + ? Number(((value / statsData.value.deviceTotal) * 100).toFixed(1)) + : 0 + echarts.init(el).setOption({ series: [ { type: 'gauge', startAngle: 360, endAngle: 0, + min: 0, + max: 100, // 将最大值设为100 progress: { show: true, width: 12, @@ -263,16 +270,29 @@ const initGaugeChart = (el: any, value: number, color: string) => { title: { show: false }, detail: { valueAnimation: true, - fontSize: 24, + fontSize: 20, fontWeight: 'bold', fontFamily: 'Inter, sans-serif', color: color, offsetCenter: [0, '0'], formatter: (value: number) => { - return value + '个' + return `${value}%\n(${statsData.value.deviceTotal > 0 ? Math.round((value / 100) * statsData.value.deviceTotal) : 0}个)` + }, + rich: { + value: { + fontSize: 20, + fontWeight: 'bold', + color: color, + padding: [0, 0, 10, 0] + }, + unit: { + fontSize: 14, + color: '#6B7280', + padding: [0, 0, 0, 0] + } } }, - data: [{ value: value }] + data: [{ value: percentage }] } ] })