fix:格式化代码

src/views/peopleManages/personComcont/BarChart.vue

@@ -1,81 +1,99 @@
 <template>
-  <div class="pieView">
-    <div style="
+    <div class="pieView">
+        <div
+            style="
         line-height: 30px;
         text-align: left;
         padding-left: 10px;
         width: 100%;
         color: white;
-      ">
-      {{ config.title }}
-    </div>
-    <div v-if="config.state=='100'" style="
+      "
+        >
+            {{ config.title }}
+        </div>
+        <div
+            v-if="config.state=='100'"
+            style="
         width: 100%;
         height: 95%;
         display: inline-block;
         overflow: hidden;
         box-sizing: border-box;
-      ">
-      <div :id="config.id"
-           style="width: 100%; height: 100%"></div>
-    </div>
-    <div v-else style="
+      "
+        >
+            <div
+                :id="config.id"
+                style="width: 100%; height: 100%"
+            />
+        </div>
+        <div
+            v-else
+            style="
         width: 100%;
         height: 90%;
         display: inline-block;
         overflow: hidden;
         box-sizing: border-box;
         margin-top:5%;
-      ">
-      <div :id="config.id"
-           style="width: 100%; height:90%"></div>
+      "
+        >
+            <div
+                :id="config.id"
+                style="width: 100%; height:90%"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 export default {
-  data() {
-    return {};
-  },
-  props: {
-    info: {
-      type: Object,
-      default: {},
+    props: {
+        info: {
+            type: Object,
+            default: function () {
+                return {
+                }
+            }
+        },
+        config: {
+            type: Object,
+            default: function () {
+                return {
+                    title: 'title',
+                    id: 'idSelector'
+                }
+            }
+
+        }
     },
-    config: {
-      type: Object,
-      default: {
-        title: "title",
-        id: "idSelector",
-      },
+    data () {
+        return {}
     },
-  },
-  mounted() {
-    let this_ = this;
-    this.$nextTick(() => {
-      this_.getMiddleLeft();
-    });
-  },
-  methods: {
-    getMiddleLeft() {
-      var chartDom = document.getElementById(this.config.id);
-      var myChart = echarts.init(chartDom);
-      setTimeout(() => {
-        this.info && myChart.setOption(this.info);
-      }, 500);
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
+            },
+            deep: true
+        }
     },
-  },
-  watch: {
-    info: {
-      handler(newVal, oldVal) {
-        this.getMiddleLeft();
-      },
-      deep: true,
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
     },
-  },
-};
+    methods: {
+        getMiddleLeft () {
+            var chartDom = document.getElementById(this.config.id)
+            var myChart = echarts.init(chartDom)
+            setTimeout(() => {
+                this.info && myChart.setOption(this.info)
+            }, 500)
+        }
+    }
+}
 </script>
 <style lang="scss" scoped>
 .pieView {
@@ -88,4 +106,4 @@ export default {
   color: white;
   background-color: rgba(6, 30, 93, 0.5);
 }
-</style>
+</style>

src/views/peopleManages/personComcont/GetPieView.vue

@@ -1,114 +1,117 @@
 <template>
-  <div class="pieView">
-    <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
-      {{ info.config.title || "" }}
+    <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ info.config.title || "" }}
+        </div>
+        <div v-show="showChart" style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div :id="info.config.idSelector" style="width: 100%; height: 95%; overflow: hidden" />
+        </div>
+        <div v-if="!showChart" style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;">
+            <div style="color: #c7c7c7">目前无数据</div>
+        </div>
     </div>
