提交

src/views/modules/knowledge/statistics/components/BarEchart.vue

@@ -0,0 +1,104 @@
+<template>
+  <common-echart :option="option" :width="width" :height="height"></common-echart>
+</template>
+
+<script>
+/* 组件 */
+import commonEchart from "./commonEchart";
+export default {
+  components: {
+    commonEchart
+  },
+  props: {
+    barXData: {
+      type: Array,
+      default: () => []
+    },
+    barData: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {   
+    return {}
+  },
+  computed: {
+    option() {
+      return {
+        // title: {
+        //   text: '用户总访问量-10000',
+        //   top: 20,
+        //   left: '5%'
+        // },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          offset: 10,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: {
+          type: 'value',
+          offset: 15,
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: [0, 200, 901, 300, 1290, 133,1, 200, 901, 300, 1290, 0],
+            type: 'line',
+            smooth: true,
+            symbolSize: 0,
+            itemStyle: {
+              normal: {
+                color: '#76bdff',
+                borderWidth: 0,
+                areaStyle: {
+                  type: 'default',
+                  opacity: 1
+                }
+              }
+            }
+          }
+        ]
+        // xAxis: {
+        //   type: "category",
+        //   data: this.barXData
+        // },
+        // yAxis: {
+        //   type: "value"
+        // },
+        // series: [
+        //   {
+        //     data: this.barData,
+        //     type: "bar",
+        //     showBackground: true,
+        //     backgroundStyle: {
+        //       color: "rgba(180, 180, 180, 0.2)"
+        //     }
+        //   }
+        // ]
+      };
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/knowledge/statistics/components/RoseEchart.vue

@@ -0,0 +1,55 @@
+<template>
+  <common-echart :option="option" :height="height"></common-echart>
+</template>
+
+<script>
+/* 组件 */
+import commonEchart from "./commonEchart";
+export default {
+  components: {
+    commonEchart
+  },
+  props: {
+    roseData: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    option() {
+      return {
+        color: ["#ffffff","#1890ff","#badaf7","#7dc1ff"],
+        series: [
+          {
+            type: 'pie',
+            radius: '70%',
+            center: ['50%', '50%'],
+            data: [
+              { value: 19, name: '19% 知识仓库' },
+              { value: 40, name: '40% 知识地图' },
+              { value: 20, name: '20% 知识专辑' },
+              { value: 21, name: '21% 搜索服务' }
+            ],
+            roseType: 'radius',
+            labelLine: {
+              lineStyle: {
+                color: '#000'
+              },
+              smooth: 0.2,
+              length: 10,
+              length2: 20
+            }
+          }
+        ],
+        animation: false
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/knowledge/statistics/components/commonEchart.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    :style="{ width: width, height: height }"
+    ref="baseEchartRef"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "300px"
+    },
+    option: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  mounted() {
+    this._initEchart()
+  },
+  computed:{
+		listenfooterInfo() {
+			return this.$store.state.appSetting.collapsed;
+		}
+  },
+  methods: {
+    _initEchart() {
+      const echartInstance = echarts.init(this.$refs.baseEchartRef);
+      echartInstance.setOption(this.option);
+      // 监听window尺寸的变化
+      window.addEventListener("resize", () => {
+        echartInstance.resize();
+      });
+    }
+  },
+  watch: {
+    // option: {
+    //   handler(newVal,oldVal){
+    //     this._initEchart()
+    //   },
+    //   immediate: true,  
+    //   deep: true
+    // },
+    listenfooterInfo: {
+      handler(newVal,oldVal) { //特别注意，不能用箭头函数，箭头函数，this指向全局
+        this._initEchart()
+      },
+      immediate: true,  //刷新加载 立马触发一次handler
+      deep: true  // 可以深度检测到 obj 对象的属性值的变化
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>

src/views/modules/knowledge/statistics/synthesize.vue

@@ -0,0 +1,116 @@
+<template>
+  <rx-layout>
+    <div slot="center" style>
+      <rx-fit>   
+        <div slot="toolheader" border="false" foldbtn="false">
+          <div class="mainContent">
+            <div class="body">
+              <div class="content">
+                <div>
+                  <span>综合统计</span>
+                  <span>更新时间: 2021-10-15 10:00:00</span>
+                </div>
+                <div>
+                  <span>按月查看</span>
+                  <span>按年查看</span>
+                  <span>查看全部</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>    
+        <div style="width:100%;height:320px;display:flex;justify-content: space-between;">
+          <div style="width:58%;background-color: #fff;position: relative;display: flex;align-items: flex-end;">
+            <div style="position:absolute;top: 8%;left: 4%;font-weight: bold;">用户访问总量-10000
+              <span style="position:absolute;top:25%;font-size:12px;font-weight: 400;margin-left: 8px;">(uv)</span>
+            </div>
+            <bar-echart height="300px"></bar-echart>
+          </div>
+          <div  style="width:40%;background-color: #fff;position: relative;display: flex;align-items: flex-end;">
+            <div style="position:absolute;top: 8%;left: 4%;font-weight: bold;">
+              各版块访问量分布
+              <span style="position:absolute;top:25%;font-size:12px;font-weight: 400;margin-left: 8px;">(pv)</span>
+            </div>
+            <rose-echart height="300px"></rose-echart>
+          </div>
+        </div>
+      </rx-fit>
+    </div> 
+  </rx-layout>
+</template>
+
+<script>
+import barEchart from './components/BarEchart';
+import roseEchart from './components/RoseEchart';
+export default {
+  name: 'synthesize',
+  components: {
+    barEchart,
+    roseEchart
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@gary:  #f8f8f8;
+@white: #fff;
+.rx-fit {
+  padding: 20px 40px!important;
+  background: @gary;
+  overflow-y: auto!important;
+  display: block!important;
+  .fit-header {
+    .mainContent {
+      width: 100%;
+      .body {
+        background: @white;
+        padding: 10px 40px 10px 20px;
+        .content {
+          background: @white;
+          height:40px;
+          display:flex;
+          justify-content: space-between;
+          align-items: center;
+
+          >div:first-child {
+          
+            span:nth-child(1) {
+              font-size: 16px;
+              font-weight: bold;
+            }
+
+            span:nth-child(2) {
+              margin-left:20px;
+              font-size: 8px;
+              color: #b1b1b1;
+            }
+          }
+
+          >div:last-child {
+            color: #b1b1b1;
+            font-size: 13px;
+
+            span+span {
+              margin-left:30px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped>
+/deep/   .divdefault {
+  position: inherit!important;
+  overflow: inherit!important;
+}
+</style>