first commit
This commit is contained in:
muzi
491
src/views/components/dataEngine/userPersona.vue
Normal file
491
src/views/components/dataEngine/userPersona.vue
Normal file
@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<a-space style="width: 100%; display: flex">
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
|
||||
<a-space align="center">
|
||||
<span>性别分布</span>
|
||||
<a-popover position="tl">
|
||||
<a-button type="primary" class="pop-btn">
|
||||
<template #icon>
|
||||
<icon-question-circle />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<div id="container" style="height: 180px; width: 180px"></div>
|
||||
|
||||
<a-space direction="vertical" style="font-size: 14px">
|
||||
<a-space>
|
||||
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
|
||||
<span>女性</span>
|
||||
<span style="width: 40px" v-if="genderData.length > 0">{{ genderData[0].rate * 100 }}%</span>
|
||||
<span>TGI</span>
|
||||
<span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
|
||||
<span>男性</span>
|
||||
<span style="width: 40px" v-if="genderData.length > 1">{{ genderData[1].rate * 100 }}%</span>
|
||||
<span>TGI</span>
|
||||
<span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
|
||||
<a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
|
||||
<a-space align="center">
|
||||
<span>年龄分布</span>
|
||||
<a-popover position="tl">
|
||||
<a-button type="primary" class="pop-btn">
|
||||
<template #icon>
|
||||
<icon-question-circle />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-space align="center">
|
||||
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
|
||||
<span style="color: #6d4cfe">占比</span>
|
||||
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
|
||||
<span style="color: #f64b31">TGI比</span>
|
||||
</a-space>
|
||||
</a-space>
|
||||
|
||||
<a-space>
|
||||
<div id="age-container" style="height: 180px; width: 480px"></div>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1; margin-top: 24px">
|
||||
<a-space align="center">
|
||||
<span>地域分布</span>
|
||||
<a-popover position="tl">
|
||||
<a-button type="primary" class="pop-btn">
|
||||
<template #icon>
|
||||
<icon-question-circle />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-space direction="vertical">
|
||||
<div id="chinaMap" style="height: 416px; width: 640px"></div>
|
||||
<a-space direction="vertical" style="font-size: 14px">
|
||||
<span>搜索指数</span>
|
||||
<a-space>
|
||||
<span>高</span>
|
||||
<span
|
||||
v-for="item in 5"
|
||||
:key="item"
|
||||
:style="{
|
||||
width: `${18 - item * 2}px`,
|
||||
height: `${18 - item * 2}px`,
|
||||
backgroundColor: '#6D4CFE',
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
margin: '0 2px',
|
||||
}"
|
||||
></span>
|
||||
<span>低</span>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-tabs default-active-key="1" @change="tabChange">
|
||||
<a-tab-pane key="1" title="省份">
|
||||
<a-table :data="geoList" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank" />
|
||||
<a-table-column title="省份" data-index="geo" />
|
||||
<a-table-column title="分布占比" data-index="rate" />
|
||||
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="城市">
|
||||
<a-table :data="geoList" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank" />
|
||||
<a-table-column title="城市" data-index="geo" />
|
||||
<a-table-column title="分布占比" data-index="rate" />
|
||||
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { fetchAgeDistributionsList, fetchGeoDistributionsList, fetchGenderDistributionsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import chinaJson from '@/assets/maps/china.json';
|
||||
|
||||
echarts.registerMap('china', chinaJson);
|
||||
const scope = ref(1); //地域范围，1-省，2-市
|
||||
const chartInstance = (ref < echarts.ECharts) | (null > null);
|
||||
const topHeaderRef = ref();
|
||||
// 从topHeader获取统一的状态
|
||||
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
||||
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
||||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||||
const genderData = ref([]);
|
||||
const genderValueData = ref([]);
|
||||
const ageValueData = ref([]);
|
||||
const geoList = ref([]);
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
getAgeDistributionsList();
|
||||
getGeoDistributionsList();
|
||||
getGenderDistributionsList();
|
||||
drawChinaMap();
|
||||
});
|
||||
|
||||
// 获取年龄分布列表
|
||||
const getAgeDistributionsList = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
const res = await fetchAgeDistributionsList(params);
|
||||
console.log('年龄分布：', res);
|
||||
ageValueData.value = res;
|
||||
drawAgeChart();
|
||||
};
|
||||
|
||||
// 获得地理分布列表
|
||||
const getGeoDistributionsList = async () => {
|
||||
const params = {
|
||||
scope: scope.value,
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
const res = await fetchGeoDistributionsList(params);
|
||||
console.log('地理分布：', res);
|
||||
geoList.value = res;
|
||||
};
|
||||
// 获取性别分布列表
|
||||
const getGenderDistributionsList = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
const res = await fetchGenderDistributionsList(params);
|
||||
genderData.value = [];
|
||||
genderData.value = [...res];
|
||||
await nextTick();
|
||||
genderValueData.value = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
genderValueData.value.push({
|
||||
value: res[i].rate * 100,
|
||||
});
|
||||
}
|
||||
|
||||
drawChart();
|
||||
};
|
||||
|
||||
const drawChart = () => {
|
||||
var dom = document.getElementById('container');
|
||||
var myChart = echarts.init(dom, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
});
|
||||
var option;
|
||||
option = {
|
||||
color: ['#F64B31', '#2A59F3'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
avoidLabelOverlap: false,
|
||||
data: genderValueData.value,
|
||||
labelLine: {
|
||||
show: false, // 不显示引导线
|
||||
},
|
||||
radius: ['40%', '55%'],
|
||||
},
|
||||
],
|
||||
};
|
||||
if (option && typeof option === 'object') {
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const drawAgeChart = () => {
|
||||
const dom = document.getElementById('age-container');
|
||||
// 数据准备
|
||||
const xAxis = ageValueData.value.map((item) => item.age);
|
||||
const yAxis = ageValueData.value.map((item) => item.rate * 100);
|
||||
const yAxis2 = ageValueData.value.map((item) => item.tgi);
|
||||
const average = yAxis2.reduce((sum, val) => sum + val, 0) / yAxis2.length;
|
||||
|
||||
// 图表初始化（强制使用2D渲染）
|
||||
const myChart = echarts.init(dom, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
devicePixelRatio: window.devicePixelRatio * 1.5, // 提高渲染精度
|
||||
});
|
||||
|
||||
// 动态计算刻度间隔
|
||||
const calcInterval = (data, base = 10) => {
|
||||
const range = Math.max(...data) - Math.min(...data);
|
||||
return Math.max(base, Math.ceil(range / 4 / base) * base);
|
||||
};
|
||||
|
||||
// 核心配置
|
||||
const option = {
|
||||
animation: false, // 小尺寸下关闭动画提升性能
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
confine: true, // 确保tooltip不超出容器
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
fontSize: 12, // 调小提示标签字号
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
right: 30,
|
||||
bottom: 25,
|
||||
left: 40,
|
||||
containLabel: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
fontSize: 12,
|
||||
margin: 2,
|
||||
hideOverlap: true, // 自动隐藏重叠标签
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3, // 缩短刻度线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 0.5, // 减细轴线
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
// 左侧百分比轴
|
||||
type: 'value',
|
||||
name: '占比',
|
||||
nameLocation: 'top',
|
||||
nameGap: 8,
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 3, 0], // 微调名称位置
|
||||
},
|
||||
min: 0,
|
||||
max: Math.ceil(Math.max(...yAxis) / 20) * 20,
|
||||
interval: calcInterval(yAxis, 20),
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
fontSize: 8,
|
||||
margin: 4,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
width: 0.8,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 右侧TGI轴
|
||||
type: 'value',
|
||||
name: 'TGI指数',
|
||||
nameLocation: 'top',
|
||||
nameGap: 8,
|
||||
nameTextStyle: {
|
||||
fontSize: 10,
|
||||
color: '#F64B31',
|
||||
padding: [0, 0, 3, 0],
|
||||
},
|
||||
min: Math.floor(Math.min(...yAxis2) / 50) * 50,
|
||||
max: Math.ceil(Math.max(...yAxis2) / 50) * 50,
|
||||
interval: calcInterval(yAxis2, 50),
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
margin: 4,
|
||||
color: '#F64B31',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#F64B31',
|
||||
width: 0.8,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// 柱状图
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: '#6d4cfe',
|
||||
borderRadius: [1, 1, 0, 0], // 微圆角
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
fontSize: 8,
|
||||
color: '#fff',
|
||||
distance: 1, // 减小标签与柱子的距离
|
||||
},
|
||||
data: yAxis,
|
||||
},
|
||||
{
|
||||
// 折线图
|
||||
name: 'TGI',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#F64B31',
|
||||
width: 1.8,
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#FFAE00',
|
||||
width: 1.2,
|
||||
type: 'dashed',
|
||||
},
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: '#FFAE00',
|
||||
formatter: (params) => {
|
||||
// 改用回调函数
|
||||
const avg = params.data.coord[1]; // 获取平均值坐标
|
||||
return 'TGI:' + avg.toFixed(0); // 格式化显示
|
||||
},
|
||||
position: 'end',
|
||||
},
|
||||
data: [{ type: 'average' }],
|
||||
},
|
||||
data: yAxis2,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 应用配置
|
||||
myChart.setOption(option);
|
||||
|
||||
// 超小尺寸适配
|
||||
const handleResize = () => {
|
||||
const currentWidth = dom.clientWidth;
|
||||
if (currentWidth < 400) {
|
||||
myChart.setOption({
|
||||
xAxis: { axisLabel: { rotate: 90, fontSize: 7 } },
|
||||
grid: { bottom: 35 },
|
||||
});
|
||||
}
|
||||
myChart.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
|
||||
const tabChange = (val) => {
|
||||
scope.value = val;
|
||||
getGeoDistributionsList();
|
||||
};
|
||||
|
||||
const drawChinaMap = () => {
|
||||
const dom = document.getElementById('chinaMap');
|
||||
// 图表初始化（强制使用2D渲染）
|
||||
const myChart = echarts.init(dom, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
devicePixelRatio: window.devicePixelRatio * 1.5, // 提高渲染精度
|
||||
});
|
||||
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
name: '中国',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: 1000 },
|
||||
{ name: '上海', value: 800 },
|
||||
{ name: '广东', value: 900 },
|
||||
// 其他省份数据...
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getAgeDistributionsList();
|
||||
getGeoDistributionsList();
|
||||
getGenderDistributionsList();
|
||||
drawChinaMap();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
}
|
||||
|
||||
:deep(.arco-table-tr):hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
:deep(.arco-statistic-content .arco-statistic-value-integer) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pop-btn {
|
||||
background: #fff !important;
|
||||
border-color: #fff !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
:deep(.arco-btn-outline) {
|
||||
color: #6d4cfe !important;
|
||||
border-color: #6d4cfe !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user