From 15d8437e66d186ed6c6fe11b517ec4c2b2d0cde6 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Wed, 3 Aug 2022 10:27:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F=EF=BC=9A?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20jChart/bar/JBarChart.vue=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/jChart/bar/JBarChart.vue  | 93 +++++++++++++++++++
 .../projectHuScreen/qualityManage/index.vue   |  2 +-
 .../qualityManage/leftBottom.vue              | 45 +++++----
 3 files changed, 120 insertions(+), 20 deletions(-)
 create mode 100644 src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
new file mode 100644
index 00000000..25c134ed
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="j-bar-chart" ref="jBarChart"></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: ''
+    },
+    radius: {
+      type: Array,
+      default: () => ['65%', '80%']
+    }
+  },
+  mounted() {
+    this.jBarChart = echarts.init(this.$refs.jBarChart)
+    this.createRingChart()
+  },
+  data() {
+    return { jBarChart: null }
+  },
+  methods: {
+    createRingChart() {
+      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: this.radius,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
+      }
+      this.jBarChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/index.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/index.vue
index cf94da1f..eae38b58 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/index.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/index.vue
@@ -9,7 +9,7 @@
         <leftCenter title="问题占比" />
       </div>
       <div class="leftBottom">
-        <leftCenter title="频发问题" />
+        <leftBottom title="频发问题" />
       </div>
     </div>
     <div class="centerBox">
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
index 6d067f67..38f1046c 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
@@ -1,42 +1,49 @@
 <template>
-<!-- 频发问题 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <!-- 问题占比 -->
+  <div class="frequentProblems">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <JBarChart
+        title="3412"
+        subTitle="问题总数"
+        :color="['#557DEE', '#43D7B5']"
+        :data="[{ value: 2314 }, { value: 987 }]"
+        :radius="['55%', '80%']"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-
+  components: { JBarChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
+.frequentProblems {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
-
-  .titleTxt {
+  .title {
+    padding-left: 6px;
+    height: 30px;
+    line-height: 30px;
     font-size: 18px;
     color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+  }
+  .content {
+    height: calc(100% - 30px);
   }
 }
 </style>
-