债务类别分析

src/components/charts/pie-legend/index.html

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

src/components/charts/pie-legend/index.js

@@ -0,0 +1,213 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'pie'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            value: 2154,
+            unit: '万元',
+            name: "项目一",
+          },
+          {
+            value: 3854,
+            unit: '万元',
+            name: "项目二",
+          },
+          {
+            value: 3854,
+            unit: '万吨',
+            name: "项目三",
+          },
+          {
+            value: 3854,
+            unit: '万吨',
+            name: "项目四",
+          },
+          {
+            value: 3854,
+            unit: '万吨',
+            name: "项目五",
+          }
+        ];
+      }
+    }
+  },
+  data () {
+    return {
+      unit: '万',
+      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 () {
+      var scale = 1;
+      var echartData = [
+        ...this.data
+      ];
+      var rich = {
+        color0: {
+          color: "rgba(15, 252, 252, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        color1: {
+          color: "rgba(29, 197, 104, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        color2: {
+          color: "rgba(49, 129, 246, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        color3: {
+          color: "rgba(18, 51, 255, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        color4: {
+          color: "rgba(134, 91, 252, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        hr: {
+          // borderColor: "#0b5263",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      const option = {
+        title: [
+          {
+            text: "总债务",
+            left: "23%",
+            top: "40%",
+            padding: [0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 18 * scale,
+              align: "center",
+            },
+          },
+          {
+            text: "1000 万元",
+            left: "20%",
+            top: "50%",
+            padding: [0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 18 * scale,
+              align: "center",
+            },
+          }
+        ],
+        legend: {
+          show: true,
+          top: 'center',
+          orient: 'vertical',
+          icon: 'rect',
+          itemWidth: 8,
+          itemHeight: 8,
+          right: 15,
+          itemGap: 0,
+          textStyle: {
+            fontSize: 14,
+            color: 'rgba(210, 238, 255, 1)',
+            rich: rich
+          },
+          formatter: (params) => {
+            var total = 0; //考生总数量
+            var percent = 0; //考生占比
+            var itemvalue = 0
+            let index = 0
+            echartData.forEach((value, i, array) => {
+              total += value.value;
+              if (value.name === params) {
+                index = i
+                itemvalue = value.value
+              }
+            });
+            percent = ((itemvalue / total) * 100).toFixed(1);
+            return (
+              '{blue|' + params + '}\n{hr|}' + '\n' +
+              `{color${index}|` + percent + '%' + '}' + ''
+              + `{color${index}|` + itemvalue + this.unit + '}'
+            );
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["48%", "70%"],
+            center: ['30%', '50%'],
+            color: ["rgba(15, 252, 252, 1)", "rgba(29, 197, 104, 1)", "rgba(49, 129, 246, 1)", "rgba(18, 51, 255, 1)", 'rgba(134, 91, 252, 1)'],
+            label: {
+              normal: {
+                show: false,
+                formatter: function (params) {
+                  var total = 0;
+                  var percent = 0;
+                  echartData.forEach(function (value) {
+                    total += value.value;
+                  });
+                  percent = ((params.value / total) * 100).toFixed(1);
+                  return (
+                    "{white|" +
+                    percent + "%" +
+                    "}\n{blue|" +
+                    params.name +
+                    "}\n{hr|}\n{yellow|" +
+                    params.value + params.data.unit + '}'
+                  );
+                },
+                rich: rich,
+              },
+            },
+            labelLine: {
+              normal: {
+                length: 10 * scale,
+                length2: 20 * scale,
+              },
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/pie-legend/index.scss

@@ -0,0 +1,25 @@
+.pie_full {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .chart {
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .cir {
+    position: absolute;
+    top: 50%;
+    left: 30%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border: 1px solid rgba(49, 129, 246, 1);
+    box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8);
+    /* 添加内发光效果 */
+  }
+}

src/components/charts/pie-legend/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/components/charts/pie/index.js

@@ -96,7 +96,7 @@ export default {
       const option = {
         title: [
           {
-            text: "总库存量",
+            text: "总债务",
             left: "center",
             top: "40%",
             padding: [0, 0],
@@ -107,7 +107,7 @@ export default {
             },
           },
           {
-            text: "1000 万吨",
+            text: "1000 万元",
             left: "center",
             top: "50%",
             padding: [0, 0],
@@ -123,6 +123,7 @@ export default {
             name: "",
             type: "pie",
             radius: ["48%", "70%"],
+
             color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)"],
             label: {
               normal: {

src/utils/auth.js

@@ -2,7 +2,7 @@ const TokenKey = 'Admin-Token';
 
 // 获取token
 export function getToken () {
-  return 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjIwM2ZmM2E2LTcwOTgtNDczYi1hYTU2LTU4YWQ3M2JlMWM0ZiJ9.nFLFIXkwMA5_1YVnt_HJ3WkOByaouxsMa4Ls3340FmBdQBkHdYEivHHNLm-NSkh08JXRNyiX5SOiBdO83PwtSw'; // 将token保存在本地
+  return 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjNlMjYwNzA2LTQzZWEtNGJlMS1hZDBiLTQ1YTIzMzk1MmNiOSJ9._B3v74EZpYO8WspNmKtQU1t7AoxrFdRWuhUNojKDrk5gTakfdfS8rcD5USwwvRwDgRaR1DvmP6E2fhspkB-8kg'; // 将token保存在本地
 }
 // 保存token
 export function setToken (token) {

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

@@ -1,3 +1,3 @@
 <Pannel title="债务类别分析" height="305">
-  
+  <PieLegend></PieLegend>
 </Pannel>

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

@@ -1,7 +1,9 @@
 import Pannel from '@/components/pannel/index.vue';
+import PieLegend from '@/components/charts/pie-legend/index.vue';
 
 export default {
   components: {
+    PieLegend,
     Pannel
   },
   data () {