债务概况分析

src/components/charts/pies/index.html

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

src/components/charts/pies/index.js

@@ -0,0 +1,221 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'one222'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '债务规模',
+            value: '570',
+            unit: '万'
+          },
+          {
+            name: '负债规模',
+            value: '300',
+            unit: '万'
+          },
+          {
+            name: '集体资产',
+            value: '130',
+            unit: '万'
+          }
+        ];
+      }
+    },
+    titlePer: {},
+    title: {
+      type: String,
+      default: '溢价率'
+    },
+    color: {
+      type: [Array],
+      default: function () {
+        return ['rgba(134, 91, 252, 1)', 'rgba(15, 252, 252, 1)', 'rgba(49, 129, 246, 1)']
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  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 seriesArr = [];
+      let max = 0
+      this.data.forEach((item, index) => {
+        max += item.value * 1
+        seriesArr.push(
+          {
+            name: item.name,
+            type: "bar",
+            coordinateSystem: 'polar',
+            roundCap: true,
+            barWidth: 5,
+            showBackground: true,
+            backgroundStyle: {
+              color: "RGBA(9, 35, 75, 1)",
+            },
+            data: [item.value],
+            polarIndex: index,
+            itemStyle: {
+              normal: {
+                color: this.color[index]
+              },
+            },
+          }
+        )
+      });
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return params.seriesName + '\n' + params.value + '万元';
+          }
+        },
+        polar: [
+          {
+            index: 0, // polarIndex为0
+            radius: ["45%", "50%"],
+            center: ["30%", "45%"]
+          },
+          {
+            index: 1, // polarIndex为0
+            radius: ["55%", "60%"],
+            center: ["30%", "45%"]
+          },
+          {
+            index: 2, // polarIndex为0
+            radius: ["65%", "70%"],
+            center: ["30%", "45%"]
+          }
+        ],
+        legend: {
+          show: true,
+          bottom: 'center',
+          orient: 'vertical',
+          icon: 'circle',
+          right: 15,
+          itemGap: 30,
+          itemHeight: '8',
+          itemWidth: 12,
+          textStyle: {
+            fontSize: 14,
+            color: 'rgba(210, 238, 255, 1)',
+            rich: {
+              unit0: {
+                fontSize: 14,
+                color: 'rgba(134, 91, 252, 1)'
+              },
+              unit1: {
+                fontSize: 14,
+                color: 'rgba(15, 252, 252, 1)'
+              },
+              unit2: {
+                fontSize: 14,
+                color: 'rgba(49, 129, 246, 1)'
+              }
+            }
+          },
+          formatter: (name) => {
+            let str = ''
+            this.data.find((item, i) => {
+              if (item.name === name) {
+                str = name + '  ' + `{unit${i}|${item.value + item.unit}}`
+              }
+            })
+            return str;
+          }
+        },
+        angleAxis: [
+          {
+            polarIndex: 0,
+            max: max,
+            show: false,
+          },
+          {
+            polarIndex: 1,
+            max: max,
+            show: false,
+          },
+          {
+            polarIndex: 2,
+            max: max,
+            show: false,
+          }
+        ],
+        radiusAxis: [
+          {
+            type: "category",
+            polarIndex: 0,
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            type: "category",
+            polarIndex: 1,
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            type: "category",
+            polarIndex: 2,
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          }
+        ],
+        series: seriesArr,
+      };
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/pies/index.scss

@@ -0,0 +1,4 @@
+.chart {
+  width: 100%;
+  height: 100%;
+}

src/components/charts/pies/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/property/comps/left/bottom/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资金往来不规范预警分析" height="305">
+<Pannel title="债务趋势分析" height="305">
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/left/middle/2/index.html

@@ -1,4 +1,3 @@
-
-<Pannel title="资源不规范出租预警" height="305">
-  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+<Pannel title="债务类别分析" height="305">
+  
 </Pannel>

src/views/property/comps/left/middle/2/index.js

@@ -1,16 +1,11 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+
 export default {
   components: {
-    ScrollTable,
     Pannel
   },
   data () {
     return {
-      headers: ['资源名称', '类别', '面积（亩）', '部门'],
-      data: [
-        ['资源名称', '类别', '面积（亩）', '部门']
-      ]
     };
   }
 };

src/views/property/comps/left/top/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资源处置预警" height="305">
-  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+<Pannel title="债务概况分析" height="305">
+  <Pies></Pies>
 </Pannel>

src/views/property/comps/left/top/2/index.js

@@ -1,16 +1,12 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import Pies from '@/components/charts/pies/index.vue';
 export default {
   components: {
-    ScrollTable,
+    Pies,
     Pannel
   },
   data () {
     return {
-      headers: ['资源名称', '类别', '面积（亩）', '处置类型', '部门'],
-      data: [
-        ['资源名称', '类别', '面积（亩）', '处置类型', '部门']
-      ]
     };
   }
 };