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

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

@@ -6,21 +6,11 @@
 import echarts from 'echarts4'
 export default {
   props: {
-    title: {
-      type: Object,
-      default: () => ({
-        text: ''
-      })
-    },
     grid: {
       type: Array,
-      default: () => ['15%', '2%', '2%', '2%']
+      default: () => ['10', '8%', '10', '10']
     },
-    color: {
-      type: Array,
-      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
-    },
-    xData: {
+    seriesData: {
       required: true,
       type: Array,
       default: () => []
@@ -40,17 +30,10 @@ export default {
   },
   methods: {
     createChart() {
-      const { title, grid, color, xData, yData } = this
+      const { grid, seriesData, yData } = this
+      const max = Math.max(...seriesData)
+      const maxData = seriesData.map(item => max)
       const option = {
-        title: {
-          text: title.text,
-          right: 20,
-          textStyle: {
-            fontSize: '14px',
-            color: '#5EC2D0',
-            fontWeight: 'normal'
-          }
-        },
         grid: {
           top: grid[0],
           right: grid[1],
@@ -58,56 +41,77 @@ export default {
           left: grid[3],
           containLabel: true
         },
-        color,
         xAxis: {
-          type: 'category',
-          data: xData,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              type: [5, 10]
-            }
-          },
+          type: 'value',
           axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
+            formatter: () => ''
+          },
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
           },
           axisTick: {
             show: false
           }
         },
         yAxis: {
-          type: 'value',
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: [5, 10],
-              color: '#323D50'
-            }
-          },
+          type: 'category',
           axisLine: {
-            show: true,
-            lineStyle: {
-              type: [5, 10]
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
+            show: false
           },
           axisTick: {
             show: false
+          },
+          data: yData,
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              color: 'rgba(225, 225, 225, .8)'
+            }
           }
         },
         series: [
           {
-            data: yData,
             type: 'bar',
-            barWidth: 15
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#4A90E2' },
+                { offset: 1, color: '#4ADEE2' }
+              ]),
+              barBorderRadius: 3
+            },
+            label: {
+              show: true,
+              position: 'right',
+              color: 'white',
+              textStyle: {
+                fontSize: 15
+              }
+            },
+            data: seriesData,
+            barWidth: 13
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0.1)',
+              barBorderRadius: 3
+            },
+            // label: {
+            //   show: true,
+            //   position: 'right',
+            //   color: 'white',
+            //   textStyle: {
+            //     fontSize: 15
+            //   }
+            // },
+            barGap: '-100%',
+            barCategoryGap: '40%',
+            data: maxData,
+            barWidth: 13,
+            animation: false
           }
         ]
       }

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

@@ -2,7 +2,7 @@
   <div class="question-type">
     <div class="title">{{ title }}</div>
     <div class="content">
-      <JProgressChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
+      <JProgressChart :seriesData="seriesData" :yData="yData" />
     </div>
   </div>
 </template>
@@ -19,8 +19,8 @@ export default {
   },
   data() {
     return {
-      xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
-      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
+      yData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
     }
   }
 }