完善图表

src/pages/views/home/components/HomePage.vue

@@ -47,8 +47,8 @@
                 <div
                   v-for="(itm, index) in item.btns"
                   :key="index"
-                  :class="{active:index === item.checkId}"
-                  @click="changeFn(index,item)"
+                  :class="{ active: index === item.checkId }"
+                  @click="changeFn(index, item)"
                 >
                   {{ itm }}
                 </div>
@@ -336,7 +336,6 @@ const datas = [
     name: '系列a'
   }
 ]
-const colorList = [ 'rgba(211, 68, 53, 1)', 'rgba(228, 133, 48, 1)', 'rgba(231, 185, 44, 1)', 'rgba(23, 165, 213, 1)' ]
 
 const leftContent = ref({
   topCount: [
@@ -399,37 +398,17 @@ const leftContent = ref({
           ],
           axisLabel: {
             interval: 0,
-            show: true,
             fontSize: 18,
             color: '#C9D2FA'
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              show: false,
-              color: '#F3F3F3',
-              width: 2
-            }
-          },
-
-          axisTick: {
-            show: false
           }
         },
         yAxis: [
           {
             splitNumber: 2,
             axisLabel: {
-              show: true,
               fontSize: 18,
               color: '#C9D2FA'
             },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
             splitLine: {
               lineStyle: {
                 type: 'dashed',
@@ -441,7 +420,6 @@ const leftContent = ref({
             splitNumber: 2,
             position: 'right', // 放在右边
             axisLabel: {
-              show: true,
               fontSize: 18,
               color: '#C9D2FA',
               formatter(value: number) {
@@ -449,12 +427,6 @@ const leftContent = ref({
                 return `${value}%`
               }
             },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
             splitLine: {
               lineStyle: {
                 type: 'dashed',
@@ -507,7 +479,6 @@ const leftContent = ref({
         },
         // 图表图例
         legend: {
-          show: true,
           type: 'scroll',
           orient: 'horizontal', // 图例排列方向
           icon: 'circle', // 图例样式为圆形
@@ -521,8 +492,6 @@ const leftContent = ref({
             fontSize: 20
           }
         },
-
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -530,7 +499,6 @@ const leftContent = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              show: true,
               formatter: '{b}\n{d}%',
               color: 'white'
             },
@@ -648,7 +616,7 @@ const leftContent = ref({
                 padding: [ 2, 0, 0, 0 ]
               }
             },
-            formatter: (params: string, _id:number) => {
+            formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
                 return `{a${id}|${id}}  ${params}`
@@ -674,13 +642,12 @@ const leftContent = ref({
                   },
                   {
                     offset: 1,
-                    color: colorList[3]
+                    color: 'rgba(231, 185, 44, 1)'
                   }
                 ])
               }
             })),
             label: {
-              show: true,
               position: 'inside',
               color: '#fff',
               fontSize: 16
@@ -789,7 +756,7 @@ const leftContent = ref({
                 padding: [ 2, 0, 0, 0 ]
               }
             },
-            formatter: (params: string, _id:number) => {
+            formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
                 return `{a${id}|${id}}  ${params}`
@@ -815,13 +782,12 @@ const leftContent = ref({
                   },
                   {
                     offset: 1,
-                    color: colorList[3]
+                    color: 'rgba(231, 185, 44, 1)'
                   }
                 ])
               }
             })),
             label: {
-              show: true,
               position: 'inside',
               color: '#fff',
               fontSize: 16
@@ -952,7 +918,7 @@ const rightContent = ref([
   }
 ] as any)
 
-function changeFn(id:number, item:any) {
+function changeFn(id: number, item: any) {
   item.checkId = id
 }
 </script>
@@ -1012,22 +978,25 @@ function changeFn(id:number, item:any) {
         border-radius: 30px;
         border: solid 1px #2185E8;
         left: 50%;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         top: 10px;
         z-index: 2;
         display: flex;
-        &>div{
+
+        &>div {
           width: 90px;
           color: white;
           font-size: 16px;
           text-align: center;
           cursor: pointer;
           line-height: 30px;
-          &:not(:first-child){
+
+          &:not(:first-child) {
             border-left: solid 1px #2185E8;
           }
         }
-        .active{
+
+        .active {
           background: #2185e860;
         }
       }