<template>
	<!-- 销售热力图 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="heatmapOption" autoresize />
		</el-col>
	</el-row>

	<div style="height: 20px"></div>
	<!-- 产品销售表现雷达图 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="radarOption" autoresize />
		</el-col>
	</el-row>
</template>

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

// 引入并使用图表组件
use([CanvasRenderer, HeatmapChart, RadarChart, TitleComponent, TooltipComponent, GridComponent, VisualMapComponent])

// 数据模拟：液化气瓶的销售数据
const productSalesData = ref([
	{ type: '液化气瓶A', specification: '5L', quality: '优质', sales: 200 },
	{ type: '液化气瓶A', specification: '10L', quality: '优质', sales: 150 },
	{ type: '液化气瓶A', specification: '20L', quality: '中等', sales: 180 },
	{ type: '液化气瓶B', specification: '5L', quality: '良好', sales: 130 },
	{ type: '液化气瓶B', specification: '10L', quality: '中等', sales: 220 },
	{ type: '液化气瓶B', specification: '20L', quality: '优质', sales: 250 },
	{ type: '液化气瓶C', specification: '5L', quality: '优质', sales: 190 },
	{ type: '液化气瓶C', specification: '10L', quality: '良好', sales: 160 },
	{ type: '液化气瓶C', specification: '20L', quality: '中等', sales: 200 },
	{ type: '液化气瓶D', specification: '5L', quality: '中等', sales: 140 },
	{ type: '液化气瓶D', specification: '10L', quality: '优质', sales: 270 },
	{ type: '液化气瓶D', specification: '20L', quality: '良好', sales: 230 },
	{ type: '液化气瓶E', specification: '5L', quality: '良好', sales: 110 },
	{ type: '液化气瓶E', specification: '10L', quality: '中等', sales: 130 },
	{ type: '液化气瓶E', specification: '20L', quality: '优质', sales: 220 },
	{ type: '液化气瓶F', specification: '5L', quality: '中等', sales: 180 },
	{ type: '液化气瓶F', specification: '10L', quality: '良好', sales: 160 },
	{ type: '液化气瓶F', specification: '20L', quality: '优质', sales: 200 },
	{ type: '液化气瓶G', specification: '5L', quality: '优质', sales: 210 },
	{ type: '液化气瓶G', specification: '10L', quality: '优质', sales: 230 },
	{ type: '液化气瓶G', specification: '20L', quality: '中等', sales: 220 }
])

// 销售热力图：展示不同规格和质量等级下的销售情况
const heatmapOption = ref({
	title: { text: '销售热力图' },
	tooltip: { position: 'top' },
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: ['液化气瓶A', '液化气瓶B', '液化气瓶C', '液化气瓶D', '液化气瓶E', '液化气瓶F', '液化气瓶G']
	},
	yAxis: {
		type: 'category',
		data: ['5L', '10L', '20L']
	},
	visualMap: {
		min: 0,
		max: 250, // 根据实际数据设置最大值
		calculable: true,
		orient: 'horizontal',
		left: 'center',
		inRange: {
			color: ['#FFFFFF', '#FF0000'] // 从白色到红色的渐变色，表示从低到高的热力值
		}
	},
	series: [
		{
			name: '销售量',
			type: 'heatmap',
			data: [
				[0, 0, 200], // [x, y, value] 表示对应的销售量数据
				[0, 1, 150],
				[0, 2, 180],
				[1, 0, 130],
				[1, 1, 220],
				[1, 2, 250],
				[2, 0, 190],
				[2, 1, 160],
				[2, 2, 200],
				[3, 0, 140],
				[3, 1, 210],
				[3, 2, 180],
				[4, 0, 170],
				[4, 1, 200],
				[4, 2, 230],
				[5, 0, 120],
				[5, 1, 180],
				[5, 2, 160],
				[6, 0, 250],
				[6, 1, 170],
				[6, 2, 190]
			]
		}
	]
})


// 销售表现雷达图：展示各类型液化气瓶的销售表现
const radarOption = ref({
	title: {
		text: '液化气产品销售表现',
		left: 'center'
	},
	tooltip: {},
	radar: {
		indicator: [
			{ name: '液化气瓶A', max: 300 },
			{ name: '液化气瓶B', max: 300 },
			{ name: '液化气瓶C', max: 300 },
			{ name: '液化气瓶D', max: 300 },
			{ name: '液化气瓶E', max: 300 },
			{ name: '液化气瓶F', max: 300 },
			{ name: '液化气瓶G', max: 300 }
		]
	},
	series: [{
		name: '销售表现',
		type: 'radar',
		data: [
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶A').map(item => item.sales),
				name: '液化气瓶A'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶B').map(item => item.sales),
				name: '液化气瓶B'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶C').map(item => item.sales),
				name: '液化气瓶C'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶D').map(item => item.sales),
				name: '液化气瓶D'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶E').map(item => item.sales),
				name: '液化气瓶E'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶F').map(item => item.sales),
				name: '液化气瓶F'
			},
			{
				value: productSalesData.value.filter(item => item.type === '液化气瓶G').map(item => item.sales),
				name: '液化气瓶G'
			}
		]
	}]
})
</script>

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