add some reports

src/components/HeaderCell.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="header-cell">
-    <slot></slot>
+    <div class="body">
+      <slot></slot>
+    </div>
+    <div class="action">
+
+    </div>
     <slot name="action"></slot>
   </div>
 </template>
@@ -14,13 +19,14 @@ export default {
 <style lang="scss" scoped>
 .header-cell {
   display: flex;
+  align-items: center;
 
-  &:first-child {
-    flex: auto;
+  .action {
+    flex: none;
   }
 
-  &>* {
-    flex: none;
+  .body {
+    flex: auto;
   }
 }
 </style>

src/components/charts/XLine.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-chart :options="options" />
+  <div ref="echart" ></div>
 </template>
 <script>
-import ECharts from 'vue-echarts'
+import Echarts from "echarts";
 
 export default {
   name: "XLine",
@@ -12,11 +12,9 @@ export default {
       default: () => {},
     },
   },
-  components: {
-    'v-chart': ECharts,
-  },
   data() {
     return {
+      chart: undefined,
       defaultOpts: {
         title: {
           text: "新增用户"
@@ -57,12 +55,38 @@ export default {
       }
     };
   },
-  computed: {
-    options() {
-      return {
-        ...this.defaultOpts,
-        ...(this.value || {}),
+  watch: {
+    value: {
+      handler(val) {
+        this.renderChart(val)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {
+    this.renderChart(this.value || {})
+  },
+  methods: {
+    initChats () {
+      if (!this.chart && this.$refs.echart) {
+        this.chart = Echarts.init(this.$refs.echart);
+      }
+
+      if (this.chart) {
+        return Promise.resolve(this.chart)
+      } else {
+        return Promise.reject()
       }
+    },
+    renderChart(val) {
+      this.initChats().then((echart) => {
+        // 绘制图表
+        echart.setOption({
+          ...this.defaultOpts,
+          ...val
+        });
+      })
     }
   }
 };

src/config/api.js

@@ -337,14 +337,18 @@ const apis = {
       method:'get',
       url: `${commPrefix}/indexStatistical`
     },
-      userResource: {
-          method:'get',
-          url: `${commPrefix}/selectUserResource`
-      },
-      newsUserCount: {
-          method:'get',
-          url: `${commPrefix}/selectNewsUserCount`
-      },
+    userResource: {
+        method:'get',
+        url: `${commPrefix}/selectUserResource`
+    },
+    newsUserCount: {
+        method:'get',
+        url: `${commPrefix}/selectNewsUserCount`
+    },
+    userConversion: {
+      method:'get',
+      url: `${commPrefix}/selectConversion`
+    },
   },
 }
 export default apis

src/store/modules/indexEcharts.js

@@ -19,6 +19,23 @@ export default {
     setDetailNull ({ commit }) {
       commit('updateList', {})
     },
+
+    getUserConversionRate(_, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userConversion,
+          params: payload,
+        }).then((data) => {
+          resolve(data)
+        }).catch((err) => {
+          const message = err.message || err.msg
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+
     getIndexEcharts ({ commit }, payload) {
       return new Promise((resolve, reject) => {
         request({

src/views/indexEcharts/components/IntentionalCustomers.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="chart-box">
+    <header-cell>
+      <h3>意向客户</h3>
+      <select-building slot="action"></select-building>
+    </header-cell>
+
+    <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
+      <el-table-column label="用户姓名" prop="name"></el-table-column>
+      <el-table-column label="手机号" prop="phone"></el-table-column>
+      <el-table-column label="意向楼盘" prop="building"></el-table-column>
+      <el-table-column label="意向值" prop="num"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IntentionalCustomers',
+  props: ['value'],
+  components: {
+    HeaderCell: () => import('@/components/HeaderCell'),
+  },
+  computed: {
+    tableData() {
+      return this.value || []
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/NewUsers.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="chart-box">
+    <h3>新增客户 <small>最近七天</small></h3>
+    <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
+      <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NewUsers',
+  props: ['value'],
+  data () {
+    return {
+      tableTitle: [ '类型' ],
+    }
+  },
+  computed: {
+    tableData () {
+      return (this.value || []).reduce((acc, item, index) => {
+          const { date, userCount, authorizationCount } = item
+          const row1 = {
+            ...acc[0],
+            [`${date}`]: userCount,
+          }
+          const row2 = {
+            ...acc[1],
+            [`${date}`]: authorizationCount,
+          }
+
+          this.tableTitle = this.tableTitle.concat(`${date}`) // eslint-disable-line
+
+          return [row1, row2];          
+        }, [{ label: '新增用户', }, { label: '授权注册', } ])
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UserActive.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="chart-box">
+    <h3>活跃用户数</h3>
+    <v-chart class="chart" :options="options" />
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+
+export default {
+  name: 'UserActive',
+  components: {
+    'v-chart': ECharts,
+  },
+  props: [ 'value' ],
+  data () {
+    return {
+      defaultOpt: {
+        legend: { show: false },
+        color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
+        tooltip: {},
+        xAxis: { type: 'time' },
+        yAxis: {},
+      },
+    }
+  },
+  computed: {
+    options () {
+      return {
+        ...this.defaultOpt,
+        series: {
+          type: 'bar',
+          name: '活跃用户',
+          data: (this.value || []).map(x => ([ x.date,!x.activityCount ? 0 : x.activityCount ]))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UserBehavior.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="chart-box">
+    <header-cell>
+      <h3>用户行为 <small>最近七天</small></h3>
+      <select-building slot="action"></select-building>
+    </header-cell>
+    <v-chart class="chart" :options="options" />
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import dayjs from 'dayjs'
+import HeaderCell from '@/components/HeaderCell'
+
+export default {
+  name: 'UserBehavior',
+  components: {
+    'v-chart': ECharts,
+    HeaderCell,
+  },
+  props: [
+    'value',
+  ],
+  data() {
+    return {
+      baseOpt: {
+        legend: {},
+        color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
+        tooltip: {},
+        xAxis: { type: 'time' },
+        yAxis: {},
+      },
+    }
+  },
+  computed: {
+    options() {
+      const seriesMaker = (this.value || []).reduce((series, item) => {
+        let { date, activityCount, activity } = item
+        date = dayjs(date).format('YYYY-MM-DD')
+        if (!activityCount) activityCount = 0
+
+        // 使用对象, 可以去重
+        series[`${activity}`] = (series[`${activity}`] || []).concat([[ date, activityCount ]])
+
+        return series;
+      }, {})
+
+      return {
+        ...this.baseOpt,
+        series: Object.keys(seriesMaker).map(x => {
+          return {
+            type: 'line',
+            name: x,
+            data: seriesMaker[x],
+          }
+        }),
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UserCity.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="chart-box">
+    <h3>城市分布</h3>
+    <v-chart class="chart" :options="options" />
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
+
+export default {
+  name: 'UserCity',
+  components: {
+    'v-chart': ECharts,
+  },
+  props: [
+    'value',
+  ],
+  data() {
+    return {
+      defaultOpt: {
+        legend: {},
+        color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
+        tooltip: {},
+        series: {
+          type: 'pie',
+          name: '城市分布',
+        }
+      },
+    }
+  },
+  computed: {
+    options() {
+      return {
+        ...this.defaultOpt,
+        series: {
+          ...this.defaultOpt.series,
+          data: this.value || [],
+        },
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UserConversion.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="chart-box">
+    <header-cell>
+      <h3>转化率</h3>
+      <el-select v-model="theStatis" @change="getData" slot="action">
+        <el-option v-for="item in statisTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
+      </el-select>
+    </header-cell>
+    <v-chart class="chart" :options="options" />
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts");
+
+export default {
+  name: 'UserConversion',
+  components: {
+    'v-chart': ECharts,
+    HeaderCell: () => import('@/components/HeaderCell'),
+  },
+  props: [ 'value' ],
+  data () {
+    return {
+      defaultOpt: {
+        legend: {},
+        color: ['#8B7FE2', '#DDDDDD'],
+        tooltip: {},
+        series: {
+          type: 'pie',
+          name: '转化率',
+          radius: ['50%', '70%'],
+        }
+      },
+
+      theStatis : 'building_save',
+      theCurrent: [],
+      statisTypes: [
+        { label: '项目收藏', value: 'building_save' },
+        { label: '项目转发', value: 'building_share' },
+        { label: '活动收藏', value: 'activity_save' },
+        { label: '活动转发', value: 'activity_share' },
+        { label: '资讯收藏', value: 'news_save' },
+        { label: '资讯转发', value: 'news_share' },
+        { label: '活动报名', value: 'activity_sign' },
+        { label: '授权手机', value: 'authorization_phone' },
+      ],
+      // 各统计结果
+      dataset: {},
+    }
+  },
+  computed: {
+    options () {
+      return {
+        ...this.defaultOpt,
+        series: {
+          ...this.defaultOpt.series,
+          data: this.theCurrent,
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['getUserConversionRate']),
+    getData(e) {
+      if (!this.dataset[e]) {
+        this.getUserConversionRate({ conversion: e }).then(this.setDataset)
+      } else {
+        this.theCurrent = this.dataset[e]
+      }
+    },
+    setDataset(data) {      
+      const { pvNum, ...other } = data['data_count']
+
+      // 获取第一个值
+      let num = 0
+      for (let v of Object.keys(other)) {
+        num = other[v]
+        break
+      }
+
+      if (pvNum < num) {
+        this.theCurrent = []
+      } else {
+        this.theCurrent = [
+          { name: this.getStatisName(), value: num },
+          { name: '其余', value: pvNum - num },
+        ]
+      }
+      
+      this.dataset[this.theStatis] = this.theCurrent
+    },
+    getStatisName() {
+      return this.statisTypes.filter(x => x.value === this.theStatis)[0].label
+    }
+  },
+  mounted () {
+    this.getUserConversionRate({ conversion: this.theStatis }).then(this.setDataset)
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UserSex.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="chart-box">
+    <h3>性别比例</h3>
+    <v-chart class="chart" :options="options" />
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
+
+export default {
+  name: 'UserSex',
+  components: {
+    'v-chart': ECharts,
+  },
+  props: [
+    'value',
+  ],
+  data() {
+    return {
+      defaultOpt: {
+        legend: {},
+        color: ['#6A96F8', '#F5749E'],
+        tooltip: {},
+        series: {
+          type: 'pie',
+          name: '性别比例',
+          radius: ['50%', '70%'],
+        }
+      },
+    }
+  },
+  computed: {
+    options() {
+      return {
+        ...this.defaultOpt,
+        series: {
+          ...this.defaultOpt.series,
+          data: this.value || [],
+        },
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/UsrSRCLineAndPie.vue

@@ -1,26 +1,108 @@
 <template>
-  <header-cell>
-    <div>
-      <x-line ></x-line>
-    </div>
-    <div slot="action">
-
-    </div>
-  </header-cell>
+  <div class="chart-box">
+    <h3>用户来源 <small>最近七天</small></h3>
+    <v-chart class="chart" :options="options" />
+  </div>
 </template>
 
 <script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+
 export default {
   name: 'UsrSRCLineAndPie',
   components: {
-    HeaderCell: () => import('@/components/HeaderCell'),
-    XLine: () => import('@/components/XLine'),
+    'v-chart': ECharts,
   },
+  props: [
+    'value',
+  ],
   data () {
     return {
-      title: { text: '用户来源', subtext: '最近七天' }
+      baseOpts: {
+        legend: {},
+        color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+        tooltip: {},
+        yAxis: {},
+        grid: [
+          { right: '50%' },
+          { right: '5%' }
+        ],
+      },
     }
-  }
+  },
+  computed: {
+    // 柱图
+    barOptions () {
+      const source = (this.value || {}).columnar || [];
+      return {
+        xAxis: { type: 'category' },
+        legend: {
+          left: '20%',
+          data: ['所有用户', '注册用户'],
+        },
+        series: [
+          { type: 'bar', name: '所有用户', datasetIndex: 0 },
+          { type: 'bar', name: '注册用户' },
+        ],
+        dataset: {
+          id: 'bar',
+          dimensions: [ 'fromName', 'userCount', 'registered' ],
+          source: source,
+        },
+      }
+    },
+    // 饼图
+    pieOptions () {
+      const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = (this.value || {}).pie || {};
+      return {
+        xAxis: {},
+        legend: {
+          left: '70%',
+          data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
+        },
+        series: [
+          {
+            type: 'pie',
+            datasetIndex: 1,
+            center: ['75%', '50%'],
+            radius: [0, '50%'],
+          },
+        ],
+        dataset: {
+          id: 'pie',
+          source: [
+            { form: '来源置业顾问', value: person_realty_consultant },
+            { form: '来源全民经纪人', value: person_estate_agent },
+            { form: '自主进入', value: person_null },
+          ]
+        },
+      }
+    },
+    options() {
+      return {
+        ...this.baseOpts,
+        xAxis: [
+          this.barOptions.xAxis,
+          this.pieOptions.xAxis,
+        ],
+        legend: [
+          this.barOptions.legend,
+          this.pieOptions.legend,
+        ],
+        series: [
+          ...this.barOptions.series,
+          ...this.pieOptions.series,
+        ],
+        dataset: [
+          this.barOptions.dataset,
+          this.pieOptions.dataset,
+        ],
+      }
+    }
+  },
 }
 </script>
 
+<style lang="scss" src="./style.scss"></style>

src/views/indexEcharts/components/VBar.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-chart :options="opts" />
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/bar'
+
+const times = (x) => {
+  const arr = []
+
+  for (let i = 0; i ++; i < x) {
+    arr.push(undefined)
+  }
+
+  return arr
+}
+
+export default {
+  name: 'VBar',
+  props: {
+    options: Object,
+    labels: Array,
+    num: {
+      type: Number,
+      default: 1,
+    }
+  },
+  components: {
+    'v-chart': ECharts,
+  },
+  data() {
+    return {
+      defaultOpts: {
+        legend: {},
+        tooltip: {},
+        xAxis: {},
+        yAxis: {},
+      }
+    };
+  },
+  computed: {
+    opts() {
+      let series = (this.labels || []).map((it, inx) => {
+        return {
+          type: 'bar',
+          name: it,
+        }
+      })
+
+      if (!series || !series.length) {
+        series = times(this.num).map(() => ({ type: 'bar' }))
+      }
+
+      return {
+        ...this.defaultOpts,
+        series,
+        ...(this.options || {}),
+      }
+    }
+  }
+}
+</script>

src/views/indexEcharts/components/VLine.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-chart :options="opts" />
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
+
+const times = (x) => {
+  const arr = []
+
+  for (let i = 0; i ++; i < x) {
+    arr.push(undefined)
+  }
+
+  return arr
+}
+
+export default {
+  name: 'VLine',
+  props: {
+    options: Object,
+    labels: Array,
+    num: {
+      type: Number,
+      default: 1,
+    }
+  },
+  components: {
+    'v-chart': ECharts,
+  },
+  data() {
+    return {
+      defaultOpts: {
+        legend: {},
+        tooltip: {},
+        xAxis: {},
+        yAxis: {},
+      }
+    };
+  },
+  computed: {
+    opts() {
+      let series = (this.labels || []).map((it, inx) => {
+        return {
+          type: 'line',
+          name: it,
+        }
+      })
+
+      if (!series || !series.length) {
+        series = times(this.num).map(() => ({ type: 'line' }))
+      }
+
+      return {
+        ...this.defaultOpts,
+        series,
+        ...(this.options || {}),
+      }
+    }
+  }
+}
+</script>

src/views/indexEcharts/components/style.scss

@@ -0,0 +1,18 @@
+.chart-box {
+  background-color: #fff;
+  padding: 16px;
+
+  h1,h2,h3,h4,h5 {
+    margin: 0;
+  }
+  
+  small {
+    color: #666;
+    font-weight: 400;
+  }
+
+  .chart {
+    width: 100% !important;
+    // height: 100%;
+  }
+}

src/views/indexEcharts/index.vue

@@ -11,51 +11,24 @@
       <card label="最近7天新增" @click="toNewUsers()" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
     </el-col>
   </el-row>
-  <p class="title under-line" @click="toUserSource()">用户来源</p>
-  <span class="title-desc under-line" @click="toUserSource()">最近7天</span>
-  <el-row :gutter="20" :style="{ height: '560px',margin:'20px 0',border:'1px solid #eee',borderRadius:'5px'}">
-    <el-col :span="14">
-      <div class="grid-content" ref="firstChart"  id="firstChart"  :style="{ height: '500px' ,padding:'20px 10px'}" >
-      </div>
-    </el-col>
-    <el-col :span="10" :style="{ height: '560px',borderLeft:'1px solid #eee'}">
-      <div class="grid-content" ref="secondChart"  id="secondChart"  :style="{ height: '500px',padding:'20px 10px'}" >
-      </div>
-    </el-col>
-  </el-row>
-  <p class="title under-line" @click="toBehaviorAnalysis()">用户行为</p>
-  <span class="title-desc under-line" @click="toBehaviorAnalysis()">最近7天</span>
-  <!-- <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div> -->
-   <x-line :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
+  <user-source :value="userSourceData"></user-source>
+  <user-behavior class="marginTB" :value="userBehaviorData" @click="toBehaviorAnalysis()"></user-behavior>
  <el-row :gutter="20">
     <el-col :span="12">
-      <div class="grid-content" ref="fourthChart"  id="fourthChart"  :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
+      <user-active :value="userActiveData"></user-active>
     </el-col>
     <el-col :span="12">
-      <div class="grid-content" ref="fifthChart"  id="fifthChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
-      </div>
+      <user-conversion></user-conversion>
     </el-col>
     <el-col :span="12">
-      <div class="grid-content" ref="sixthChart"  id="sixthChart" :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
-      </div>
+      <user-sex :value="userSexData"></user-sex>
     </el-col>
     <el-col :span="12">
-      <div class="grid-content" ref="seventhChart"  id="seventhChart" :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
-      </div>
+      <user-city :value="userCityData"></user-city>
     </el-col>
   </el-row>
-  <p class="title under-line" @click="toNewUsers()">新增用户</p>
-  <span class="title-desc under-line" @click="toNewUsers()">最近7天</span>
-  <el-table :data="tableData"  border  center  style="width: 100%">
-    <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
-  </el-table>
-  <p class="title">意向客户</p>
-  <el-table :data="tableData2"  border  center  style="width: 100%">
-    <el-table-column label="用户姓名" prop="name"></el-table-column>
-    <el-table-column label="手机号" prop="phone"></el-table-column>
-    <el-table-column label="意向楼盘" prop="building"></el-table-column>
-    <el-table-column label="意向值" prop="num"></el-table-column>
-  </el-table>
+  <new-users class="marginTB" :value="newUserData"></new-users>
+  <intentional-customers  class="marginTB"></intentional-customers>
 </div>
 </template>
 
@@ -71,32 +44,24 @@ const {
 
 export default {
   components: {
-    XLine: () => import('@/components/charts/XLine.vue'),
     Card: () => import('./components/Card'),
+    UserSource: () => import('./components/UsrSRCLineAndPie'),
+    UserBehavior: () => import('./components/UserBehavior'),
+    UserActive: () => import('./components/UserActive'),
+    UserConversion: () => import('./components/UserConversion'),
+    UserSex: () => import('./components/UserSex'),
+    UserCity: () => import('./components/UserCity'),
+    NewUsers: () => import('./components/NewUsers'),
+    IntentionalCustomers: () => import('./components/IntentionalCustomers'),
   },
   data() {
     return {
-      // 新增用户
-      tableData: [
-        { label: '新增用户', },
-        { label: '授权注册', }
-      ],
-      tableTitle: [ '类型' ],
-      tableData2: [ ],
-      userBehavior: [], // 用户行为
-      lineSeting: {
-        dataset: {
-          dimensions: ['date', 'activity', 'activityCount'],
-          source: [],
-        },
-      },
-        // ----  用户来源 start -----
-        pieSecondChart: '', // 饼状图实例
-        columnarSecondChart: '', // 柱状图实例
-        // ----  用户来源 end -----
-        // ---- 性别 start ----
-        sexSixthChart: '', // 饼状图实例
-        // ---- 性别 end ------
+      userSourceData: {},
+      userBehaviorData: [],
+      userActiveData: [],
+      userSexData: [],
+      userCityData: [],
+      newUserData: [],
     };
   },
   computed: {
@@ -109,35 +74,11 @@ export default {
     initPage() {
       this.setDetailNull();
       this.getIndexEcharts().then(x => {
-        this.lineSeting.dataset.source = this.echartsInfo.selectUserBehavior
-        const data = this.echartsInfo.selectNewsUserCount
-        this.tableData = (data || []).reduce((acc, item, index) => {
-          const { date, userCount, authorizationCount } = item
-          const row2 = {
-            ...acc[0],
-            [`${date}`]: userCount,
-          }
-          const row3 = {
-            ...acc[1],
-            [`${date}`]: authorizationCount,
-          }
-
-          this.tableTitle = this.tableTitle.concat(`${date}`)
-
-          return [row2, row3];          
-        }, this.tableData)
-
-
-        // ----- 用户来源 start  -----
-          console.log('selectUserSource - pie: ', x.selectUserSource.pie)
-          console.log('selectUserSource - columnar: ', x.selectUserSource.columnar)
-          this.selectUserSourcePie(x.selectUserSource.pie)
-          this.selectUserSourceColumnar(x.selectUserSource.columnar)
-        // ----- 用户来源 end --------
-
-          // 用户性别
-          this.sexSixthChartPie(x.selectSexUser)
-
+        this.userSourceData = x.selectUserSource
+        this.userBehaviorData = x.selectUserBehavior
+        this.userActiveData = x.selectActiveUserCount
+        this.userSexData = x.selectSexUser
+        this.newUserData = this.echartsInfo.selectNewsUserCount
       });;
     },
     toNewUsers() {
@@ -149,429 +90,8 @@ export default {
     toBehaviorAnalysis() {
       this.$router.push({ name: "behaviorAnalysis" });
     },
-    drawLine() {
-        // --- 用户来源 start -------
-        // 柱状
-        this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
-        // 饼图
-        this.pieSecondChart = Echarts.init(this.$refs.secondChart);
-        // --- 用户来源 start -------
-
-        // --- 性别 环形图 start -------
-        this.sexSixthChart = Echarts.init(this.$refs.sixthChart);
-        // --- 性别 环形图 end -------
-
-
-      // 折线图
-      // let thirdChart = Echarts.init(this.$refs.thirdChart);
-      // 绘制图表
-      // thirdChart.setOption({
-      //   title: {
-      //     text: "访问人数"
-      //   },
-      //   color: ["#ed3a3d", "#e613d2", "#2ed9f7", "#0ab662", "#165cf8", "#8854b9"],
-      //   tooltip: {
-      //     trigger: "axis"
-      //   },
-      //   legend: {
-      //     data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
-      //   },
-      //   grid: {
-      //     left: "3%",
-      //     right: "4%",
-      //     bottom: "3%",
-      //     containLabel: true
-      //   },
-      //   toolbox: {},
-      //   xAxis: {
-      //     type: "category",
-      //     boundaryGap: false,
-      //     data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-      //   },
-      //   yAxis: {
-      //     type: "value"
-      //   },
-      //   series: [
-      //     {
-      //       name: "首页",
-      //       type: "line",
-      //       stack: "1",
-      //       data: []
-      //     },
-      //     {
-      //       name: "项目",
-      //       type: "line",
-      //       stack: "2",
-      //       data: [220, 182, 191, 234, 290, 330, 310]
-      //     },
-      //     {
-      //       name: "咨询",
-      //       type: "line",
-      //       stack: "3",
-      //       data: [150, 232, 201, 154, 190, 330, 410]
-      //     },
-      //     {
-      //       name: "名片",
-      //       type: "line",
-      //       stack: "4",
-      //       data: [320, 332, 301, 334, 390, 330, 320]
-      //     },
-      //     {
-      //       name: "活动",
-      //       type: "line",
-      //       stack: "5",
-      //       data: [820, 932, 901, 544, 1290, 1330, 1320]
-      //     },
-      //     {
-      //       name: "资讯",
-      //       type: "line",
-      //       stack: "6",
-      //       data: [400, 500, 201, 934, 1290, 1423, 777]
-      //     }
-      //   ]
-      // });
-      // 柱状图
-      let fourthChart = Echarts.init(this.$refs.fourthChart);
-      // 绘制图表
-      let labelOption2 = {
-        normal: {
-          show: true,
-          position: "top",
-          fontSize: 15,
-          rich: {
-            name: {
-              textBorderColor: "#fff"
-            }
-          }
-        }
-      };
-      fourthChart.setOption({
-        title: {
-          text: "活跃用户数"
-        },
-        color: ["#7571cf"],
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: "value"
-          }
-        ],
-        series: [
-          {
-            name: "直接访问",
-            type: "bar",
-            barWidth: "60%",
-            label: labelOption2,
-            data: [10, 52, 200, 334, 390, 330, 220]
-          }
-        ]
-      });
-      // 环形图
-      let fifthChart = Echarts.init(this.$refs.fifthChart);
-      // 绘制图表
-      fifthChart.setOption({
-        title: {
-          text: "转化率"
-        },
-        color:["#6a96f7","#f5749d"],
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          x: "right",
-          data: ["收藏楼盘", "查看楼盘"]
-        },
-        series: [
-          {
-            name: "转化率",
-            type: "pie",
-            radius: ["40%", "56%"],
-            avoidLabelOverlap: false,
-            label: {
-              normal: {
-                show: false,
-                position: "center"
-              },
-              emphasis: {
-                show: true,
-                textStyle: {
-                  fontSize: "30",
-                  fontWeight: "bold"
-                }
-              }
-            },
-            data: [
-              { value: 335, name: "收藏楼盘" },
-              { value: 310, name: "查看楼盘" }
-            ]
-          }
-        ]
-      });
-
-      // 饼图
-      let seventhChart = Echarts.init(this.$refs.seventhChart);
-      // 绘制图表
-      seventhChart.setOption({
-        title: {
-          text: "城市分布"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "right",
-          data: ["合肥", "南京", "南通"]
-        },
-        series: [
-          {
-            name: "城市分布",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            // label: {
-            //   normal: {
-            //     position: "inner"
-            //   }
-            // },
-            data: [
-              { value: 21, name: "合肥" },
-              { value: 90, name: "南京" },
-              { value: 47, name: "南通" }
-            ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      });
-    },
-      // ---------- 用户来源 start --------------
-      selectUserSourcePie (obj) { // 饼状图绘制
-          // 绘制图表
-          this.pieSecondChart.setOption({
-              color: ["#7974ce","#f5749d","#3688f8"],
-              tooltip: {
-                  trigger: "item",
-                  formatter: "{a} <br/>{b} : {c} ({d}%)"
-              },
-              legend: {
-                  orient: "vertical",
-                  left: "left",
-                  data: ["自主进入", "来源全民经纪人", "来源置业顾问"]
-              },
-              series: [
-                  {
-                      name: "访问来源",
-                      type: "pie",
-                      radius: "55%",
-                      center: ["50%", "60%"],
-                      // label: {
-                      //     normal: {
-                      //         position: "inner"
-                      //     }
-                      // },
-                      data: [
-                          { value: obj.person_null, name: "自主进入" },
-                          { value: obj.person_estate_agent, name: "来源全民经纪人" },
-                          { value: obj.person_realty_consultant, name: "来源置业顾问" }
-                      ],
-                      itemStyle: {
-                          emphasis: {
-                              shadowBlur: 10,
-                              shadowOffsetX: 0,
-                              shadowColor: "rgba(0, 0, 0, 0.5)"
-                          }
-                      }
-                  }
-              ]
-          });
-      },
-      selectUserSourceColumnar(obj) { // 柱状图
-          // 活动名称
-          const fromName = []
-
-          // 注册人数
-          const registered = []
-
-          // 注册人数
-          const userCount = []
-
-          obj.map((item, index) => {
-              fromName.push(item.fromName)
-              registered.push(item.registered)
-              userCount.push(item.userCount)
-          })
-
-          let labelOption = {
-              normal: {
-                  show: true,
-                  position: "top",
-                  fontSize: 15,
-                  rich: {
-                      name: {
-                          textBorderColor: "#fff"
-                      }
-                  }
-              }
-          };
-          // 绘制图表
-          this.columnarSecondChart.setOption({
-              color: ["#3688f8", "#7974ce"],
-              backgroundColor: "#fff",
-              tooltip: {
-                  trigger: "axis"
-              },
-              toolbox: {
-                  show: false,
-                  feature: {
-                      mark: { show: true },
-                      dataView: { show: true, readOnly: false },
-                      magicType: { show: true, type: ["bar"] },
-                      restore: { show: true },
-                      saveAsImage: { show: true }
-                  }
-              },
-              calculable: true,
-              legend: {
-                  data: ["所有用户", "注册用户"]
-              },
-              xAxis: [
-                  {
-                      type: "category",
-                      axisLabel: {
-                          interval: 0,
-                          formatter: function(val) {
-                              // return val.split("").join("\n");
-                              return val;
-                          }
-                      },
-                      // data: ["生成海报", "好友分享", "群分享", "线下扫码", "名片分享", "小程序搜索"]
-                      data: fromName
-                  }
-              ],
-              yAxis: [
-                  {
-                      type: "value",
-                      name: "人数（人）",
-                      axisTick: {
-                          inside: true
-                      },
-                      axisLabel: {
-                          formatter: "{value}"
-                      }
-                  }
-              ],
-              grid: {
-                  left: "1%",
-                  right: "1%",
-                  containLabel: true,
-                  y2: 10
-              },
-              series: [
-                  {
-                      name: "所有用户",
-                      type: "bar",
-                      smooth: true,
-                      label: labelOption,
-                      // data: [78, 90, 13, 81, 170, 77]
-                      data: registered
-                  },
-                  {
-                      name: "注册用户",
-                      type: "bar",
-                      smooth: true,
-                      label: labelOption,
-                      // data: [26, 49, 62, 45, 21, 89]
-                      data: userCount
-                  }
-              ]
-          });
-      },
-      // ---------- 用户来源 end -------------
-      // ---------- 性别 start --------------
-      sexSixthChartPie(obj) {
-          // 性别 绘制图表
-          this.sexSixthChart.setOption({
-              title: {
-                  text: "性别比例"
-              },
-              color:["#6a96f7","#f5749d"],
-              tooltip: {
-                  trigger: "item",
-                  formatter: "{a} <br/>{b}: {c} ({d}%)"
-              },
-              legend: {
-                  orient: "vertical",
-                  x: "right",
-                  data: ["男", "女"]
-              },
-              series: [
-                  {
-                      name: "性别比例",
-                      type: "pie",
-                      radius: ["40%", "56%"],
-                      avoidLabelOverlap: false,
-                      label: {
-                          normal: {
-                              show: false,
-                              position: "center"
-                          },
-                          emphasis: {
-                              show: true,
-                              textStyle: {
-                                  fontSize: "30",
-                                  fontWeight: "bold"
-                              }
-                          }
-                      },
-                      labelLine: {
-                          normal: {
-                              show: false
-                          }
-                      },
-                      // data: [{ value: 335, name: "男" }, { value: 310, name: "女" }]
-                      data: obj
-                  }
-              ]
-          });
-      }
-      // ---------- 性别 end ---------------
   },
   mounted() {
-    if (this.echartsInfo) {
-      this.drawLine();
-      // for (var i = 0; i < this.echartsInfo.selectUserBehavior.length; i++) {
-      //   this.members.push(this.echartsInfo.selectUserBehavior[i].members);
-      // }
-    }
     this.initPage();
   }
 };
@@ -585,6 +105,11 @@ export default {
 p {
   margin: 0;
 }
+
+.marginTB {
+  margin: 20px 0;
+}
+
 .top-info {
   margin: 20px 0;
   .grid-content {

vue.config.js

@@ -4,7 +4,7 @@ module.exports = {
     port: 8080,
     proxy: {
       '/api': {
-        target: 'http://192.168.0.11:8080',
+        target: 'http://192.168.0.11:8566',
         // target: 'http://localhost:8080',
         changeOrigin: true,
         // pathRewrite: {