环图样式

src/components/e-charts/single_circle.vue

@@ -40,6 +40,7 @@ export default {
   methods: {
     init_health(num, color, text) {
       var options = {
+        color:[color,'#c9cedd'],
         title: {
           text: num + "%",
           textStyle: {
@@ -96,48 +97,79 @@ export default {
         },
         series: [
           {
-            type: "bar",
-            silent: true,
-            data: [
-              {
-                name: "作文得分",
-                value: num,
-                itemStyle: {
-                  normal: {
-                    color: color,
-                    shadowColor: "rgba(0, 0, 0, 0.2)",
-                    shadowBlur: 20
-                  }
-                }
-              }
-            ],
-            coordinateSystem: "polar",
-            roundCap: true,
-            barWidth: 8,
-            barGap: "-100%", // 两环重叠
-
-            z: 2
-          },
+        type: 'pie',
+        z:5,
+        center:['50%','50%'],
+        radius:['68%','72%'],
+        silent:true,
+        label: {
+            normal: {
+                show: false
+            },
+            emphasis: {
+                show: false
+            }
+        },
+        labelLine: {
+            normal: {
+                show: false
+            },
+            emphasis: {
+                show: false
+            }
+        },
+        tooltip: {
+            show: false
+        },
+        data:[{
+          name:'',
+          value:num
+        },{
+          name:'',
+          value:100 - num
+        }]
+    },
           {
-            // 灰色环
-            type: "bar",
-            silent: true,
-            data: [
-              {
-                value: 100,
-                itemStyle: {
-                  color: "#c9cedd",
-                  shadowColor: "rgba(0, 0, 0, 0.2)",
-                  shadowBlur: 20
-                }
-              }
-            ],
-            coordinateSystem: "polar",
-            roundCap: true,
-            barWidth: 8,
-            barGap: "-100%", // 两环重叠
-            z: 1
-          }
+        type:'pie',
+        z:4,
+        center:['50%','50%'],
+        radius:['60%','80%'],
+        hoverAnimation:false,
+        avoidLabelOverlap: false,
+        label: {
+            normal: {
+                show: false
+            },
+            emphasis: {
+                show: false
+            }
+        },
+        labelLine: {
+            normal: {
+                show: false
+            },
+            emphasis: {
+                show: false
+            }
+        },
+        tooltip: {
+            show: false
+        },
+        itemStyle: {
+            normal: {
+                color:'#f6f7fc'
+            }
+        },
+        emphasis:{
+            show:false,
+            itemStyle:{
+                color:'#f6f7fc'
+            }
+        },
+        data: [{
+            value: 1,
+        }],
+    }
         ]
       };
       window[this.health] = echarts.init(document.getElementById(this.health));