湖里大屏：完成 jChart/line/JLineChart.vue 组件封装

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

@@ -8,17 +8,15 @@ export default {
   props: {
     title: {
       type: Object,
-      default: () => ({
+      default: () => ({ text: '' })
-        text: ''
-      })
     },
     grid: {
       type: Array,
-      default: () => ['15%', '2%', '2%', '2%']
+      default: () => ['12%', '2%', '6%', '1%']
     },
     color: {
       type: Array,
-      default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
+      default: () => ['#FAC915', '#61D2B9', '#F67F51', '#7851F6']
     },
     xData: {
       required: true,
@@ -58,56 +56,78 @@ export default {
           left: grid[3],
           containLabel: true
         },
+        tooltip: {
+          trigger: 'axis'
+        },
         color,
         xAxis: {
           type: 'category',
+          boundaryGap: false,
           data: xData,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              type: [5, 10]
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
-          },
           axisTick: {
             show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              type: [5, 10],
+              color: '#364252'
+            }
           }
         },
         yAxis: {
           type: 'value',
-          splitLine: {
+          axisTick: {
-            show: true,
+            show: false
-            lineStyle: {
+          },
-              type: [5, 10],
+          axisLabel: {
-              color: '#323D50'
+            textStyle: {
+              color: 'rgba(255, 255, 255, .8)'
             }
           },
           axisLine: {
             show: true,
             lineStyle: {
-              type: [5, 10]
+              type: [5, 10],
+              color: '#787E8A'
             }
           },
-          axisLabel: {
+          splitLine: {
-            show: true,
+            lineStyle: {
-            textStyle: {
+              type: [5, 10],
-              color: '#fff'
+              color: '#364252'
             }
-          },
-          axisTick: {
-            show: false
           }
         },
         series: [
           {
             data: yData,
-            type: 'bar',
+            type: 'line',
-            barWidth: 15
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(250,201,21,0.6)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(250,201,21,0.1)'
+                }
+              ])
+            },
+            showSymbol: false,
+            itemStyle: {
+              emphasis: {
+                color: '#FAC915',
+                borderColor: '#FAC915',
+                borderWidth: 10
+              }
+            }
           }
         ]
       }

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

@@ -3,7 +3,7 @@
   <div class="problemTrend">
     <div class="title">{{ title }}</div>
     <div class="content">
-      <JLineChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
+      <JLineChart :xData="xData" :yData="yData" :title="{ text: '最近30天质量问题趋势分析' }" />
     </div>
   </div>
 </template>