饼状图颜色修改

src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue

@@ -51,7 +51,7 @@ export default {
   },
   mounted() {
     console.log('🚀 ~ mounted ~ this.state:', this.state)
-    console.log('state-->', this.pieValues)
+    console.log('statexxxxxxxxxxxxxxx-->', this.pieValues)
     setTimeout(() => {
       this.query = this.state
       this.initPieChart()
@@ -73,27 +73,55 @@ export default {
       // console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
       if (!chartDom) return
       const myChart = echarts.init(chartDom)
-
+      // 提取颜色数组为独立变量
+      const pieColors = ['#69A6C9', '#7DDBBA', '#ffc300']
       const option = {
-        tooltip: {
-          trigger: 'item',
-        },
-        series: [
-          {
-            name: '装备年限',
-            type: 'pie',
-            radius: '39%',
-            avoidLabelOverlap: false,
-            label: {
-              show: true,
-              formatter: '{b}\n{d}%',
-              color: '#A3D6F8',
-            },
-            labelLine: {
-              show: true,
-              length: 8, // 第一段线
-              length2: 5, // 第二段线
-            },
+          color: pieColors, // 保持原颜色
+          tooltip: {
+            trigger: 'item',
+          },
+          // 隐藏图例（图中无图例）
+          // legend: {
+          //   show: false
+          // },
+          series: [
+            {
+              name: '装备年限',
+              type: 'pie',
+              radius: '39%',
+              avoidLabelOverlap: false,
+              // 调整标签：拆分成“百分比（大字体+彩色）”和“名称（小字体+白色）”
+              label: {
+                show: true,
+                // 自定义标签格式：百分比单独放大+彩色，名称换行后白色
+                formatter: function(params) {
+                  // 自定义标签格式：百分比 + 换行 + 名称
+                  return `{percent|${params.percent.toFixed(0)}%}\n{name|${params.name}}`;
+                },
+                // 富文本样式：控制百分比和名称的字体/颜色
+                rich: {
+                  percent: {
+                    fontSize: 16, // 百分比字体放大
+                    fontWeight: 'bold',
+                    color: 'inherit'
+                  },
+                  name: {
+                    fontSize: 12, // 名称字体缩小
+                    color: '#fff', // 名称统一白色
+                    marginTop: 2
+                  }
+                },
+                // 标签位置：调整到饼图外部（和示例一致）
+                position: 'outside'
+              },
+              labelLine: {
+                show: true,
+                length: 8,
+                length2: 5,
+                lineStyle: {
+                  color: '#fff' // 标签线改为白色（适配深色背景）
+                }
+              },
 
             data: this.pieData,
           },