增加文件统计前端

src/views/filestatistic/PieChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/views/dashboard/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    /**
+     * 饼图数据
+     */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 底部提示数据
+     */
+    legendData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 底部提示距底部距离
+     */
+    legendBottom: {
+      type: String,
+      default: '5'
+    },
+    roseType: {
+      type: String,
+      default: 'radius'
+    },
+    radius: {
+      type: Array | String | Number,
+      default: 50
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: this.legendBottom,
+          data: this.legendData
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            roseType: this.roseType,
+            radius: this.radius,
+            center: ['50%', '50%'],
+            data: this.data,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>