首页添加图表展示
This commit is contained in:
zhh
parent
2001a969d6
commit
5a2442fe6a
50
package-lock.json
generated
50
package-lock.json
generated
@ -2860,6 +2860,29 @@
|
||||
"jsbn": "0.1.1"
|
||||
}
|
||||
},
|
||||
"echarts": {
|
||||
"version": "4.2.0-rc.2",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.0-rc.2.tgz",
|
||||
"integrity": "sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==",
|
||||
"requires": {
|
||||
"zrender": "4.0.5"
|
||||
}
|
||||
},
|
||||
"echarts-amap": {
|
||||
"version": "1.0.0-rc.6",
|
||||
"resolved": "https://registry.npmjs.org/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
|
||||
"integrity": "sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY="
|
||||
},
|
||||
"echarts-liquidfill": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-2.0.3.tgz",
|
||||
"integrity": "sha512-pnTkLQNsiCU07jBbgXxzseNjGKcntifDeSMMjSwWzsjT6OxFjplecBAwQc5ZOwZYZXoMimmrZb2W5b21uoDmJw=="
|
||||
},
|
||||
"echarts-wordcloud": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
|
||||
"integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
|
||||
},
|
||||
"ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
@ -6425,6 +6448,11 @@
|
||||
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
|
||||
"dev": true
|
||||
},
|
||||
"numerify": {
|
||||
"version": "1.2.9",
|
||||
"resolved": "https://registry.npmjs.org/numerify/-/numerify-1.2.9.tgz",
|
||||
"integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
|
||||
},
|
||||
"oauth-sign": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
|
||||
@ -11386,6 +11414,11 @@
|
||||
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
|
||||
"dev": true
|
||||
},
|
||||
"utils-lite": {
|
||||
"version": "0.1.10",
|
||||
"resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.10.tgz",
|
||||
"integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
|
||||
},
|
||||
"utils-merge": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
||||
@ -11398,6 +11431,18 @@
|
||||
"integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==",
|
||||
"dev": true
|
||||
},
|
||||
"v-charts": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/v-charts/-/v-charts-1.19.0.tgz",
|
||||
"integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
|
||||
"requires": {
|
||||
"echarts-amap": "1.0.0-rc.6",
|
||||
"echarts-liquidfill": "2.0.3",
|
||||
"echarts-wordcloud": "1.1.3",
|
||||
"numerify": "1.2.9",
|
||||
"utils-lite": "0.1.10"
|
||||
}
|
||||
},
|
||||
"v-distpicker": {
|
||||
"version": "1.0.20",
|
||||
"resolved": "https://registry.npmjs.org/v-distpicker/-/v-distpicker-1.0.20.tgz",
|
||||
@ -12165,6 +12210,11 @@
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"zrender": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.5.tgz",
|
||||
"integrity": "sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user