68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex justify-between p-4">
|
|
<div class="text-[#999] text-sm">门店分类</div>
|
|
</div>
|
|
<div class="flex-1" ref="sortRef"></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 sortRef = ref(null)
|
|
const datas = ref([])
|
|
const { setOptions } = useECharts(sortRef)
|
|
|
|
onMounted(() => {
|
|
getData()
|
|
})
|
|
|
|
const getData = async () => {
|
|
const resData = await http.get('/admin-api/api/cockpit/store-category')
|
|
datas.value = resData
|
|
chatInit()
|
|
}
|
|
|
|
const chatInit = () => {
|
|
setOptions({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
},
|
|
series: [
|
|
{
|
|
name: '门店',
|
|
type: 'pie',
|
|
radius: '90%',
|
|
center: ['50%', '50%'],
|
|
clockwise: false,
|
|
data: datas.value.map(e=>{
|
|
return {
|
|
name: e.name,
|
|
value: e.stores_count
|
|
}
|
|
}),
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
|
|
borderColor: '#ffffff',
|
|
},
|
|
emphasis: {
|
|
borderWidth: 0,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
</script>
|