Bladeren bron

style(profileRadar): 优化雷达图样式与配色

1. 调整坐标轴、分割线颜色为浅白色半透明
2. 开启雷达图分割区域显示并设置为透明
3. 修改折线、节点样式,调整符号大小
4. 注释调原有渐变配色配置
huoyi 3 weken geleden
bovenliggende
commit
813e985f5c

+ 11 - 7
src/views/portraitManagement/components/ProfileRadar.vue

@@ -103,17 +103,18 @@ const updateRadarChart = () => {
103 103
       splitNumber: 4,
104 104
       axisLine: {
105 105
         lineStyle: {
106
-          color: 'rgba(15, 70, 250, 0.3)'
106
+          color: 'rgba(255, 255, 255, 0.1)'
107 107
         }
108 108
       },
109 109
       splitArea: {
110
+        show: true,
110 111
         areaStyle: {
111
-          color: ['rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)']
112
+          color: ['transparent', 'transparent', 'transparent', 'transparent', 'transparent']
112 113
         }
113 114
       },
114 115
       splitLine: {
115 116
         lineStyle: {
116
-          color: 'rgba(15, 70, 250, 0.2)'
117
+          color: 'rgba(255, 255, 255, 0.1)'
117 118
         }
118 119
       },
119 120
       name: {
@@ -132,13 +133,16 @@ const updateRadarChart = () => {
132 133
           {
133 134
             value: pointValues,
134 135
             name: '综合得分',
135
-            areaStyle: {
136
-              color: 'rgba(189, 3, 251, 0)'
137
-            },
136
+            // areaStyle: {
137
+            //   color: 'rgba(189, 3, 251, 0)'
138
+            // },
139
+            opacity: 0,
138 140
             lineStyle: {
139
-              // color: '#bd03fb',
141
+              color: '#4DC8FE',
140 142
               width: 2
143
+
141 144
             },
145
+            itemStyle: { color: '#fff', borderWidth: 1, borderColor: '#00C8DA', borderJoin: 'round' }
142 146
             // itemStyle: {
143 147
             //   color: 'transparent'
144 148
             // }

+ 33 - 28
src/views/portraitManagement/employeeProfile/index.vue

@@ -347,36 +347,41 @@ const permutationRadarDataHandler = (result = []) => {
347 347
     areaStyle: {
348 348
       show: false,
349 349
       opacity: 0,
350
-      color: {
351
-        type: 'linear',
352
-        x: 0,
353
-        y: 0,
354
-        x2: 0,
355
-        y2: 1,
356
-        colorStops: [{
357
-          offset: 0, color: '#4DC8FE'
358
-        }, {
359
-          offset: 1, color: '#6C26F3'
360
-        }],
361
-        global: false
362
-      },
350
+     
351
+      // color: {
352
+      //   type: 'linear',
353
+      //   x: 0,
354
+      //   y: 0,
355
+      //   x2: 0,
356
+      //   y2: 1,
357
+      //   colorStops: [{
358
+      //     offset: 0, color: '#4DC8FE'
359
+      //   }, {
360
+      //     offset: 1, color: '#6C26F3'
361
+      //   }],
362
+      //   global: false
363
+      // },
363 364
     },
364 365
     lineStyle: {
365
-      color: {
366
-        type: 'linear',
367
-        x: 0,
368
-        y: 0,
369
-        x2: 0,
370
-        y2: 1,
371
-        colorStops: [{
372
-          offset: 0, color: '#4DC8FE'
373
-        }, {
374
-          offset: 1, color: '#6C26F3'
375
-        }],
376
-        global: false
377
-      },
378
-      width: 5
366
+      color: '#4DC8FE',
367
+      width: 2
379 368
     },
369
+    // lineStyle: {
370
+    //   color: {
371
+    //     type: 'linear',
372
+    //     x: 0,
373
+    //     y: 0,
374
+    //     x2: 0,
375
+    //     y2: 1,
376
+    //     colorStops: [{
377
+    //       offset: 0, color: '#4DC8FE'
378
+    //     }, {
379
+    //       offset: 1, color: '#6C26F3'
380
+    //     }],
381
+    //     global: false
382
+    //   },
383
+    //   width: 5
384
+    // },
380 385
     itemStyle: { color: '#fff', borderWidth: 1,  borderColor: '#00C8DA', borderJoin: 'round' }
381 386
   }]
382 387
 }
@@ -400,7 +405,7 @@ const setRadarOptions = computed(() => {
400 405
         type: 'radar',
401 406
         data: radarData.data,
402 407
         symbol: 'circle',
403
-        symbolSize: 6,
408
+        symbolSize: 13,
404 409
         label: {
405 410
           show: false,
406 411
           formatter: (p) => p.value,