湖里大屏：新增 jChart/line/JLineChart.vue 组件

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/line/JLineChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="j-line-chart" ref="JLineChart"></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.JLineChart = echarts.init(this.$refs.JLineChart)
+    this.createChart()
+  },
+  data() {
+    return { JLineChart: 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.JLineChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-line-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -1,42 +0,0 @@
-<template>
-<!-- 问题趋势 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
-</template>
-
-<script>
-export default {
-
-  props: {
-    title: {
-      type: String,
-      default: "default title"
-    }
-  },
-  data() {
-    return {
-
-    };
-  },
-
-
-}
-</script>
-
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-

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

@@ -16,8 +16,8 @@
       <div class="rightTop">
         <rightTop title="质量问题" />
       </div>
-      <div class="centerBottom">
-        <centerBottom title="问题趋势" />
+      <div class="rightBottom">
+        <rightBottom title="问题趋势" />
       </div>
     </div>
   </div>
@@ -28,14 +28,14 @@ import leftTop from './leftTop'
 import leftCenter from './leftCenter'
 import leftBottom from './leftBottom'
 import rightTop from './rightTop'
-import centerBottom from './centerBottom'
+import rightBottom from './rightBottom'
 export default {
   components: {
     leftTop,
     leftCenter,
     leftBottom,
     rightTop,
-    centerBottom
+    rightBottom
   }
 }
 </script>
@@ -75,7 +75,7 @@ export default {
     height: 35%;
     margin-bottom: 15px;
   }
-  .centerBottom {
+  .rightBottom {
     height: 62%;
   }
 }

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

@@ -0,0 +1,46 @@
+<template>
+  <!-- 问题占比 -->
+  <div class="problemTrend">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <JLineChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
+    </div>
+  </div>
+</template>
+
+<script>
+import JLineChart from '../jChart/line/JLineChart.vue'
+export default {
+  components: { JLineChart },
+  props: {
+    title: {
+      type: String,
+      default: 'default title'
+    }
+  },
+  data() {
+    return {
+      xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.problemTrend {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #0081c3;
+  .title {
+    padding-left: 6px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+    color: #6ee4f0;
+  }
+  .content {
+    height: calc(100% - 30px);
+  }
+}
+</style>