From 07e2f1acfe292982dd10a042383049d0cf9bf963 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 26 Aug 2022 14:45:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E7=AE=A1=E7=90=86)=EF=BC=9A=E9=9A=90=E6=82=A3?=
 =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/jChart/bar/JBarChart.vue           | 40 +++++++++++--------
 .../projectAdmin/zjsj/sourse/rightTop.vue     | 33 ++++++++++++++-
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/views/projectAdmin/common/jChart/bar/JBarChart.vue b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
index c0ed47b6..71c60199 100644
--- a/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
+++ b/src/views/projectAdmin/common/jChart/bar/JBarChart.vue
@@ -45,22 +45,22 @@ export default {
   data() {
     return { jBarChart: null }
   },
-  watch:{
-    xData:{
-      handler(newVal,oldVal){
-         if(newVal != oldVal){
-          this.createChart();
-         }
-       },
-       deep:true,
+  watch: {
+    xData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true
     },
-    yData:{
-      handler(newVal,oldVal){
-         if(newVal != oldVal){
-          this.createChart();
-         }
-       },
-       deep:true,
+    yData: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createChart()
+        }
+      },
+      deep: true
     }
   },
   methods: {
@@ -68,7 +68,7 @@ export default {
       const { title, tooltip, grid, color, xData, yData, series } = this
       const configSeries = (series => {
         if (series.length) {
-          return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
+          return series.map(item => ({ name: item.name, type: 'bar', data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
         } else {
           return [{ data: yData, type: 'bar', barWidth: 15 }]
         }
@@ -84,6 +84,14 @@ export default {
             fontWeight: 'normal'
           }
         },
+        legend: {
+          icon: 'circle',
+          top: 15,
+          left: 20,
+          itemWidth: 8,
+          textStyle: { color: '#fff' },
+          data: [{ name: '计划用料' }, { name: '实际用料' }]
+        },
         tooltip,
         grid: {
           top: grid[0],
diff --git a/src/views/projectAdmin/zjsj/sourse/rightTop.vue b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
index 30c1c9b0..c894b927 100644
--- a/src/views/projectAdmin/zjsj/sourse/rightTop.vue
+++ b/src/views/projectAdmin/zjsj/sourse/rightTop.vue
@@ -1,13 +1,42 @@
 <template>
   <Card title="隐患趋势">
-    隐患趋势
+    <JBarChart :tooltip="{}" :xData="xData" :series="series" />
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import JBarChart from '../../common/jChart/bar/JBarChart.vue'
+import echarts from 'echarts4'
 export default {
-  components: { Card }
+  components: { Card, JBarChart },
+  data() {
+    return {
+      xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
+      series: [
+        {
+          name: '计划用料',
+          data: [23, 44, 63, 12, 45, 78, 34, 67, 32, 44, 13, 75],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#6de1ee' },
+              { offset: 1, color: '#6de1ee24' }
+            ])
+          }
+        },
+        {
+          name: '实际用料',
+          data: [44, 13, 86, 24, 43, 78, 12, 32, 45, 82, 21, 76],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#DE5F2A' },
+              { offset: 1, color: '#DE5F2A24' }
+            ])
+          }
+        }
+      ]
+    }
+  }
 }
 </script>