中建四局(资源管理)：隐患趋势布局

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],

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>