185 lines
3.7 KiB
Vue
185 lines
3.7 KiB
Vue
<template>
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex justify-between items-center p-4">
|
|
<div class="text-[#999] text-sm">数据排行</div>
|
|
<div class="w-30">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="day"
|
|
class="w-full"
|
|
@change="onChange"
|
|
>
|
|
<a-select-option
|
|
v-for="item in dayList"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
>{{ item.label }}</a-select-option
|
|
>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1" ref="rankRef"></div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
|
import echarts from '@/components/echarts/echarts.js'
|
|
import http from '@/utils/request'
|
|
|
|
const day = ref('365days')
|
|
const dayList = [
|
|
{
|
|
value: '7days',
|
|
label: '近7天',
|
|
},
|
|
{
|
|
value: '30days',
|
|
label: '近30天',
|
|
},
|
|
{
|
|
value: '180days',
|
|
label: '近半年',
|
|
},
|
|
{
|
|
value: '365days',
|
|
label: '近一年',
|
|
},
|
|
]
|
|
const rankRef = ref(null)
|
|
const { setOptions } = useECharts(rankRef)
|
|
|
|
let dataList = ref([])
|
|
|
|
onMounted(() => {
|
|
getData()
|
|
})
|
|
|
|
const onChange = () => {
|
|
getData()
|
|
}
|
|
|
|
const getData = async () => {
|
|
const resData = await http.get('/admin-api/api/cockpit/store-sales-ranking', {
|
|
params: {
|
|
last: day.value,
|
|
},
|
|
})
|
|
const arr = resData.map((e, i) => {
|
|
return [i + 1, e.store.title, e.sales]
|
|
})
|
|
dataList.value = arr.splice(0, 15)
|
|
chatInit()
|
|
}
|
|
|
|
const chatInit = () => {
|
|
__SetOption(dataList.value)
|
|
}
|
|
|
|
let barWidth = 20
|
|
let nameFontColor = '#000'
|
|
let nameFontSize = 12
|
|
let namePosition = [0, -15]
|
|
|
|
function __getColorValue(name, val, index) {
|
|
return {
|
|
name: name,
|
|
color: '#000',
|
|
value: val,
|
|
itemStyle: {
|
|
normal: {
|
|
show: true,
|
|
color: '#0E7CE2',
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
function __SetOption(data) {
|
|
let lists = []
|
|
let values = []
|
|
data.forEach((item, index) => {
|
|
lists.push(item[1])
|
|
values.push(__getColorValue(item[1], item[2], index))
|
|
})
|
|
|
|
let option = {
|
|
grid: {
|
|
top: '10px',
|
|
left: '10px',
|
|
right: '40px',
|
|
bottom: 0,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
inverse: true,
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
axisLabel: { show: false, inside: false },
|
|
data: lists,
|
|
},
|
|
],
|
|
xAxis: {
|
|
type: 'value',
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
splitLine: { show: false },
|
|
axisLabel: { show: false },
|
|
},
|
|
series: [
|
|
// {
|
|
// show: true,
|
|
// type: 'bar',
|
|
// barGap: '-100%',
|
|
// barWidth: barWidth,
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: 'rgba(102, 102, 102,0.5)',
|
|
// },
|
|
// },
|
|
// z: 1,
|
|
// data: values.map(()=>1),
|
|
// },
|
|
{
|
|
name: '排行',
|
|
type: 'bar',
|
|
barWidth: barWidth,
|
|
data: values,
|
|
animationDuration: 1500,
|
|
zlevel: 2,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
color: nameFontColor,
|
|
show: true,
|
|
position: 'inside',
|
|
position: namePosition,
|
|
textStyle: {
|
|
fontSize: nameFontSize,
|
|
},
|
|
formatter: function (data) {
|
|
return `${data.data.name}`
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '排行数字',
|
|
type: 'bar',
|
|
barWidth: barWidth,
|
|
data: values,
|
|
barGap: '-100%',
|
|
animationDuration: 1500,
|
|
zlevel: 2,
|
|
label:{normal:{show:true, position:"right"}},
|
|
},
|
|
],
|
|
}
|
|
|
|
setOptions(option)
|
|
}
|
|
</script>
|