update

1.修改大屏问题及添加新需求

src/views/indexSun/threeLeftNewItem/item-d.vue

@@ -32,6 +32,10 @@
         userCount: {
             type: Number,
         },
+        chooseIndex: {
+            type: Number,
+            default: () => 0,
+        },
         themeType: {
             type: String,
             default: () => '',
@@ -59,7 +63,7 @@
     function initChart(chartData, total, color) {
         nextTick(() => {
             let myChart = echarts.init(healthChart.value);
-            let options = circleRing(chartData, total, color);
+            let options = circleRing(chartData, total, color, props.chooseIndex);
             myChart.setOption(options);
             window.addEventListener('resize', () => {
                 myChart.resize();

src/views/indexSun/threeLeftNewItem/pieCharts.ts

@@ -27,10 +27,24 @@ export function screenPie(chartData) {
                     show: true,
                     position: 'outside',
                     formatter: function (params: any) {
-                        return `${params.name}\n占比:${params.percent}%\n人次:${params.value}次`;
+                        return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
+                    },
+                    rich: {
+                        name: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
+                        percent: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
+                        value: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
                     },
                     color: '#ffffff',
-                    fontSize: 14,
+                    fontSize: 10,
                 },
                 labelLine: {
                     show: true,
@@ -45,7 +59,7 @@ export function screenPie(chartData) {
 }
 
 //左侧圆
-export function circleRing(chartData, total, color) {
+export function circleRing(chartData, total, color, index = 0) {
     const data = visibleChartLabel(chartData);
     return {
         color: color,
@@ -79,15 +93,33 @@ export function circleRing(chartData, total, color) {
                     position: 'outside',
                     // formatter: '{a}{d}%\n{c}人次',
                     formatter: function (params: any) {
-                        return `${params.name}:${params.percent}%\n${params.value}次`;
+                        if (index === 3) {
+                            return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
+                        } else {
+                            return `{name|${params.name}:${params.percent}%}\n{value|${params.value}次}`;
+                        }
+                    },
+                    rich: {
+                        name: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
+                        percent: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
+                        value: {
+                            fontSize: 10,
+                            lineHeight: 15,
+                        },
                     },
                     color: '#ffffff',
-                    fontSize: 14,
+                    fontSize: 10,
                 },
                 labelLine: {
                     show: true,
                     length: 2,
-                    length2: 30,
+                    length2: 25,
                     minTurnAngle: 120,
                 },
                 data: data,

src/views/indexSun/threeLeftNewItem/stepItem.vue

@@ -72,6 +72,7 @@
     }
 
     .pie-container.self {
+        width: 100%;
         position: relative;
         padding-bottom: 0 !important;
     }

src/views/indexSun/threeLeftNewItem/threeLeftNewItem.vue

@@ -7,6 +7,7 @@
         :tips="dataList[props.chooseType].tips"
         :color="dataList[props.chooseType].color"
         :user-count="dataList[props.chooseType].userCount"
+        :chooseIndex="props.chooseType"
     />
 </template>
 r