添加请求内容~
This commit is contained in:
闵宪瑞
parent
34b5c7fa1d
commit
5765208844
@ -2,6 +2,7 @@
|
||||
<div class="head">
|
||||
<div class="head_l">
|
||||
<!-- <img src="/icoimg.png" alt="收缩" />-->
|
||||
|
||||
</div>
|
||||
<el-dropdown>
|
||||
<div class="head_r">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -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>
|
||||
|
||||
123
src/pages/view1.vue
Normal file
123
src/pages/view1.vue
Normal file
@ -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>
|
||||
122
src/pages/view2.vue
Normal file
122
src/pages/view2.vue
Normal file
@ -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>
|
||||
173
src/pages/view3.vue
Normal file
173
src/pages/view3.vue
Normal file
@ -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>
|
||||
123
src/pages/view4.vue
Normal file
123
src/pages/view4.vue
Normal file
@ -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>
|
||||
15
src/stores/navStore.ts
Normal file
15
src/stores/navStore.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export default defineStore('navStore', {
|
||||
state() {
|
||||
return {
|
||||
adminPath: "/",
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
inc() {
|
||||
|
||||
},
|
||||
},
|
||||
persist: true,
|
||||
})
|
||||
@ -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",
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user