湖里大屏：完成 jChart/bar/JBarChart.vue 组件封装

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue

@@ -6,76 +6,108 @@
 import echarts from 'echarts4'
 export default {
   props: {
-    data: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: ''
+      })
+    },
+    grid: {
       type: Array,
-      default: () => [{ value: 1, name: '' }]
+      default: () => ['15%', '2%', '2%', '2%']
     },
     color: {
       type: Array,
-      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
+      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
     },
-    title: {
-      type: String,
-      default: ''
-    },
-    subTitle: {
-      type: String,
-      default: ''
-    },
-    radius: {
+    xData: {
+      required: true,
       type: Array,
-      default: () => ['65%', '80%']
+      default: () => []
+    },
+    yData: {
+      required: true,
+      type: Array,
+      default: () => []
     }
   },
   mounted() {
     this.jBarChart = echarts.init(this.$refs.jBarChart)
-    this.createRingChart()
+    this.createChart()
   },
   data() {
     return { jBarChart: null }
   },
   methods: {
-    createRingChart() {
+    createChart() {
+      const { title, grid, color, xData, yData } = this
       const option = {
-        color: this.color,
         title: {
-          show: true,
-          text: this.title,
-          x: '48%',
-          y: '36%',
-          z: 5,
-          textAlign: 'center',
+          text: title.text,
+          right: 20,
           textStyle: {
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: 20
-          },
-          subtext: this.subTitle,
-          subtextStyle: {
-            color: 'rgba(255, 255, 255, 0.8)',
-            fontSize: 13
+            fontSize: '14px',
+            color: '#5EC2D0',
+            fontWeight: 'normal'
           }
         },
         grid: {
-          right: 0
+          top: grid[0],
+          right: grid[1],
+          bottom: grid[2],
+          left: grid[3],
+          containLabel: true
         },
-        legend: {
-          show: false
+        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: [
           {
-            name: '',
-            type: 'pie',
-            radius: this.radius,
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
-            labelLine: {
-              show: false
-            },
-            data: this.data
+            data: yData,
+            type: 'bar',
+            barWidth: 15
           }
         ]
       }

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

@@ -3,13 +3,7 @@
   <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%']"
-      />
+      <JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
     </div>
   </div>
 </template>
@@ -25,7 +19,10 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
+    }
   }
 }
 </script>