完善页面

components/analytics/AnalyticsPieChart.uvue

@@ -69,18 +69,29 @@ export default {
       if (!this.items || this.items.length === 0) return
 
       const data = (this.items as Array<any>).map((it) => {
+        const itemStyle = it.itemStyle ? this.toPlainObject(it.itemStyle) : {} as any
+        if (it.color && !itemStyle.color) {
+          itemStyle.color = it.color
+        }
         return {
-          name: String(it.name),
+          name: String(it.name || it.label),
           value: Number(it.value),
-          itemStyle: this.toPlainObject(it.itemStyle)
+          itemStyle: itemStyle
         }
       })
 
       const option = {
-        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+        color: ['#1890ff', '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
+        tooltip: { 
+          show: true,
+          trigger: 'item', 
+          formatter: '{b}: {c} ({d}%)',
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          textStyle: { color: '#666', fontSize: 12 }
+        },
         legend: {
           orient: 'vertical',
-          right: 10,
+          right: 20,
           top: 'center',
           itemWidth: 10,
           itemHeight: 10,
@@ -89,7 +100,7 @@ export default {
         series: [{
           type: 'pie',
           radius: ['45%', '70%'],
-          center: ['35%', '50%'],
+          center: ['40%', '50%'],
           data: data,
           avoidLabelOverlap: true,
           label: {
@@ -97,6 +108,7 @@ export default {
           },
           labelLine: { show: false },
           itemStyle: {
+            borderRadius: 4,
             borderWidth: 2,
             borderColor: '#fff'
           }