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