-    <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden" v-show="showChart">
-      <div :id="info.config.idSelector" style="width: 100%; height: 95%; overflow: hidden" ></div>
-    </div>
-    <div style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;" v-if="!showChart">
-      <div style="color: #c7c7c7">目前无数据</div>
-    </div>
-  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 export default {
-  data() {
-    return {
-      showChart: true,
-    };
-  },
-  props: {
-    info: {
-      type: Object,
-      default: {},
+    props: {
+        info: {
+            type: Object,
+            default: function () {
+                return {
+                }
+            }
+        }
     },
-  },
-  mounted() {
-    let this_ = this;
-    this.$nextTick(() => {
-      this_.getMiddleLeft();
-    });
-  },
-  methods: {
-    getMiddleLeft() {
-      let chartDom = document.getElementById(this.info.config.idSelector);
-      var myChart = echarts.init(chartDom);
-      const radius = window.innerWidth > 1600 ? "55%" : "45%";
-      let inData = this.info.data;
-      let num = 0;
-      for (let i in inData) {
-        num += inData[i].value;
-      }
-      if (num == 0) {
-        this.showChart = false;
-      } else {
-        this.showChart = true;
-      }
-      var option;
-      option = {
-        title: {
-          show: true,
-          left: "center",
-          textStyle: {
-            color: "#fff",
-            fontSize: 18,
-            fontWeight: "600",
-          },
-        },
-        color: this.info.color,
-        tooltip: {
-          trigger: "item",
-          formatter: "{d}%",
-        },
-        label: {
-          formatter: "{b}\n({d}%)",
-          edgeDistance: "20%",
-        },
-
-        legend: {
-          show: true,
-          // orient: 'vertical',
-          itemGap: 6,
-          z: 3,
-          left: "center",
-          textStyle: {
-            color: "#fff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius: radius,
-            center: ["50%", "50%"],
-            data: this.info.data,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-            labelLine: {
-              distanceToLabelLine: 0,
+    data () {
+        return {
+            showChart: true
+        }
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
             },
-          },
-        ],
-      };
-      myChart.setOption(option);
+            deep: true
+        }
     },
-  },
-  watch: {
-    info: {
-      handler(newVal, oldVal) {
-        this.getMiddleLeft();
-      },
-      deep: true,
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
     },
-  },
-};
+    methods: {
+        getMiddleLeft () {
+            const chartDom = document.getElementById(this.info.config.idSelector)
+            var myChart = echarts.init(chartDom)
+            const radius = window.innerWidth > 1600 ? '55%' : '45%'
+            const inData = this.info.data
+            let num = 0
+            for (const i in inData) {
+                num += inData[i].value
+            }
+            if (num === 0) {
+                this.showChart = false
+            } else {
+                this.showChart = true
+            }
+            var option
+            option = {
+                title: {
+                    show: true,
+                    left: 'center',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 18,
+                        fontWeight: '600'
+                    }
+                },
+                color: this.info.color,
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{d}%'
+                },
+                label: {
+                    formatter: '{b}\n({d}%)',
+                    edgeDistance: '20%'
+                },
+
+                legend: {
+                    show: true,
+                    // orient: 'vertical',
+                    itemGap: 6,
+                    z: 3,
+                    left: 'center',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: radius,
+                        center: ['50%', '50%'],
+                        data: this.info.data,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        labelLine: {
+                            distanceToLabelLine: 0
+                        }
+                    }
+                ]
+            }
+            myChart.setOption(option)
+        }
+    }
+}
 </script>
 <style lang="scss" scoped>
 .pieView {
@@ -117,4 +120,4 @@ export default {
   overflow: hidden;
   background-color: rgba(6, 30, 93, 0.5);
 }
-</style>
+</style>

src/views/peopleManages/personComcont/RingChart.vue

@@ -1,120 +1,128 @@
 <template>
-  <div class="pieView">
-    <div style="
+    <div class="pieView">
+        <div
+            style="
         height: 14%;
         line-height: 30px;
         text-align: left;
         padding-left: 10px;
         color: white;
-      ">
-      {{ info.config.title || "" }}
+      "
+        >
+            {{ info.config.title || "" }}
+        </div>
+        <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div
+                :id="info.config.idSelector"
+                style="width: 100%; height: 95%; overflow: hidden"
+            />
+        </div>
     </div>
-    <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
-      <div :id="info.config.idSelector"
-           style="width: 100%; height: 95%; overflow: hidden"></div>
-    </div>
-  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 export default {
-  data() {
-    return {};
-  },
-  props: {
-    info: {
-      type: Object,
-      default: {},
+    props: {
+        info: {
+            type: Object,
+            default: function () {
+                return {
+
+                }
+            }
+        }
     },
-  },
-  mounted() {
-    let this_ = this;
-    this.$nextTick(() => {
-      this_.getMiddleLeft();
-    });
-  },
-  methods: {
-    getMiddleLeft() {
-      let chartDom = document.getElementById(this.info.config.idSelector);
-      var myChart = echarts.init(chartDom);
-      var option;
-      option = {
-        title: {
-          show: true,
-          left: "center",
-          textStyle: {
-            color: "#fff",
-            fontSize: 20,
-            fontWeight: "600",
-          },
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "",
-        },
-        color: this.info.color,
-        legend: {
-          left: 'center',
-          // show: true,
-          z: 2,
-          //   top: "2%",
-          // orient: 'vertical',
-          //   left: "",
-          textStyle: {
-            color: "#fff",
-          },
-        },
-        label: {
-          formatter: "{b}:{d}%",
-        },
-        series: [
-          {
-            // name: "Access From",
-            type: "pie",
-            radius: ["40%", "70%"],
-            top: "16%",
-            right: "5%",
-            left: "5%",
-            bottom: "2%",
-            avoidLabelOverlap: false,
-            label: {
-              show: true,
-              // fontSize: 20,
-              position: "outside",
-              fontWeight: "bold",
-              alignTo: "edge",
-              margin: "1px",
-              fontSize: 12,
-              // color:'#fff'
-            },
-            emphasis: {
-              // label: {
-              //   show: true,
-              //   fontSize: 40,
-              //   fontWeight: "bold",
-              // },
-            },
-            labelLine: {
-              show: false,
-              distanceToLabelLine: 0,
+    data () {
+        return {}
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
             },
-            data: this.info.data,
-          },
-        ],
-      };
-      option && myChart.setOption(option);
+            deep: true
+        }
     },
-  },
-  watch: {
-    info: {
-      handler(newVal, oldVal) {
-        this.getMiddleLeft();
-      },
-      deep: true,
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
     },
-  },
-};
+    methods: {
+        getMiddleLeft () {
+            const chartDom = document.getElementById(this.info.config.idSelector)
+            var myChart = echarts.init(chartDom)
+            var option
+            option = {
+                title: {
+                    show: true,
+                    left: 'center',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 20,
+                        fontWeight: '600'
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: ''
+                },
+                color: this.info.color,
+                legend: {
+                    left: 'center',
+                    // show: true,
+                    z: 2,
+                    //   top: "2%",
+                    // orient: 'vertical',
+                    //   left: "",
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                label: {
+                    formatter: '{b}:{d}%'
+                },
+                series: [
+                    {
+                        // name: "Access From",
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        top: '16%',
+                        right: '5%',
+                        left: '5%',
+                        bottom: '2%',
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: true,
+                            // fontSize: 20,
+                            position: 'outside',
+                            fontWeight: 'bold',
+                            alignTo: 'edge',
+                            margin: '1px',
+                            fontSize: 12
+                            // color:'#fff'
+                        },
+                        emphasis: {
+                            // label: {
+                            //   show: true,
+                            //   fontSize: 40,
+                            //   fontWeight: "bold",
+                            // },
+                        },
+                        labelLine: {
+                            show: false,
+                            distanceToLabelLine: 0
+                        },
+                        data: this.info.data
+                    }
+                ]
+            }
+            option && myChart.setOption(option)
+        }
+    }
+}
 </script>
 <style lang="scss" scoped>
 .pieView {
@@ -125,4 +133,4 @@ export default {
   overflow: hidden;
   background-color: rgba(6, 30, 93, 0.5);
 }
-</style>
+</style>