更新代码

src/views/components/rankList/index.vue

@@ -5,7 +5,7 @@
       <div class="operation">
         <div :class="['btn', index === activeIndex ? 'active' : '']"
              v-for="({ prop, label }, index) in operation"
-             :key="prop"
+             :key="prop || index"
              @click="handleSwitch(label, prop, index)">{{ label }}</div>
       </div>
     </div>
@@ -43,11 +43,16 @@ export default {
       type: String,
       default: ''
     },
+    data: {
+      type: Array,
+      default: ()=> []
+    },
     operation: {
       type: Array,
       default: ()=> ([{ label: '总', prop: '' }, { label: '日', prop: '' }])
     }
   },
+
   data() {
     return {
       activeIndex: 0
@@ -105,6 +110,8 @@ export default {
   }
 
   .list-content {
+    width: 100%;
+    overflow: hidden;
     .list-item {
       height: 37px;
       line-height: 37px;

src/views/dashboard/LineChart.vue

@@ -5,7 +5,16 @@
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import resize from './mixins/resize';
+import { echartsConfig, generateRandomNumbers, legendData, seriesData } from '@/views/dashboard/mixins/echartsConfig'
+
+legendData.forEach((name, index)=> {
+  if (!echartsConfig.legend.selected) {
+    echartsConfig.legend.selected = {};
+  }
+  echartsConfig.legend.selected[name] = index === 0;
+  echartsConfig.series.push({ ...seriesData, name, data: generateRandomNumbers() });
+});
 
 export default {
   mixins: [resize],
@@ -62,73 +71,8 @@ export default {
       this.setOptions(this.chartData)
     },
     setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
+      console.log(echartsConfig)
+      this.chart.setOption(echartsConfig)
     }
   }
 }

src/views/dashboard/PanelGroup.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div class="header">
       <el-row :gutter="16" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="item in layoutRow">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item, index) in layoutRow" :key="index">
           <div class="content">
             <div class="data-box flow-hidden">
               <div class="data-info fl_l">
@@ -25,6 +25,15 @@
       </el-row>
     </div>
 
+    <div class="chart-content">
+      <line-chart/>
+      <div class="select-time">
+        <el-select v-model="chartTime">
+          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.value"></el-option>
+        </el-select>
+      </div>
+    </div>
+
     <div class="rank-info">
       <el-row :gutter="16" class="panel-group">
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -34,6 +43,7 @@
             </template>
           </RankList>
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="提现排行榜">
             <template :scope="scope">
@@ -41,9 +51,11 @@
             </template>
           </RankList>
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="女神收入榜" :operation="operation" />
         </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
           <RankList title="用户邀请榜" :operation="operation" />
         </el-col>
@@ -54,7 +66,14 @@
 
 <script>
 import CountTo from 'vue-count-to';
-import RankList from '@/views/components/rankList'
+import RankList from '@/views/components/rankList';
+import LineChart from '../dashboard/LineChart';
+
+const chartSelect = [
+  { label: '最近一周', key: '1' },
+  { label: '最近一个月', key: '2' },
+  { label: '最近三个月', key: '3' },
+]
 
 const operation = [
   { label: '总', prop: '' },
@@ -66,7 +85,8 @@ const operation = [
 export default  {
   components: {
     CountTo,
-    RankList
+    RankList,
+    LineChart
   },
   data() {
     return {
@@ -93,7 +113,9 @@ export default  {
         money: 8,
         trendDirection: 1,
         trendNum: 8.5
-      }
+      },
+      chartSelect,
+      chartTime: '1'
     }
   },
   created() {
@@ -178,10 +200,24 @@ export default  {
       }
     }
 
+    .chart-content {
+      position: relative;
+      border-radius: 14px;
+      background: #fff;
+      padding: 16px;
+      margin-bottom: 16px;
+      .select-time {
+        position: absolute;
+        right: 16px;
+        top: 16px;
+      }
+    }
+
     .rank-info {
       margin-bottom: 16px;
       .card-panel-col {
         border-radius: 14px;
+        margin-bottom: 16px;
       }
     }
   }

src/views/dashboard/mixins/echartsConfig.js

@@ -0,0 +1,63 @@
+export const legendData = ["充值金额", "充值笔数", '打款金额', '打款笔数', '手动加余额', '手动减余额', '手动加收益', '手动减收益'];
+
+export const seriesData = {
+  name: '',
+  itemStyle: {
+    normal: {
+      lineStyle: {
+        width: 2
+      }
+    }
+  },
+  smooth: true,
+  type: 'line',
+  data: [],
+  animationDuration: 2800,
+  animationEasing: 'cubicInOut'
+};
+
+export const echartsConfig = {
+  xAxis: {
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 10,
+    right: 10,
+    bottom: 20,
+    top: 50,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: legendData,
+    top: '0px'
+  },
+  series: []
+};
+
+export const generateRandomNumbers = ()=> {
+  function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  let randomNumbers = [];
+  for (let i = 0; i < 7; i++) {
+    randomNumbers.push(getRandomInt(100, 300));
+  }
+  return randomNumbers;
+}
+

src/views/index.vue

@@ -3,7 +3,7 @@
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    <!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
     </el-row>
 
@@ -23,7 +23,7 @@
           <bar-chart />
         </div>
       </el-col>
-    </el-row>
+    </el-row>-->
 
 
   </div>