湖里大屏：更改 jChart/line/JLineChart.vue 组件封装

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

@@ -23,10 +23,10 @@ export default {
       type: Array,
       default: () => []
     },
-    yData: {
+    series: {
       required: true,
       type: Array,
-      default: () => []
+      default: () => [{}]
     }
   },
   mounted() {
@@ -38,7 +38,26 @@ export default {
   },
   methods: {
     createChart() {
-      const { title, grid, color, xData, yData } = this
+      const { title, grid, color, xData, series } = this
+
+      const fmtSeries = (series => {
+        return series.map(item => ({
+          type: 'line',
+          smooth: true,
+          data: item.data,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: item.areaColor[0] },
+              { offset: 1, color: item.areaColor[1] }
+            ])
+          },
+          showSymbol: item.showSymbol,
+          itemStyle: {
+            emphasis: item.emphasis
+          }
+        }))
+      })(series)
+
       const option = {
         title: {
           text: title.text,
@@ -103,33 +122,7 @@ export default {
             }
           }
         },
-        series: [
-          {
-            data: yData,
-            type: 'line',
-            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
-              }
-            }
-          }
-        ]
+        series: fmtSeries
       }
       this.JLineChart.setOption(option)
     }

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: '最近30天质量问题趋势分析' }" />
+      <JLineChart :xData="xData" :series="series" :title="{ text: '最近30天质量问题趋势分析' }" />
     </div>
   </div>
 </template>
@@ -21,7 +21,17 @@ export default {
   data() {
     return {
       xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
-      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
+      series: [
+        {
+          data: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33],
+          areaColor: ['rgba(250,201,21,0.6)', 'rgba(250,201,21,0.1)'],
+          emphasis: {
+            color: '#FAC915',
+            borderColor: '#FAC915',
+            borderWidth: 10
+          }
+        }
+      ]
     }
   }
 }