首页添加图表展示

package.json

@@ -11,10 +11,12 @@
  },
  "dependencies": {
  "axios": "^0.18.0",
+ "echarts": "^4.2.0-rc.2",
  "element-ui": "^2.3.7",
  "js-cookie": "^2.2.0",
  "normalize.css": "^8.0.0",
  "nprogress": "^0.2.0",
+ "v-charts": "^1.19.0",
  "v-distpicker": "^1.0.20",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",

src/main.js

@@ -5,6 +5,7 @@ import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
+import VCharts from 'v-charts'
 
 import '@/styles/index.scss' // global css
 
@@ -16,6 +17,7 @@ import '@/icons' // icon
 import '@/permission' // permission control
 
 Vue.use(ElementUI, { locale })
+Vue.use(VCharts)
 
 Vue.config.productionTip = false
 

src/utils/date.js

@@ -1,5 +1,5 @@
 // date.js
-export function formatDate (date, fmt) {
+export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
@@ -19,6 +19,24 @@ export function formatDate (date, fmt) {
  return fmt;
 }
 
-function padLeftZero (str) {
+function padLeftZero(str) {
  return ('00' + str).substr(str.length);
 }
+
+export function str2Date(dateStr, separator) {
+ if (!separator) {
+ separator = "-";
+ }
+ let dateArr = dateStr.split(separator);
+ let year = parseInt(dateArr[0]);
+ let month;
+ //处理月份为04这样的情况
+ if (dateArr[1].indexOf("0") == 0) {
+ month = parseInt(dateArr[1].substring(1));
+ } else {
+ month = parseInt(dateArr[1]);
+ }
+ let day = parseInt(dateArr[2]);
+ let date = new Date(year, month - 1, day);
+ return date;
+}

src/views/home/index.vue

@@ -143,14 +143,176 @@
  </el-col>
  </el-row>
  </div>
+ <div class="statistics-layout">
+ <div class="layout-title">订单统计</div>
+ <el-row>
+ <el-col :span="4">
+ <div style="padding: 20px">
+ <div>
+ <div style="color: #909399;font-size: 14px">本月订单总数</div>
+ <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
+ <div>
+ <span class="color-success" style="font-size: 14px">+10%</span>
+ <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div style="color: #909399;font-size: 14px">本周订单总数</div>
+ <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
+ <div>
+ <span class="color-danger" style="font-size: 14px">-10%</span>
+ <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div style="color: #909399;font-size: 14px">本月销售总额</div>
+ <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
+ <div>
+ <span class="color-success" style="font-size: 14px">+10%</span>
+ <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div style="color: #909399;font-size: 14px">本周销售总额</div>
+ <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
+ <div>
+ <span class="color-danger" style="font-size: 14px">-10%</span>
+ <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="20">
+ <div style="padding: 10px;border-left:1px solid #DCDFE6">
+ <el-date-picker
+ style="float: right;z-index: 1"
+ size="small"
+ v-model="orderCountDate"
+ type="daterange"
+ align="right"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ @change="handleDateChange"
+ :picker-options="pickerOptions">
+ </el-date-picker>
+ <div>
+ <ve-line
+ :data="chartData"
+ :legend-visible="false"
+ :loading="loading"
+ :data-empty="dataEmpty"
+ :settings="chartSettings"></ve-line>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
  </div>
 </template>
 
 <script>
+ import {str2Date} from '@/utils/date';
+ const DATA_FROM_BACKEND = {
+ columns: ['date', 'orderCount','orderAmount'],
+ rows: [
+ {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
+ {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
+ {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
+ {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
+ {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
+ {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
+ {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
+ {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
+ {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
+ {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
+ {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
+ {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
+ {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
+ {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
+ {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
+ ]
+ };
  export default {
  name: 'home',
  data() {
- return {msg: '首页'}
+ return {
+ pickerOptions: {
+ shortcuts: [{
+ text: '最近一周',
+ onClick(picker) {
+ const end = new Date();
+ let start = new Date();
+ start.setFullYear(2018);
+ start.setMonth(10);
+ start.setDate(1);
+ end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近一月',
+ onClick(picker) {
+ const end = new Date();
+ let start = new Date();
+ start.setFullYear(2018);
+ start.setMonth(10);
+ start.setDate(1);
+ end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
+ },
+ orderCountDate: '',
+ chartSettings: {
+ xAxisType: 'time',
+ area:true,
+ axisSite: { right: ['orderAmount']},
+ labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
+ chartData: {
+ columns: [],
+ rows: []
+ },
+ loading: false,
+ dataEmpty: false
+ }
+ },
+ created(){
+ this.initOrderCountDate();
+ this.getData();
+ },
+ methods:{
+ handleDateChange(){
+ this.getData();
+ },
+ initOrderCountDate(){
+ let start = new Date();
+ start.setFullYear(2018);
+ start.setMonth(10);
+ start.setDate(1);
+ const end = new Date();
+ end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
+ this.orderCountDate=[start,end];
+ },
+ getData(){
+ setTimeout(() => {
+ this.chartData = {
+ columns: ['date', 'orderCount','orderAmount'],
+ rows: []
+ };
+ for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
+ let item=DATA_FROM_BACKEND.rows[i];
+ let currDate=str2Date(item.date);
+ let start=this.orderCountDate[0];
+ let end=this.orderCountDate[1];
+ if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
+ this.chartData.rows.push(item);
+ }
+ }
+ this.dataEmpty = false;
+ this.loading = false
+ }, 1000)
+ }
  }
  }
 </script>
@@ -231,4 +393,9 @@
  .out-border {
  border: 1px solid #DCDFE6;
  }
+
+ .statistics-layout {
+ margin-top: 20px;
+ border: 1px solid #DCDFE6;
+ }
 </style>