样式调整

src/views/Screen/index.vue

@@ -341,12 +341,36 @@
 				  cursor: "pointer",
 				  showInLegend: true,
 				  dataLabels: {
-					textOutline: "none", // 禁用文本轮廓
 					enabled: true,
 					useHTML: true,
-					format:
-					  '<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致
-					// format: "<b>{point.name}</b>: {point.percentage:.1f} %",
+					formatter:function(){
+						// 获取当前屏幕分辨率的宽度和高度
+						var screenWidth = window.screen.width;
+						let name = this.point.name;
+						let fontSize = '0.16rem'
+						// 根据分辨率大小进行条件判断
+						if (screenWidth > 1600) {
+						// 如果屏幕宽度小于600像素，执行这里的代码
+						} else if (screenWidth > 1440) {
+							fontSize = '0.15rem'
+							// fontSize = '0.12rem'
+						}else if (screenWidth > 1280) {
+							// fontSize = '0.12rem'
+							name = this.point.name.length>5?this.point.name.substring(0, 5) : this.point.name;
+							// fontSize = '0.12rem'
+						} else if (screenWidth > 1176) {
+							fontSize = '0.12rem'
+							name = this.point.name.length>4?this.point.name.substring(0, 4) : this.point.name;
+						} else if (screenWidth >= 800) { // 小于1176, 环形图表显示不全了。
+							fontSize = '0.12rem'
+							name = this.point.name.length>2?this.point.name.substring(0, 2) : this.point.name;
+							return `<span style="color:${this.point.color};display: inline-block;transform: scale(0.8);">${name}: ${this.point.percentage.toFixed(1)}%</span>`
+						} 
+
+						return `<span style="color:${this.point.color};font-size:${fontSize};">${name}: ${this.point.percentage.toFixed(1)}%</span>`
+					},
+					// format:
+					//   '<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致
 					style: {
 					  fontSize: "0.17rem", // 设置系列文本的字体大小
 					},
@@ -573,6 +597,7 @@
 					color: "#FFFFFF",
 					// align: "right", // 内部对其专用，设置外部对齐时，不可设置该属性！！！
 					format: "<div style='font-size: 0.18rem;color:{point.color}; color:#fff;'>{point.y:.2f}万</div>", // :.1f 为保留 1 位小数
+				
 				  },
 				},
 			  ],