zhexian

src/components/charts/XLine.vue

+<template>
+   <div ref="thirdChart" ></div>
+</template>
+<script>
+import Echarts from "echarts";
+export default {
+  name: "XLine",
+  props: ["value"],
+  data() {
+    return {
+      chart: undefined,
+      defaultOpts: {
+        //  dataset: {
+        //   dimensions: ['date', 'userCount', 'authorizationCount'],
+        //   source,
+        // },
+        title: {
+          text: "新增用户"
+        },
+        color: ["purple", "green"],
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["新用户数", "授权注册"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        toolbox: {},
+        xAxis: {
+          type: "category",
+          boundaryGap: false
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: [
+          {
+            name: "新用户数",
+            type: "line",
+            stack: "1"
+          },
+          {
+            name: "授权注册",
+            type: "line",
+            stack: "2"
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    value (val) {
+      this.renderChart(val)
+    },
+  },
+  mounted() {
+    if (!this.chart) {
+      this.chart = Echarts.init(this.$refs.thirdChart);
+      this.renderChart(this.value)
+    }
+  },
+  methods: {
+    renderChart(val) {
+      // 绘制图表
+      this.chart.setOption({
+        ...this.defaultOpts,
+        ...val
+      });
+    }
+  }
+};
+</script>
+<style>
+</style>
+

src/config/api.js

       method:'get',
       url: `${commPrefix}/indexStatistical`
     },
+    newsUserCount:{
+      method:'get',
+      url: `${commPrefix}/selectNewsUserCount`
+    },
   },
 }
 export default apis

src/store/modules/indexEcharts.js

   namespaced: true,
   state: {
     echartsInfo: {},
+    newsUserCount:{}
   },
   mutations: {
     updateList (state, payload) {
       state.echartsInfo = payload
     },
+    updateNewsUserCount (state, payload) {
+      state.newsUserCount = payload
+    },
   },
   actions: {
     setDetailNull ({ commit }) {
         })
       })
     },
+    getNewsUserCount ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.newsUserCount,
+          params: payload,
+        }).then((data) => {
+          commit('updateNewsUserCount', data)
+          resolve(data)
+        }).catch((err) => {
+          const message = err.message || err.msg
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
     // changeExchangeStatus (_, payload) {
     //   return new Promise((resolve, reject) => {
     //     request({

src/views/indexEcharts/index.vue

       //   this.members.push(this.echartsInfo.selectUserBehavior[i].members);
       // }
     }
-    this.drawLine();
+    this.initPage();
   }
 };
 </script>

src/views/indexEcharts/newUsers.vue

       end-placeholder="结束日期"
       default-value="2019-08-08">
     </el-date-picker></p>
-  <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
-   <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>
+  <x-line :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
+   <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>
 
 </div>
 import { createNamespacedHelpers } from "vuex";
 import apis from "../../config/api";
 import { mapState } from "vuex";
-import Echarts from "echarts";
 
+const {
+  mapState: mapIndexEchartsState,
+  mapActions: mapIndexEchartsActions
+} = createNamespacedHelpers("indexEcharts");
 export default {
-  components: {},
+  components: {
+    XLine: () => import('@/components/charts/XLine.vue'),
+  },
   data() {
     return {
-      value: '',
-       tableData2: [
+      value: "",
+      lineSeting: {
+        dataset: {
+          dimensions: ['date', 'userCount', 'authorizationCount'],
+          source: [],
+        },
+      },
+      tableData: [
+        { label: '新增用户', },
+        { label: '授权注册', }
+      ],
+      tableTitle: [ '类型' ],
+      tableData2: [
         {
           num: "98",
           name: "王晓红",
       ]
     };
   },
-  computed: {},
+  computed: {
+    ...mapIndexEchartsState({
+      newsUserCount: x => x.newsUserCount
+    })
+  },
   methods: {
-    drawLine() {
-      // 折线图
-      let thirdChart = Echarts.init(this.$refs.thirdChart);
-      // 绘制图表
-      thirdChart.setOption({
-        title: {
-          text: "新增用户"
-        },
-        color: ["purple", "green"],
-        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: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: "授权注册",
-            type: "line",
-            stack: "2",
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-        ]
+    ...mapIndexEchartsActions(["getNewsUserCount"]),
+    initPage() {
+      this.getNewsUserCount().then(x => {
+        const data = this.newsUserCount.selectNewsUserCount
+        this.lineSeting.dataset.source = data
+        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)
+
+
+        window.console.log(this.tableData, '-------')
       });
-    }
+    },
   },
   mounted() {
-    this.drawLine();
+    this.initPage();
+    // this.drawLine();
+  
   }
 };
 </script>