<template>
	<!-- 销售情况按地区分布 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="salesByRegionOption" autoresize />
		</el-col>
	</el-row>

	<!-- 地区需求对比 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="demandByRegionOption" autoresize />
		</el-col>
	</el-row>

	<!-- 客户购买频次分析 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="mapOption" autoresize />
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { BarChart, PieChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { use } from 'echarts/core'

// 引入并使用图表组件
use([CanvasRenderer, BarChart, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

// 数据模拟：各地区销售、需求、频次等数据
const regionSalesData = ref([
	{ region: '华北', sales: 1500, demand: 2000, frequency: 30 },
	{ region: '华东', sales: 2500, demand: 3000, frequency: 40 },
	{ region: '华南', sales: 1200, demand: 1500, frequency: 25 },
	{ region: '西南', sales: 800, demand: 1000, frequency: 15 },
	{ region: '西北', sales: 600, demand: 900, frequency: 10 },
	{ region: '东北', sales: 900, demand: 1100, frequency: 20 },
	{ region: '华中', sales: 1800, demand: 2200, frequency: 35 },
	{ region: '西部', sales: 700, demand: 900, frequency: 18 },
	{ region: '东南', sales: 2200, demand: 2700, frequency: 50 }
])

// 销售情况按地区分布（柱状图）
const salesByRegionOption = ref({
	title: { text: '各地区销售情况' },
	tooltip: { trigger: 'axis' },
	legend: { data: ['销售量'] },
	xAxis: {
		type: 'category',
		data: regionSalesData.value.map(item => item.region)
	},
	yAxis: { type: 'value' },
	series: [
		{
			name: '销售量',
			type: 'bar',
			data: regionSalesData.value.map(item => item.sales)
		}
	]
})

// 地区需求对比（折线图）
const demandByRegionOption = ref({
	title: { text: '各地区需求对比' },
	tooltip: { trigger: 'axis' },
	legend: { data: ['需求量'] },
	xAxis: {
		type: 'category',
		data: regionSalesData.value.map(item => item.region)
	},
	yAxis: { type: 'value' },
	series: [
		{
			name: '需求量',
			type: 'line',
			data: regionSalesData.value.map(item => item.demand)
		}
	]
})


// 客户购买频次分析（饼图）
const purchaseFrequencyOption = ref({
	title: {
		text: '各地区客户购买频次分析',
		left: 'center' // 将标题居中
	},
	tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
	legend: {
		orient: 'vertical',
		left: 'left',
		data: regionSalesData.value.map(item => item.region)
	},
	series: [
		{
			name: '购买频次',
			type: 'pie',
			radius: '55%',
			center: ['50%', '60%'],
			data: regionSalesData.value.map(item => ({ value: item.frequency, name: item.region })),
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
})
</script>

<style scoped>
.chart {
	height: 400px;
}
</style>
