<template>
	<!-- 销售额与毛利对比 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="salesMarginOption" ref="salesMarginChart" autoresize />
		</el-col>
	</el-row>

	<!-- 线上与线下收入对比 -->
	<el-row>
		<el-col :span="24">
			<v-chart class="chart" :option="revenueSourceOption" ref="revenueSourceChart" autoresize />
		</el-col>
	</el-row>
</template>

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

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

// 模拟数据
const salesData = ref([
	{ date: '2024-01-01', salesAmount: 5000, profit: 1200, onlineRevenue: 2500, offlineRevenue: 2500 },
	{ date: '2024-01-02', salesAmount: 6000, profit: 1500, onlineRevenue: 3000, offlineRevenue: 3000 },
	{ date: '2024-01-03', salesAmount: 4000, profit: 1000, onlineRevenue: 2000, offlineRevenue: 2000 },
	{ date: '2024-01-04', salesAmount: 7000, profit: 1800, onlineRevenue: 3500, offlineRevenue: 3500 },
	{ date: '2024-01-05', salesAmount: 5500, profit: 1300, onlineRevenue: 2700, offlineRevenue: 2800 },
	// 更多数据...
])

// 销售额与毛利对比（折线图和柱状图结合）
const salesMarginOption = ref({
	title: { text: '销售额与毛利对比' },
	tooltip: { trigger: 'axis' },
	legend: { data: ['销售额', '毛利'] },
	xAxis: {
		type: 'category',
		data: salesData.value.map(item => item.date)
	},
	yAxis: { type: 'value' },
	toolbox: {
		show: true,
		feature: {
			magicType: { show: true, type: ['line', 'bar'] },
			saveAsImage: {
				show: true,
				title: '保存为图片',
				type: 'png',
				pixelRatio: 2, // 控制图片清晰度
				backgroundColor: '#ffffff' // 背景色设置为白色，避免透明背景
			}
		}
	},
	series: [
		{
			name: '销售额',
			type: 'bar',
			data: salesData.value.map(item => item.salesAmount),
			itemStyle: { color: 'rgba(255, 127, 80, 0.6)' } // 显色不明显
		},
		{
			name: '毛利',
			type: 'line',
			data: salesData.value.map(item => item.profit),
			itemStyle: { color: 'rgba(135, 206, 250, 0.6)' }, // 显色不明显
			emphasis: { itemStyle: { color: '#87cefa' } }
		}
	]
})

// 线上与线下收入对比（柱状图）
const revenueSourceOption = ref({
	title: { text: '线上与线下收入对比' },
	tooltip: { trigger: 'axis' },
	legend: { data: ['线上收入', '线下收入'] },
	xAxis: {
		type: 'category',
		data: salesData.value.map(item => item.date)
	},
	yAxis: { type: 'value' },
	toolbox: {
		show: true,
		feature: {
			magicType: { show: true, type: ['line', 'bar'] },
			saveAsImage: {
				show: true,
				title: '保存为图片',
				type: 'png',
				pixelRatio: 2, // 控制图片清晰度
				backgroundColor: '#ffffff',

			}
		}
	},
	series: [
		{
			name: '线上收入',
			type: 'bar',
			data: salesData.value.map(item => item.onlineRevenue),
			itemStyle: { color: 'rgba(50, 205, 50, 0.6)' } // 显色不明显
		},
		{
			name: '线下收入',
			type: 'bar',
			data: salesData.value.map(item => item.offlineRevenue),
			itemStyle: { color: 'rgba(255, 99, 71, 0.6)' } // 显色不明显
		}
	]
})
</script>

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