123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<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>
|