101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<v-chart class="chart" :option="option" autoresize />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { use } from 'echarts/core'
|
|
import { PieChart } from 'echarts/charts' // 导入饼图模块
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
} from 'echarts/components'
|
|
import VChart from 'vue-echarts'
|
|
import { ref, onMounted } from 'vue'
|
|
import axios from 'axios' // 导入 axios
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
PieChart, // 使用饼图
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
])
|
|
|
|
// 定义 option 用来存储饼图配置
|
|
const option = ref<any>({
|
|
title: {
|
|
text: '入住品牌分析',
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: 'item', // 饼图的 tooltip 触发方式为 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical', // 图例垂直排列
|
|
left: 'left',
|
|
data: [], // 图例数据为日期，初始为空
|
|
},
|
|
series: [
|
|
{
|
|
name: '销售数量',
|
|
type: 'pie', // 设置图表类型为饼图
|
|
radius: '50%', // 饼图半径
|
|
data: [], // 饼图数据，初始为空
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
})
|
|
|
|
// 获取近七天的日期
|
|
function getLastSevenDays() {
|
|
const dates = []
|
|
for (let i = 6; i >= 0; i--) {
|
|
const date = new Date()
|
|
date.setDate(date.getDate() - i)
|
|
const formattedDate = date.toISOString().split('T')[0]
|
|
dates.push(formattedDate)
|
|
}
|
|
return dates
|
|
}
|
|
|
|
// 请求数据并更新饼图
|
|
async function fetchData() {
|
|
try {
|
|
const response = await adminRequest.get('/sys/item/view1')
|
|
const data = response.data
|
|
|
|
const pieData = data.map((item: { name: string, value: number }) => ({
|
|
value: item.value,
|
|
name: item.name,
|
|
}))
|
|
|
|
// 更新 option 中的图例数据和饼图数据
|
|
option.value.legend.data = data
|
|
option.value.series[0].data = pieData
|
|
|
|
} catch (error) {
|
|
console.error('数据加载失败', error)
|
|
}
|
|
}
|
|
|
|
// 在组件挂载后请求数据
|
|
onMounted(() => {
|
|
fetchData()
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|