panqihua
2 years ago
parent
c7d4cc3440
commit
eaa0cc657c
@ -0,0 +1,107 @@ |
|||||||
|
<template> |
||||||
|
<component :is="type"> |
||||||
|
<el-row class="select" type="flex"> |
||||||
|
<el-col :span="4" class="title">{{ title }}</el-col> |
||||||
|
|
||||||
|
<el-col :offset="12" :span="8" v-if="showQuery"> |
||||||
|
<span v-for="item in dict.type.time_granularity" :key="item.value">{{ |
||||||
|
item.label |
||||||
|
}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" class="rank-item" v-for="item in rank" :key="item" :gutter="20"> |
||||||
|
<el-col :span="4" :class="{ 'black': item <= 3, 'gray': item > 3 }"> |
||||||
|
{{ item }} |
||||||
|
</el-col> |
||||||
|
<el-col :span="18" class="align-center"> |
||||||
|
联想笔记本 |
||||||
|
</el-col> |
||||||
|
<el-col :span="2" :offset="3"> |
||||||
|
99999 |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</component> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'list', |
||||||
|
props: { |
||||||
|
type: String, |
||||||
|
title: String, |
||||||
|
rank: Number, |
||||||
|
showQuery: Boolean |
||||||
|
}, |
||||||
|
dicts: ['time_granularity'], |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
.title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 16px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.align-center { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rank { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.select { |
||||||
|
align-items: center; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
padding: 0 20px; |
||||||
|
|
||||||
|
& > div:last-child { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rank-item { |
||||||
|
margin-top: 30px; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
padding: 0 20px; |
||||||
|
|
||||||
|
|
||||||
|
& > div:nth-child(1) { |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.black { |
||||||
|
color: #fff; |
||||||
|
background-color: rgba(0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
.gray { |
||||||
|
color: #fff; |
||||||
|
background-color: rgba(190, 190, 190, 1); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
& > div:nth-child(3) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form inline> |
||||||
|
<el-form-item> |
||||||
|
<el-autocomplete class="inline-input" v-model="queryParams.storeName" |
||||||
|
:fetch-suggestions="querySearch" placeholder="全部店铺"></el-autocomplete> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="dateRange"> |
||||||
|
<el-date-picker v-model="queryParams.dateRange" value-format="yyyy-MM-dd" type="daterange" |
||||||
|
range-separator="-" start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<list title="商品销售数量 top20" :rank="20" :show-query="false" type="div"/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div ref="chart" class="chart"></div> |
||||||
|
<div ref="chart2" class="chart mt50"></div> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from '@/plugins/echarts' |
||||||
|
import List from '@/views/components/rank/list' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'rank', |
||||||
|
components: { List }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
queryParams: { |
||||||
|
storeName: undefined, |
||||||
|
dateRange: undefined |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initCharts(this.$refs.chart, '商品分类交易占比') |
||||||
|
this.initCharts(this.$refs.chart2, '门店销售量排行榜') |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initCharts(chart, title) { |
||||||
|
let myChart = echarts.init(chart) |
||||||
|
let option |
||||||
|
|
||||||
|
option = { |
||||||
|
title: { |
||||||
|
text: title, |
||||||
|
bottom: '0', |
||||||
|
left: 'center' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
left: 'center', |
||||||
|
textStyle: { |
||||||
|
fontSize: 16 |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'pie', |
||||||
|
radius: '60%', |
||||||
|
data: Array.from(new Array(5).keys()).map(item => { |
||||||
|
return { value: Math.round(Math.random() * 1000), name: `分类名称${item}` } |
||||||
|
}), |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
}, |
||||||
|
label: { |
||||||
|
fontSize: 16, |
||||||
|
formatter: '{b}\n{c}' |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
option && myChart.setOption(option) |
||||||
|
}, |
||||||
|
querySearch() { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.mt50 { |
||||||
|
margin-top: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.chart { |
||||||
|
height: 500px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue