style(components/echarts/grouplegend): 修复样式问题

src/components/ECharts/GroupLegend/index.vue

@@ -5,9 +5,12 @@
       v-for="item in legendData"
       :class="item.orient">
       <div v-for="o in item.data"
-        :class="[o.type, o.effective ? '' : 'dis', o.show? '' : 'none']"
-        :style="{'--color': o.color}"
-        @click="handleClick(o)">{{ o.name }}</div>
+        :class="[o.type, o.effective ? '' : 'dis', o.show ? '' : 'none']"
+        :style="{ '--color': o.color }"
+        @click="handleClick(o)">
+        <span class="e-icon"></span>
+        <span>{{ o.name }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -95,8 +98,7 @@ export default {
         font-size: 12px;
         cursor: pointer;
 
-        &:before {
-          content: "";
+        .e-icon {
           display: block;
           width: 28px;
           height: 15px;
@@ -112,30 +114,30 @@ export default {
         align-items: center;
         font-size: 12px;
         cursor: pointer;
-        position: relative;
 
-        &:before {
-          content: "";
+        .e-icon {
+          position: relative;
           display: block;
           width: 28px;
           height: 2px;
           background: var(--color);
           border-radius: 3px;
           margin-right: 5px;
-        }
 
-        &:after {
-          content: "";
-          display: block;
-          width: 14px;
-          height: 14px;
-          background-color: white;
-          box-sizing: border-box;
-          border: 3px solid var(--color);
-          border-radius: 50%;
-          position: absolute;
-          top: 0.5px;
-          left: 7.45px;
+          &:before {
+            content: "";
+            display: block;
+            width: 14px;
+            height: 14px;
+            background-color: white;
+            box-sizing: border-box;
+            border: 3px solid var(--color);
+            border-radius: 50%;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+          }
         }
       }
 
@@ -145,18 +147,28 @@ export default {
         align-items: center;
         font-size: 12px;
         cursor: pointer;
-        position: relative;
-        padding-left: 7.75px;
 
-        &:before {
-          content: "";
+        .e-icon {
+          position: relative;
           display: block;
-          width: 14px;
-          height: 14px;
-          background: white;
-          border: 3px solid var(--color);
-          border-radius: 50%;
-          margin-right: 10px;
+          width: 28px;
+          height: 0px;
+          margin-right: 5px;
+
+          &:before {
+            content: "";
+            display: block;
+            width: 14px;
+            height: 14px;
+            background-color: white;
+            box-sizing: border-box;
+            border: 3px solid var(--color);
+            border-radius: 50%;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+          }
         }
       }
 
@@ -164,26 +176,17 @@ export default {
       .dis {
         color: lightgray !important;
 
-        &:before {
+        .e-icon {
           background: lightgray !important;
-          border: 3px solid lightgray !important;
-        }
-
-        &:after {
-          border: 3px solid lightgray !important;
-        }
-      }
-
-      /* 重写圆圈 */
-      .circle.dis {
-        &:before {
-          background: white !important;
-          border: 3px solid lightgray !important;
+          border-color: lightgray !important;
+          &:before{
+            border-color: lightgray !important;
+          }
         }
       }
 
       /* 隐藏 */
-      .none{
+      .none {
         display: none;
       }
     }