From 5765208844b8faa066b7e928a2b8e1e8df60a046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=97=B5=E5=AE=AA=E7=91=9E?=
 <9198107+min-xianrui@user.noreply.gitee.com>
Date: Thu, 9 Jan 2025 00:00:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=B7=E6=B1=82=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9~?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Heads.vue                |   1 +
 src/components/view/foundation-line.vue |  71 +++++-----
 src/layouts/default.vue                 |  11 +-
 src/pages/index.vue                     |  97 ++++++++++++-
 src/pages/view1.vue                     | 123 +++++++++++++++++
 src/pages/view2.vue                     | 122 +++++++++++++++++
 src/pages/view3.vue                     | 173 ++++++++++++++++++++++++
 src/pages/view4.vue                     | 123 +++++++++++++++++
 src/stores/navStore.ts                  |  15 ++
 src/utils/utils.ts                      |  10 +-
 10 files changed, 702 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/view1.vue
 create mode 100644 src/pages/view2.vue
 create mode 100644 src/pages/view3.vue
 create mode 100644 src/pages/view4.vue
 create mode 100644 src/stores/navStore.ts

diff --git a/src/components/Heads.vue b/src/components/Heads.vue
index 1e3af2e..e7fa92c 100644
--- a/src/components/Heads.vue
+++ b/src/components/Heads.vue
@@ -2,6 +2,7 @@
 	<div class="head">
 		<div class="head_l">
 <!--			<img src="/icoimg.png" alt="收缩" />-->
+		
 		</div>
 		<el-dropdown>
 			<div class="head_r">
diff --git a/src/components/view/foundation-line.vue b/src/components/view/foundation-line.vue
index d776786..953a9ce 100644
--- a/src/components/view/foundation-line.vue
+++ b/src/components/view/foundation-line.vue
@@ -1,69 +1,76 @@
-<!--基础折线图样式-->
-<!--https://v-charts.js.org/#/line-->
 <template>
-	<div>
-		<v-chart class="chart" :option="option" autoresize />
-	</div>
+	<v-chart class="chart" :option="option" autoresize />
 </template>
 <script setup lang="ts">
 import { use } from 'echarts/core'
