Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test

src/components/statistics/e-bar.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="e-bar">
+    <div :id="gid" class="" style="height:450px;"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/tooltip';
+export default {
+  name: 'e-bar',
+  props: {
+    data: { type: [Object, Array], default: () => [] },
+    axis: { type: Object, default: () => {} },
+    gid: { type: String, default: `${new Date().getTime()}` },
+    horizontal: { type: Boolean, default: true },
+  },
+  components: {},
+  data: function() {
+    return {
+      chart: null,
+      list: undefined,
+    };
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      let e = document.getElementById(this.gid);
+      if (!e) {
+        console.warn('没有找到指定渲染容器');
+        return;
+      }
+      if (!this.list) {
+        //未获得数据
+        return;
+      }
+      let { x, y, xAlias, yAlias } = this.axis;
+      let legend = this.list.map(i => i[x]);
+      this.chart = echarts.init(document.getElementById(this.gid));
+      let xAxis = {};
+      let yAxis = {};
+      let data = this.list.map(i => i[y]);
+      if (this.horizontal) {
+        xAxis = { data: legend };
+        yAxis = { type: y };
+      } else {
+        yAxis = { data: legend };
+        xAxis = { type: y };
+      }
+      const option = {
+        title: {},
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a}<br/>{b} : {c} ',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          data: [yAlias],
+        },
+        xAxis: xAxis,
+        yAxis: yAxis,
+        barMaxWidth: '30%',
+        series: [
+          {
+            name: yAlias,
+            type: 'bar',
+            data: data,
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#939393',
+              },
+            },
+          },
+        ],
+      };
+      this.chart.setOption(option);
+    },
+  },
+  watch: {
+    data: {
+      handler(val) {
+        if (val.length > 0) this.$set(this, `list`, val);
+      },
+      immediate: true,
+      deep: true,
+    },
+    list: {
+      handler(val) {
+        if (val) this.$nextTick(() => this.init());
+      },
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/statistics/e-pie.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="down-pie">
+    <div :id="gid" class="" style="height:450px;"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/tooltip';
+export default {
+  name: 'downPie',
+  props: {
+    data: { type: Array, default: () => [] },
+    axis: { type: Object, default: () => {} }, //{x:x轴字段名; xAlias:x轴名称; y:y轴字段名; yAlias:y轴名称}
+    gid: { type: String, default: `${new Date().getTime()}` },
+    isring: { type: Boolean, default: false },
+    tipTitle: { type: String, default: '' },
+  },
+  components: {},
+  data: () => {
+    return {
+      chart: null,
+      list: undefined,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      let e = document.getElementById(this.gid);
+      if (!e) {
+        console.warn('没有找到指定渲染容器');
+        return;
+      }
+      if (!this.list) {
+        //未获得数据
+        return;
+      }
+      let legend = this.list.map(i => i[this.axis.x]);
+      this.chart = echarts.init(document.getElementById(this.gid));
+      let radius;
+      let position;
+      let emphasis = {};
+      if (this.isring) {
+        position = 'center';
+        radius = ['40%', '75%'];
+        emphasis = {
+          label: {
+            show: this.isring,
+            fontSize: '20',
+            fontWeight: 'bold',
+            formatter: '{a}\n{b} : {c} ({d}%)',
+          },
+        };
+      } else {
+        position = 'outside';
+        radius = ['0', '75%'];
+      }
+      const option = {
+        title: {},
+        tooltip: { trigger: 'item', formatter: '{a}<br/>{b} : {c} ({d}%)' },
+        legend: {
+          data: legend,
+        },
+        series: [
+          {
+            name: this.tipTitle,
+            avoidLabelOverlap: !this.isring,
+            emphasis: emphasis,
+            label: {
+              show: !this.isring,
+              position: position,
+            },
+            type: 'pie',
+            radius: radius,
+            data: this.list,
+            animationType: 'scale',
+          },
+        ],
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { readOnly: false },
+            saveAsImage: {},
+          },
+        },
+      };
+      this.chart.setOption(option);
+    },
+  },
+  watch: {
+    data: {
+      handler(val) {
+        if (val.length > 0) this.$set(this, `list`, val);
+      },
+      immediate: true,
+      deep: true,
+    },
+    list: {
+      handler(val) {
+        if (val) this.$nextTick(() => this.init());
+      },
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.rightData {
+  padding: 0 30px;
+  height: 391px;
+  overflow: hidden;
+}
+/deep/.el-table td {
+  padding: 8px 0;
+}
+/deep/.el-table th {
+  padding: 8px 0;
+}
+</style>

src/views/hallList/zongjie.vue

@@ -64,13 +64,13 @@
             <el-col :span="24" class="three">
               <el-tabs v-model="act">
                 <el-tab-pane name="0" label="产品发布统计">
-                  <pie :data="productList" :axis="proAxis" gid="pie0" v-if="act == 0"></pie>
+                  <pie :data="productList" :axis="proAxis" tipTitle="发布的产品类型" gid="pie0" v-if="act == 0"></pie>
                 </el-tab-pane>
                 <el-tab-pane name="1" label="人员参会统计">
-                  <donut :data="personList" :axis="perAxis" gid="donut1" v-if="act == 1"></donut>
+                  <pie :data="personList" :axis="perAxis" :isring="true" tipTitle="参会身份" gid="donut1" v-if="act == 1"></pie>
                 </el-tab-pane>
                 <el-tab-pane name="2" label="交易统计">
-                  <bar :data="transList" :axis="transAxis" gid="bar2" v-if="act == 2"></bar>
+                  <bar :data="transList" :axis="transAxis" :horizontal="false" gid="bar2" v-if="act == 2"></bar>
                 </el-tab-pane>
               </el-tabs>
             </el-col>
@@ -84,16 +84,15 @@
 <script>
 import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
-import pie from '@c/statistics/pie.vue';
-import bar from '@c/statistics/bar.vue';
-import donut from '@c/statistics/donut.vue';
+import pie from '@c/statistics/e-pie.vue';
+import bar from '@c/statistics/e-bar.vue';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: transaction } = createNamespacedHelpers('transaction');
 const { mapActions: marketproduct } = createNamespacedHelpers('marketproduct');
 export default {
   name: 'zongjie',
   props: {},
-  components: { pie, donut, bar }, //
+  components: { pie, bar }, //
   data: () => ({
     act: '0',
     productList: [],
@@ -150,7 +149,7 @@ export default {
       if (this.$checkRes(res)) this.proPerson(res.data);
       if (this.$checkRes(resPro)) this.proProduct(resPro.data);
       if (this.$checkRes(resTran)) this.proTrans(resTran.data);
-      this.zjinfo.top = res.data.title;
+      // this.zjinfo.top = res.data.title;
     },
     proProduct(data) {
       let garr = _.groupBy(data, 'totaltype');
@@ -201,11 +200,11 @@ export default {
       });
       //查类型,个人,机构,专家,没有的填0
       let r = res.some(f => f.type == 0);
-      if (!r) res.push({ value: 0, name: '正在洽谈', type: 0 });
+      if (!r) res.push({ value: 2, name: '正在洽谈', type: 0 });
       r = res.some(f => f.type == 1);
-      if (!r) res.push({ value: 0, name: '达成意向', type: 1 });
+      if (!r) res.push({ value: 3, name: '达成意向', type: 1 });
       r = res.some(f => f.type == 2);
-      if (!r) res.push({ value: 0, name: '对接完成', type: 2 });
+      if (!r) res.push({ value: 5, name: '对接完成', type: 2 });
       this.$set(this, `transList`, res);
     },
   },