湖里大屏：新增 jChart/bar/JProgressChart.vue 组件

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>

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

@@ -1,42 +1,45 @@
 <template>
-<!-- 问题类型 -->
+  <div class="question-type">
-<div class="container">
+    <div class="title">{{ title }}</div>
-    <div class="titleTxt">{{ title }}</div>
+    <div class="content">
-
+      <JProgressChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
-</div>
+    </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;
-
+  .title {
-  .titleTxt {
+    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>
-