feat:首页新增饼状图和调整部分样式

@@ -5,7 +5,7 @@
       class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
       style="color: #666; width: 50%"
     >
-      <div class="flex">
+      <div class="flex container">
         <div class="mr-4 flex chart-top">
           <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" />
         </div>
@@ -21,7 +21,7 @@
       class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
       style="color: #666; width: 50%"
     >
-      <div class="flex">
+      <div class="flex container">
         <div class="mr-4 flex chart-top">
           <PieChartDeviceSub :legendData="legendStatusData" :seriesData="seriesStatusData" />
         </div>
@@ -76,15 +76,15 @@
   const growCardList = ref<CardList>();
   const legendData = ref<string[]>(['gateway', 'directly', 'sub-device']);
   const seriesData = ref([
-    { value: 1048, name: 'gateway' },
-    { value: 735, name: 'directly' },
-    { value: 580, name: 'sub-device' },
+    { value: 1048, name: 'gateway', itemStyle: { color: '#3aa0ff' } },
+    { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },
+    { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },
   ]);
   const legendStatusData = ref<string[]>(['inactive', 'online', 'offline']);
   const seriesStatusData = ref([
-    { value: 1048, name: 'inactive' },
-    { value: 735, name: 'online' },
-    { value: 580, name: 'offline' },
+    { value: 1048, name: 'inactive', itemStyle: { color: '#3aa0ff' } },
+    { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },
+    { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },
   ]);
   onMounted(async () => {
     const res = await getHomeData();
@@ -94,19 +94,27 @@
 
 <style lang="css">
   .right-text {
+    width: 40%;
     flex-direction: column;
-    height: 200px;
+    height: 240px;
     margin: 10px 0 10px 50px;
-    flex-wrap: nowrap;
   }
 
   .text {
     color: #333;
     font-weight: bold;
+    display: flex;
+    flex-wrap: nowrap;
   }
 
   .chart-top {
+    width: 60%;
+    height: 300px;
     align-items: center;
     margin-top: -30px;
   }
+
+  .container {
+    width: 100%;
+  }
 </style>

@@ -9,7 +9,7 @@
     props: {
       width: {
         type: String as PropType<string>,
-        default: '300px',
+        default: '100%',
       },
       height: {
         type: String as PropType<string>,
@@ -28,26 +28,29 @@
       const { legendData, seriesData } = toRefs(props);
       const dataSeries = ref<any>([]);
       const legendDatas = ref<any>([]);
-      dataSeries.value = seriesData;
-      legendDatas.value = legendData;
+      dataSeries.value = seriesData.value;
+      legendDatas.value = legendData.value;
+
       const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
       onMounted(() => {
         setOptions({
           backgroundColor: '#ffffff',
           tooltip: {
             trigger: 'item',
+            formatter: '{b} ({d}%)',
           },
           legend: {
-            bottom: 10,
+            bottom: 0,
             left: 'center',
             data: legendDatas,
           },
+          color: ['red', '#5470c6', '#91cd77'],
           series: [
             {
               name: 'Access From',
               type: 'pie',
-              radius: '50%',
+              radius: '60%',
               data: dataSeries,
               emphasis: {
                 itemStyle: {
@@ -59,6 +62,8 @@
             },
           ],
         });
+        //自适应
+        window.addEventListener('resize', () => resize());
       });
       return { chartRef };
     },