feat(projects): 添加插件页面：图表

ISSUES CLOSED: \

src/views/dashboard/analysis/components/TopChart/index.vue

@@ -39,152 +39,148 @@ const theme = useThemeStore();
 
 const darkMode = computed(() => theme.darkMode);
 
-const { domRef: lineRef } = useEcharts(
-  ref<ECOption>({
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
+const lineOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['下载量', '注册数']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      color: '#8e9dff',
+      name: '下载量',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#8e9dff'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
         }
-      }
-    },
-    legend: {
-      data: ['下载量', '注册数']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value'
-      }
-    ],
-    series: [
-      {
-        color: '#8e9dff',
-        name: '下载量',
-        type: 'line',
-        smooth: true,
-        stack: 'Total',
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0.25,
-                color: '#8e9dff'
-              },
-              {
-                offset: 1,
-                color: '#fff'
-              }
-            ]
-          }
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
       },
-      {
-        color: '#26deca',
-        name: '注册数',
-        type: 'line',
-        smooth: true,
-        stack: 'Total',
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0.25,
-                color: '#26deca'
-              },
-              {
-                offset: 1,
-                color: '#fff'
-              }
-            ]
-          }
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
-      }
-    ]
-  }),
-  darkMode
-);
+      emphasis: {
+        focus: 'series'
+      },
+      data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
+    },
+    {
+      color: '#26deca',
+      name: '注册数',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#26deca'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
+    }
+  ]
+});
+const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
 
-const { domRef: pieRef } = useEcharts(
-  ref<ECOption>({
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      bottom: '1%',
-      left: 'center',
+const pieOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    bottom: '1%',
+    left: 'center',
+    itemStyle: {
+      borderWidth: 0
+    }
+  },
+  series: [
+    {
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      name: '时间安排',
+      type: 'pie',
+      radius: ['45%', '75%'],
+      avoidLabelOverlap: false,
       itemStyle: {
-        borderWidth: 0
-      }
-    },
-    series: [
-      {
-        color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
-        name: '时间安排',
-        type: 'pie',
-        radius: ['45%', '75%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 1
-        },
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
         label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '12'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          { value: 20, name: '学习' },
-          { value: 10, name: '娱乐' },
-          { value: 30, name: '工作' },
-          { value: 40, name: '休息' }
-        ]
-      }
-    ]
-  }),
-  darkMode
-);
+          show: true,
+          fontSize: '12'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 20, name: '学习' },
+        { value: 10, name: '娱乐' },
+        { value: 30, name: '工作' },
+        { value: 40, name: '休息' }
+      ]
+    }
+  ]
+});
+const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
 </script>
 
 <style scoped></style>