封装环形图组件

src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/centerTop.vue

@@ -1,27 +1,28 @@
 <template>
-<!-- 质量问题 -->
-<div class="container">
+  <!-- 质量问题 -->
+  <div class="container">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="charts">
+      <div class="chart">
+        <JRingChart title="hello" subTitle="world" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import JRingChart from './components/JRingChart.vue'
 export default {
-
+  components: { JRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
@@ -37,6 +38,11 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .charts {
+    .chart {
+      width: 300px;
+      height: 180px;
+    }
+  }
 }
 </style>
-

src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/components/JRingChart.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="j-ring-chart" ref="jRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: '' }]
+    },
+    color: {
+      type: Array,
+      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    this.createRingChart()
+  },
+  methods: {
+    createRingChart() {
+      const jRingChart = echarts.init(this.$refs.jRingChart)
+
+      const option = {
+        color: this.color,
+        title: {
+          show: true,
+          text: this.title,
+          x: '48%',
+          y: '36%',
+          z: 5,
+          textAlign: 'center',
+          textStyle: {
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: 20
+          },
+          subtext: this.subTitle,
+          subtextStyle: {
+            color: 'rgba(255, 255, 255, 0.8)',
+            fontSize: 13
+          }
+        },
+        grid: {
+          right: 0
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      }
+
+      console.log(option, '草')
+      jRingChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>