横向柱状图封装

src/components/charts/horizontal-bar/index.html

@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>

src/components/charts/horizontal-bar/index.js

@@ -0,0 +1,201 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'horizontal-bar'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '闲置',
+            value: '10'
+          },
+          {
+            name: '出租/出借',
+            value: '19'
+          }
+        ];
+      }
+    },
+    unit: {
+      type: String,
+      default: '单位：万元'
+    },
+    color: {
+      type: Array,
+      default: function () {
+        return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
+      }
+    }
+  },
+  data () {
+    return {
+      icon: require('./icon.png'),
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  methods: {
+    // 设置监听器 页面尺寸变化重新绘制图表
+    initResizeCallBack () {
+      const erd = elementResizeDetectorMaker();
+      erd.listenTo(document.getElementById(this.id), () => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      });
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chartSetOption();
+    },
+    chartSetOption () {
+      let yAxis1 = [];
+      let yAxis2 = [];
+      let data = [];
+
+      let pictorialBarData = [];
+      this.data.forEach((item, index) => {
+        yAxis1.push(item.name)
+        yAxis2.push(item.value + '亩')
+        data.push(
+          {
+            value: item.value,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                {
+                  offset: 0,
+                  color: index === 0 ? 'rgba(134, 91, 252, 1)' : 'rgba(15, 252, 252, 1)',
+                },
+                {
+                  offset: 1,
+                  color: index === 0 ? 'rgba(49, 129, 246, 1)' : 'rgba(194, 255, 255, 1)',
+                },
+              ]),
+            },
+          }
+        )
+
+
+        pictorialBarData.push({
+          value: item.value,
+          itemStyle: {
+            color: "rgba(255, 255, 255, 1)",
+          },
+        })
+      });
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (objs, index) {
+            let obj = objs[0];
+            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value}%`;
+          },
+        },
+        grid: {
+          top: "3%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          boundaryGap: [0, 0.01],
+          interval: 20,
+          min: 0,
+          max: 100,
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+            },
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#909396",
+            },
+          },
+          axisLabel: {
+            formatter: function (value, index) {
+              return value + "%";
+            },
+            color: "#303439",
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgba(185, 211, 235, 1)",
+              },
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false,
+            },
+            data: yAxis1,
+          },
+          {
+            type: "category",
+            boundaryGap: true,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgba(185, 211, 235, 1)",
+              },
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false,
+            },
+            data: yAxis2,
+          }
+        ],
+        series: [
+          {
+            name: "",
+            barMaxWidth: 6,
+            type: "bar",
+            data: data,
+          },
+          {
+            name: "2",
+            barMaxWidth: 10,
+            type: "pictorialBar",
+            symbol: 'rect',
+            symbolSize: [4, 14],
+            symbolOffset: [4, 0],
+            symbolPosition: 'end',
+            data: pictorialBarData,
+          }
+        ],
+      };
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/horizontal-bar/index.scss

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

src/components/charts/horizontal-bar/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/views/resources/comps/buttom/1/data.js

@@ -1,61 +1,33 @@
 export default [
-  [
-    {
-      show: false
-    },
-    {
-      show: true,
-      name: '经营收入',
-      value: '716'
-    },
-    {
-      show: true,
-      name: '投资收益',
-      value: '716'
-    },
-    {
-      show: true,
-      name: '补助收入',
-      value: '716'
-    },
-    {
-      show: true,
-      name: '其他收入',
-      value: '716'
-    },
-    {
-      show: false
-    }
-  ],
   [
     {
       show: true,
-      name: '经营支出',
+      name: '农用地（亩）',
       value: '716'
     },
     {
       show: true,
-      name: '税金及附加',
+      name: '建设用地（亩）',
       value: '716'
     },
     {
       show: true,
-      name: '管理费用',
+      name: '未利用地（亩）',
       value: '716'
     },
     {
       show: true,
-      name: '公益支出',
+      name: '农用地（宗）',
       value: '716'
     },
     {
       show: true,
-      name: '其他支出',
+      name: '建设用地（宗）',
       value: '716'
     },
     {
       show: true,
-      name: '所得税费用',
+      name: '未利用地（宗）',
       value: '103'
     }
   ]

src/views/resources/comps/left/top/1/data.js

@@ -1,26 +0,0 @@
-export default [
-  [
-    {
-      name: '存款额（万元）',
-      icon: require('./1.png'),
-      value: '3420'
-    },
-    {
-      name: '组织数（个）',
-      icon: require('./2.png'),
-      value: '257'
-    }
-  ],
-  [
-    {
-      name: '现金额（万元）',
-      icon: require('./3.png'),
-      value: '160'
-    },
-    {
-      name: '组织数（个）',
-      icon: require('./2.png'),
-      value: '101'
-    }
-  ]
-]

src/views/resources/comps/left/top/1/index.html

@@ -1,9 +1,8 @@
-<Pannel title="货币资金分析" height="232">
-  <table>
-    <tr v-for="line in data">
-      <td v-for="item in line">
-        <Block :data="item"></Block>
-      </td>
-    </tr>
-  </table>
+<Pannel title="资源概况分析" height="232">
+  <div class="full colbox">
+    <div class="top border"></div>
+    <div class="buttom border">
+      <HorizontalBar></HorizontalBar>
+    </div>
+  </div>
 </Pannel>

src/views/resources/comps/left/top/1/index.js

@@ -1,14 +1,12 @@
 import Pannel from '@/components/pannel/index.vue';
-import Block from '@/components/block/index.vue';
-import data from './data.js';
+import HorizontalBar from '@/components/charts/horizontal-bar/index.vue';
 export default {
   components: {
-    Block,
+    HorizontalBar,
     Pannel
   },
   data () {
     return {
-      data
     };
   }
 };

src/views/resources/comps/left/top/1/index.scss

@@ -1,12 +1,14 @@
-table {
-  width: 100%;
-  height: 100%;
+.colbox {
+  display: flex;
+  flex-direction: column;
 
-  tr {
+  .top {
     width: 100%;
+    flex: 1;
+  }
 
-    td {
-      width: 50%;
-    }
+  .buttom {
+    width: 100%;
+    flex: 1;
   }
 }

src/views/resources/comps/right/bottom/1/index.html

@@ -1,3 +1,3 @@
-<Pannel title="资金支出排名" height="340">
-  <ScrollTable></ScrollTable>
+<Pannel title="合同不规范管理排名分析" height="340">
+  <ScrollTable :headers="headers"></ScrollTable>
 </Pannel>

src/views/resources/comps/right/bottom/1/index.js

@@ -8,6 +8,7 @@ export default {
   },
   data () {
     return {
+      headers: ['部门名称', '合同数量', '排名']
     };
   },
   created () {

src/views/resources/comps/right/middle/1/index.html

@@ -1,3 +1,11 @@
-<Pannel title="资金收入排名" height="340">
-  <ScrollTable></ScrollTable>
+<Pannel title="合同数量/金额排名分析" height="340">
+
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers"></ScrollTable>
+    </div>
+  </div>
 </Pannel>

src/views/resources/comps/right/middle/1/index.js

@@ -1,13 +1,25 @@
 import Pannel from '@/components/pannel/index.vue';
 import ScrollTable from '@/components/scroll-table/index.vue';
-
+import PannelTabs from '@/components/pannel-tabs/index.vue';
 export default {
   components: {
+    PannelTabs,
     ScrollTable,
     Pannel
   },
   data () {
     return {
+      headers: ['部门名称', '数量', '排名'],
+      pannelTabData: [
+        {
+          id: '1',
+          name: '数量'
+        },
+        {
+          id: '2',
+          name: '金额'
+        }
+      ],
     };
   },
   created () {

src/views/resources/comps/right/middle/1/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}