update

src/components/item-d/item-d.vue

@@ -6,7 +6,7 @@
             </template>
         </public-title>
         <div class="inner" ref="healthChart"></div>
-        <div class="count" v-show="props.tips">
+        <div class="count">
             <div class="t">总人数</div>
             <div class="v">{{ userCount }}</div>
         </div>
@@ -48,6 +48,9 @@
         () => props.data,
         () => {
             init();
+        },
+        {
+            deep: true,
         }
     );
 
@@ -57,7 +60,7 @@
 
     function initChart(chartData, total, color) {
         let myChart = echarts.init(healthChart.value);
-        let options = circleRing(chartData, total, color, '{d}%');
+        let options = circleRing(chartData, total, color);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();

src/components/item-d/pieCharts.ts

@@ -1,3 +1,6 @@
+// 步数
+import {visibleChartLabel} from "/@/utils/utils.ts";
+
 export function screenPie(chartData, total, color, formatter) {
     return {
         color: color,
@@ -11,7 +14,7 @@ export function screenPie(chartData, total, color, formatter) {
             borderColor: '#1b7ef2',
         },
         legend: {
-            left: '74%',
+            left: '72%',
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
@@ -24,22 +27,19 @@ export function screenPie(chartData, total, color, formatter) {
         series: [
             {
                 type: 'pie',
-                // radius: ['50%', '86%'],
-                // center: ['42%', '55%'],
                 radius: ['50%', '76%'],
-                center: ['42%', '49%'],
+                center: ['40%', '49%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: true,
                     position: 'outside',
-                    formatter: formatter,
                     color: '#ffffff',
                     fontSize: 14,
                 },
                 labelLine: {
                     show: true,
                     length: 6,
-                    length2: 20,
+                    length2: 10,
                     minTurnAngle: 120,
                 },
                 data: chartData,
@@ -49,7 +49,8 @@ export function screenPie(chartData, total, color, formatter) {
 }
 
 //左侧圆
-export function circleRing(chartData, total, color, formatter) {
+export function circleRing(chartData, total, color) {
+    const data = visibleChartLabel(chartData)
     return {
         color: color,
         tooltip: {
@@ -81,14 +82,14 @@ export function circleRing(chartData, total, color, formatter) {
                 label: {
                     show: true,
                     position: 'inner',
-                    formatter: formatter,
+                    formatter: '{d}%',
                     color: '#ffffff',
                     fontSize: 14,
                 },
                 labelLine: {
                     show: false,
                 },
-                data: chartData,
+                data: data,
             },
         ],
     };