From f684ab3409842e6a9798838694c3d15fe758d678 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Wed, 3 Aug 2022 11:55:34 +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/JProgressChart.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

---
 .../jChart/bar/JProgressChart.vue             | 125 ++++++++++++++++++
 .../projectHuScreen/qualityManage/leftTop.vue |  39 +++---
 2 files changed, 146 insertions(+), 18 deletions(-)
 create mode 100644 src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JProgressChart.vue

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JProgressChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JProgressChart.vue
new file mode 100644
index 00000000..7bf460e2
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JProgressChart.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="j-progress-chart" ref="JProgressChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: ''
+      })
+    },
+    grid: {
+      type: Array,
+      default: () => ['15%', '2%', '2%', '2%']
+    },
+    color: {
+      type: Array,
+      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
+    },
+    xData: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.JProgressChart = echarts.init(this.$refs.JProgressChart)
+    this.createChart()
+  },
+  data() {
+    return { JProgressChart: null }
+  },
+  methods: {
+    createChart() {
+      const { title, grid, color, xData, yData } = this
+      const option = {
+        title: {
+          text: title.text,
+          right: 20,
+          textStyle: {
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
+        },
+        color,
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10],
+              color: '#323D50'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: [5, 10]
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar',
+            barWidth: 15
+          }
+        ]
+      }
+      this.JProgressChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-progress-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftTop.vue
index efcbced2..d72e82c3 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftTop.vue
@@ -1,42 +1,45 @@
 <template>
-<!-- 问题类型 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <div class="question-type">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <JProgressChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
+    </div>
+  </div>
 </template>
 
 <script>
+import JProgressChart from '../jChart/bar/JProgressChart.vue'
 export default {
-
+  components: { JProgressChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
     return {
-
-    };
-  },
-
-
+      xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
+.question-type {
   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>
-