数据统计图表

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^4.8.0",
+    "echarts": "^4.9.0",
     "element-theme": "^2.0.1",
     "element-ui": "^2.13.0",
     "js-cookie": "^2.2.1",

src/pages/stat/list/index.vue

@@ -87,8 +87,8 @@
 
                     <el-table :data="monthData" class="table" stripe header-align="center" row-key="id" :span-method="objectSpanMethod" @selection-change="handleSelectionChange1">
                         <el-table-column type="selection" width="80" align="center"></el-table-column>
-                        <el-table-column prop="year" label="年份" align="center"></el-table-column>
-                        <el-table-column prop="type" label="类别" align="center"></el-table-column>
+                        <el-table-column prop="year" width="80" label="年份" align="center"></el-table-column>
+                        <el-table-column prop="type" width="80" label="类别" align="center"></el-table-column>
                         <el-table-column prop="1" label="1月" align="center"></el-table-column>
                         <el-table-column prop="2" label="2月" align="center"></el-table-column>
                         <el-table-column prop="3" label="3月" align="center"></el-table-column>
@@ -102,6 +102,7 @@
                         <el-table-column prop="11" label="11月" align="center"></el-table-column>
                         <el-table-column prop="12" label="12月" align="center"></el-table-column>
                     </el-table>
+                    <div class="chart" :id="'chart' + i" v-for="i in yearLen" :key="i"></div>
                 </div>
             </div>
         </div>
@@ -109,6 +110,7 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import { mapState, mapActions } from 'vuex'
 import Setting from '@/setting'
 import axios from 'axios'
@@ -133,21 +135,8 @@ export default {
             listDataAll: [],
             initShowLen: 5, // 按数据库统计使用概况默认展示的数据条数
             multipleSelection: [],
-            monthData: [
-                {
-                    year: 2020,
-                    type: '登录量',
-                    month1: 1
-                },{
-                    year: 2020,
-                    type: '下载量',
-                    month1: 1
-                },{
-                    year: 2020,
-                    type: '点击量',
-                    month1: 1
-                },
-            ],
+            yearLen: 0,
+            monthData: [],
             multipleSelection1: [],
             active: false
         }
@@ -213,20 +202,23 @@ export default {
             this.$get(`${this.api.queryDatabaseInfoByMonth}?schoolId=${this.schoolId}`).then(res => {
                 let list = res.message
                 let result = []
+                let len = 0
                 // 每年的每个月份赋值
                 for(let i in list){
+                    len++
                     for(let n in list[i]){
                         let item = {
                             year: i,
                             type: n,
                         }
-                        list[i][n].map((val,index) => {
-                            item[index + 1] = val
-                        })
                         result.push(item)
                     }
                 }
+                this.yearLen = len
                 this.monthData = result
+                this.$nextTick(() => {
+                    this.initChart(list)
+                })
             }).catch(res => {})
             // 查询本校累计用户数量
             this.$get(`${this.api.getUserTotalBySchoolId}?schoolId=${this.schoolId}`).then(res => {
@@ -238,6 +230,50 @@ export default {
             }).catch(res => {})
             this.getDatabase()
         },
+        // 按月份统计数据库使用概况图表
+        initChart(list){
+            const seriesList = []
+            const data = ['下载量', '点击量', '登录量']
+            for (let i in list) {
+                const series = []
+                for (let n in list[i]) {
+                    const temp = {
+                        name: n,
+                        type: 'line',
+                        stack: 'Total',
+                        data: list[i][n]
+                    }
+                    series.push(temp)
+                }
+                seriesList.push(series)
+            }
+            seriesList.map((e, i) => {
+                echarts.init(document.querySelector(`#chart${i + 1}`)).setOption({
+                    title: {
+                        text: ''
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    // legend: {
+                    //     data
+                    // },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        show: false
+                    },
+                    yAxis: {
+                        show: false
+                    },
+                    series: e
+                })
+            })
+        },
         // 查询按数据库统计使用概况
         getDatabase(){
             this.$get(`${this.api.queryDatabaseInfo}?schoolId=${this.schoolId}&startTime=${this.startTime}&endTime=${this.endTime}`).then(res => {
@@ -432,6 +468,11 @@ export default {
                 }
             }
         }
+        .chart{
+            width: calc(100% - 240px);
+            height: 132px;
+            margin: -132px 0 0 240px;
+        }
     }
     .fold{
         margin-top: 15px;

src/pages/user/list/index.vue

@@ -308,6 +308,7 @@ export default {
             this.$get(`${this.api.listRole}?page=1&size=1000&name=&platformId=${Setting.platformId}`).then(res => {
                 const list = res.rolePage.records
                 this.roleList = list
+                const user = list.find(e => e.roleName === '用户')
                 if (user) this.form.roleIds.push(user.id)
             }).catch(res => {})
         },