refactor: 首页控制台优化

Former-commit-id: 40345282d470d315585b052e0ae55cb1974e3e25

src/views/dashboard/components/BarChart.vue

@@ -1,6 +1,9 @@
 <!--  线 + 柱混合图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 业绩柱状图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -42,18 +45,6 @@ function initChart() {
   const barChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   barChart.setOption({
-    title: {
-      show: true,
-      text: '业绩总览',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -72,7 +63,10 @@ function initChart() {
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['收入', '毛利润', '收入增长率', '利润增长率']
+      data: ['收入', '毛利润', '收入增长率', '利润增长率'],
+      textStyle: {
+        color: '#999'
+      }
     },
     xAxis: [
       {

src/views/dashboard/components/PieChart.vue

@@ -1,6 +1,9 @@
 <!-- 饼图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 产品分类饼图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
   const pieChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   pieChart.setOption({
-    title: {
-      show: true,
-      text: '产品分类总览',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -60,7 +51,10 @@ function initChart() {
       containLabel: true
     },
     legend: {
-      top: 'bottom'
+      top: 'bottom',
+      textStyle: {
+        color: '#999'
+      }
     },
     series: [
       {

src/views/dashboard/components/RadarChart.vue

@@ -1,6 +1,9 @@
 <!-- 雷达图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 订单状态雷达图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
   const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   radarChart.setOption({
-    title: {
-      show: true,
-      text: '订单状态统计',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -62,7 +53,10 @@ function initChart() {
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['预定数量', '下单数量', '发货数量']
+      data: ['预定数量', '下单数量', '发货数量'],
+      textStyle: {
+        color: '#999'
+      }
     },
     radar: {
       // shape: 'circle',