工具管理、技术交流平台、统计分析、消息中心静态页面调整

src/views/statistic/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: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: this.roseType,
+            radius: this.radius,
+            center: ['50%', '50%'],
+            data: this.data,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/statistic/index.vue

@@ -8,13 +8,33 @@
             <el-col :span="12">
               <el-card>
                 <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
-                <div class="tjbox2"><img src="images/tjt1.jpg" /></div>
+                <!--  -->
+                <div class="tjbox2">
+                  <PieChart
+                    height="207px"
+                    :data="toolTypeData"
+                    :legendData="toolTypeLegendData"
+                    legendBottom="5"
+                    chartRef="toolType"
+                    :radius="50"
+                  />
+                </div>
               </el-card><!--el-card-->
             </el-col><!--el-col-->
             <el-col :span="12">
               <el-card>
-                <div slot="header" class="clearfix"><span class="tline">工具使用情况</span></div>
-                <div class="tjbox2"><img src="images/tjt2.jpg" /></div>
+                <div slot="header" class="clearfix"><span class="tline">工具状态统计</span></div>
+                <div class="tjbox2">
+                  <PieChart
+                    height="207px"
+                    :data="toolStatusData"
+                    :legendData="toolStatusLegendData"
+                    legendBottom="5"
+                    :radius="['40%', '70%']"
+                    chartRef="toolStatus"
+                  />
+                  <!-- <img src="images/tjt2.jpg" /> -->
+                </div>
               </el-card><!--el-card-->
             </el-col><!--el-col-->
           </el-row><!--el-row-->
@@ -22,13 +42,24 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-card>
-                <div slot="header" class="clearfix"><span class="tline">工具归属单位分布情况</span></div>
-                <div class="tjbox2"><img src="images/tjt5.jpg" /></div>
+                <div slot="header" class="clearfix"><span class="tline">工具来源统计</span></div>
+                <div class="tjbox2">
+                  <PieChart
+                    height="207px"
+                    :data="toolSourceData"
+                    :legendData="toolSourceLegendData"
+                    legendBottom="5"
+                    :radius="['40%', '70%']"
+                    chartRef="toolStatus"
+                  />
+                </div>
               </el-card><!--el-card-->
             </el-col><!--el-col-->
-            <el-col :span="12">
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
               <el-card>
-                <div slot="header" class="clearfix"><span class="tline">近一年工具使用数量统计</span></div>
+                <div slot="header" class="clearfix"><span class="tline">工具下载</span></div>
                 <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
               </el-card><!--el-card-->
             </el-col><!--el-col-->
@@ -77,19 +108,42 @@
 </template>
 
 <script>
-  export default {
-    name: 'statistic',
-    data() {
-      return {
-        activeName: 'first'
-      };
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      }
+import PieChart from './PieChart'
+export default {
+  name: 'statistic',
+  components: {
+    PieChart,
+  },
+  data() {
+    return {
+      activeName: 'first',
+      toolTypeData: [
+        { value: 320, name: '检测型' },
+        { value: 240, name: '服务型' }
+      ],
+      toolTypeLegendData:['检测型', '服务型'],
+      toolStatusData: [
+        { value: 212, name: '已保存' },
+        { value: 76, name: '审批中' },
+        { value: 32, name: '审批不通过' },
+        { value: 971, name: '已发布' }
+      ],
+      toolStatusLegendData: ['已保存','审批中','审批不通过','已发布'],
+      toolSourceData: [
+        { value: 20, name: 'QQ' },
+        { value: 60, name: '微信' },
+        { value: 18, name: '官网' },
+        { value: 47, name: '熟人介绍' }
+      ],
+      toolSourceLegendData: ['QQ', '微信', '官网', '熟人介绍']
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
     }
   }
+}
 </script>
 
 <style scoped>