-import { PieChart } from 'echarts/charts'
+import { LineChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import {
 	TitleComponent,
 	TooltipComponent,
 	LegendComponent,
+	GridComponent,
+	AxisPointerComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
-
 use([
 	CanvasRenderer,
-	PieChart,
+	LineChart,
 	TitleComponent,
 	TooltipComponent,
 	LegendComponent,
+	GridComponent,
+	AxisPointerComponent,  // 如果需要显示坐标轴指示器，也可以导入
 ])
 const option = ref<any>({
 	title: {
-		text: 'Traffic Sources111',
+		text: 'Traffic Trend Over Time',
 		left: 'center',
 	},
 	tooltip: {
-		trigger: 'item',
-		formatter: '{a} <br/>{b} : {c} ({d}%)',
+		trigger: 'axis',
 	},
 	legend: {
-		orient: 'vertical',
+		data: ['Traffic'],
 		left: 'left',
-		data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+	},
+	grid: {
+		left: '10%',
+		right: '10%',
+		bottom: '10%',
+		containLabel: true,  // 包含标签
+	},
+	xAxis: {
+		type: 'category',
+		data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+	},
+	yAxis: {
+		type: 'value',
 	},
 	series: [
 		{
-			name: 'Traffic Sources',
-			type: 'pie',
-			radius: '55%',
-			center: ['50%', '60%'],
-			data: [
-				{ value: 335, name: 'Direct' },
-				{ value: 310, name: 'Email' },
-				{ value: 234, name: 'Ad Networks' },
-				{ value: 135, name: 'Video Ads' },
-				{ value: 1548, name: 'Search Engines' },
-			],
-			emphasis: {
-				itemStyle: {
-					shadowBlur: 10,
-					shadowOffsetX: 0,
-					shadowColor: 'rgba(0, 0, 0, 0.5)',
-				},
+			name: 'Traffic',
+			type: 'line',  // 设置图表类型为折线图
+			data: [820, 932, 901, 934, 1290, 1330, 1320, 1010, 1100, 1230, 1300, 1420],
+			itemStyle: {
+				color: '#66b3ff',
+			},
+			lineStyle: {
+				width: 2,
+			},
+			smooth: true, // 平滑曲线
+			areaStyle: { // 添加面积背景色
+				origin: 'start',
+				color: 'rgba(102, 179, 255, 0.2)',
 			},
 		},
 	],
 })
 </script>
+
 <style>
 .chart {
-	width: 100vw;
-	height: calc(100vh - 82px);
+	width: 100%;
+	height: 100%;
 }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 1769d03..452fb81 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -6,8 +6,9 @@
 		<el-container>
 			<el-aside width="200px" >
 				<el-menu
-					default-active="2"
+					:default-active="navStore().adminPath"
 					router
+					@select="handleSelect"
 				>
 					<el-menu-item
 						v-for="r in getFrontList()"
@@ -27,12 +28,18 @@
 </template>
 <script setup lang="ts">
 import { getFrontList } from '~/utils/utils'
+import navStore from '~/stores/navStore'
+const handleSelect = (key: string, keyPath: string[]) => {
+	navStore().adminPath = key
+	console.log(key, keyPath)
+}
+
 </script>
 
 <style scoped>
 .main{
 	width: 100%;
-	height: 100%;
+	height: calc(100vh - 80px);
 	background-color: #f6f4f4;
 }
 .icons{
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7e397a4..ae79957 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,13 +1,100 @@
 <template>
-	<foundation-line></foundation-line>
+	<!-- 客户类型销售情况饼图 -->
+	<el-row>
+		<el-col :span="24">
+			<v-chart class="chart" :option="customerTypeSalesOption" autoresize />
+		</el-col>
+	</el-row>
+
+	<!-- 客户购买频次、周期、金额漏斗图 -->
+	<el-row>
+		<el-col :span="24">
+			<v-chart class="chart" :option="customerPurchaseFunnelOption" autoresize />
+		</el-col>
+	</el-row>
 </template>
 
-<style>
-
-</style>
 <script setup lang="ts">
-import FoundationLine from '~/components/view/foundation-line.vue'
+import { ref } from 'vue'
+import VChart from 'vue-echarts'
+import { PieChart, FunnelChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { use } from 'echarts/core'
 
+// 引入并使用图表组件
+use([CanvasRenderer, PieChart, FunnelChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
 
+// 模拟数据
+const customerData = ref([
+	{ customerType: '家庭用户', salesAmount: 5000 },
+	{ customerType: '商用用户', salesAmount: 8000 },
+	{ customerType: '工业用户', salesAmount: 12000 },
+	// 更多数据...
+])
 
+const purchaseData = ref([
+	{ stage: '潜在客户', value: 300 },
+	{ stage: '关注产品', value: 200 },
+	{ stage: '询价客户', value: 150 },
+	{ stage: '下单客户', value: 100 },
+	{ stage: '支付客户', value: 70 },
+	// 更多数据...
+])
+
+// 客户类型销售情况饼图
+const customerTypeSalesOption = ref({
+	title: { text: '客户类型销售情况', left: 'center' },
+	tooltip: { trigger: 'item' },
+	legend: {
+		orient: 'vertical',
+		left: 'left',
+		data: customerData.value.map(item => item.customerType)
+	},
+	series: [
+		{
+			name: '销售额',
+			type: 'pie',
+			radius: '55%',
+			data: customerData.value.map(item => ({
+				value: item.salesAmount,
+				name: item.customerType
+			})),
+			emphasis: {
+				itemStyle: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 0, 0, 0.5)'
+				}
+			}
+		}
+	]
+})
+
+// 客户购买漏斗图（频次、周期、金额）
+const customerPurchaseFunnelOption = ref({
+	title: { text: '客户购买漏斗分析', left: 'center' },
+	tooltip: { trigger: 'item' },
+	legend: {
+		data: ['客户转化情况']
+	},
+	series: [
+		{
+			name: '客户转化情况',
+			type: 'funnel',
+			left: '10%',
+			width: '80%',
+			data: purchaseData.value.map(item => ({
+				value: item.value,
+				name: item.stage
+			}))
+		}
+	]
+})
 </script>
+
+<style scoped>
+.chart {
+	height: 400px;
+}
+</style>
diff --git a/src/pages/view1.vue b/src/pages/view1.vue
new file mode 100644
index 0000000..1f27c69
--- /dev/null
+++ b/src/pages/view1.vue
@@ -0,0 +1,123 @@
+<template>
+
+	<el-row>
+		<el-col :span="24">
+			<v-chart class="chart"  :option="salesOption" autoresize />
+		</el-col>
+	</el-row>
+
+	<el-row>
+		<el-col :span="24">
+			<v-chart  class="chart"  :option="salesPeakOption" autoresize />
+		</el-col>
+	</el-row>
+
+<!--	<el-row>-->
+<!--		<el-col :span="24">-->
+<!--			<v-chart class="chart" :option="seasonEffectOption" autoresize />-->
+<!--		</el-col>-->
+<!--	</el-row>-->
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import VChart from 'vue-echarts'
+import { LineChart, BarChart, PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { use } from 'echarts/core'
+
+// 引入并使用图表组件
+use([CanvasRenderer, LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+const salesData = ref([
+	{ date: '2024-01-01', sales: 200, inventory: 150, demand: 180, season: 'Winter' },
+	{ date: '2024-01-02', sales: 250, inventory: 130, demand: 220, season: 'Winter' },
+	{ date: '2024-01-03', sales: 180, inventory: 140, demand: 200, season: 'Winter' },
+	{ date: '2024-01-04', sales: 300, inventory: 120, demand: 280, season: 'Winter' },
+	{ date: '2024-01-05', sales: 220, inventory: 110, demand: 210, season: 'Winter' },
+	{ date: '2024-01-06', sales: 270, inventory: 130, demand: 250, season: 'Winter' },
+	{ date: '2024-01-07', sales: 320, inventory: 100, demand: 300, season: 'Winter' },
+	{ date: '2024-04-01', sales: 400, inventory: 100, demand: 350, season: 'Spring' },
+	{ date: '2024-04-02', sales: 420, inventory: 90, demand: 380, season: 'Spring' },
+	{ date: '2024-04-03', sales: 500, inventory: 80, demand: 460, season: 'Spring' },
+	{ date: '2024-04-04', sales: 550, inventory: 70, demand: 500, season: 'Spring' },
+	{ date: '2024-04-05', sales: 480, inventory: 60, demand: 450, season: 'Spring' },
+	{ date: '2024-04-06', sales: 510, inventory: 50, demand: 470, season: 'Spring' },
+	{ date: '2024-04-07', sales: 530, inventory: 40, demand: 500, season: 'Spring' },
+	{ date: '2024-07-01', sales: 600, inventory: 200, demand: 550, season: 'Summer' },
+	{ date: '2024-07-02', sales: 620, inventory: 190, demand: 580, season: 'Summer' },
+	{ date: '2024-07-03', sales: 650, inventory: 180, demand: 600, season: 'Summer' },
+	{ date: '2024-07-04', sales: 700, inventory: 170, demand: 650, season: 'Summer' },
+	{ date: '2024-07-05', sales: 750, inventory: 160, demand: 700, season: 'Summer' },
+	{ date: '2024-07-06', sales: 800, inventory: 150, demand: 750, season: 'Summer' },
+	{ date: '2024-07-07', sales: 850, inventory: 140, demand: 800, season: 'Summer' },
+	{ date: '2024-10-01', sales: 300, inventory: 120, demand: 280, season: 'Autumn' },
+	{ date: '2024-10-02', sales: 320, inventory: 110, demand: 300, season: 'Autumn' },
+	{ date: '2024-10-03', sales: 350, inventory: 100, demand: 320, season: 'Autumn' }
+])
+// 销售分析（按天）
+const salesOption = ref({
+	title: { text: '每日销售分析' },
+	tooltip: { trigger: 'axis' },
+	legend: { data: ['销售量', '库存量', '客户需求'] },
+	xAxis: { type: 'category', data: salesData.value.map(item => item.date) },
+	yAxis: { type: 'value' },
+	series: [
+		{ name: '销售量', type: 'line', data: salesData.value.map(item => item.sales) },
+		{ name: '库存量', type: 'line', data: salesData.value.map(item => item.inventory) },
+		{ name: '客户需求', type: 'line', data: salesData.value.map(item => item.demand) },
+	]
+})
+
+// 销售高峰与低谷分析
+const salesPeakOption = ref({
+	title: { text: '销售高峰与低谷' },
+	tooltip: { trigger: 'axis' },
+	xAxis: {
+		type: 'category',
+		data: [
+			'00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00',
+			'14:00', '16:00', '18:00', '20:00', '22:00', '23:00'
+		]
+	},
+	yAxis: { type: 'value' },
+	series: [
+		{
+			name: '销售量',
+			type: 'bar',
+			data: [
+				50, 30, 20, 30, 150, 180, 200, 250, 220, 210, 100, 60, 40
+			]
+		}
+	]
+})
+
+
+// 季节性影响分析
+const seasonEffectOption = ref({
+	title: { text: '季节性影响' },
+	tooltip: { trigger: 'item' },
+	legend: { orient: 'vertical', left: 'left' },
+	series: [
+		{
+			name: '销售占比',
+			type: 'pie',
+			radius: '55%',
+			data: [
+				{ value: 400, name: '冬季' },
+				{ value: 300, name: '春季' },
+				{ value: 250, name: '夏季' },
+				{ value: 350, name: '秋季' }
+			]
+		}
+	]
+})
+</script>
+
+<style scoped>
+.chart {
+
+	height: 400px;
+}
+</style>
diff --git a/src/pages/view2.vue b/src/pages/view2.vue
new file mode 100644
index 0000000..dccd2f2
--- /dev/null
+++ b/src/pages/view2.vue
@@ -0,0 +1,122 @@
+<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>
diff --git a/src/pages/view3.vue b/src/pages/view3.vue
new file mode 100644
index 0000000..183a108
--- /dev/null
+++ b/src/pages/view3.vue
@@ -0,0 +1,173 @@
+<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>
diff --git a/src/pages/view4.vue b/src/pages/view4.vue
new file mode 100644
index 0000000..9edd0c6
--- /dev/null
+++ b/src/pages/view4.vue
@@ -0,0 +1,123 @@
+<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>
diff --git a/src/stores/navStore.ts b/src/stores/navStore.ts
new file mode 100644
index 0000000..0ca6da7
--- /dev/null
+++ b/src/stores/navStore.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export default defineStore('navStore', {
+	state() {
+		return {
+			adminPath: "/",
+		}
+	},
+	actions: {
+		inc() {
+
+		},
+	},
+	persist: true,
+})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 6475be1..3df644d 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -14,26 +14,26 @@ export const getFrontList = () => {
 	const routes = [
 		{
 			"path": "/",
-			"name": "首页",
+			"name": "产品维度",
 			"icon": "House",
 		},
 		{
-			"path": "/",
+			"path": "/view1",
 			"name": "时间维度",
 			"icon": "DataAnalysis",
 		},
 		{
-			"path": "/",
+			"path": "view2",
 			"name": "地域维度",
 			"icon": "DataAnalysis",
 		},
 		{
-			"path": "/",
+			"path": "view3",
 			"name": "客户维度",
 			"icon": "DataAnalysis",
 		},
 		{
-			"path": "/",
+			"path": "view4",
 			"name": "销售收入维度",
 			"icon": "DataAnalysis",
 		},