Browse Source

对接饼图接口完成;

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
commit
707aeb2e31
  1. 24
      src/api/platformData.js
  2. 80
      src/views/PlatformData/UserLoginStats.vue

24
src/api/platformData.js

@ -224,6 +224,30 @@ export function getRegionActiveDataHistogram(params) {
}) })
} }
// 获取各地区用户分布(饼图)
export function getRegionUserDistribution(params) {
const formData = new FormData();
formData.append('token', localStorage.getItem('token'));
if (params) {
if (params.start_time) formData.append('start_time', params.start_time);
if (params.end_time) formData.append('end_time', params.end_time);
// identity: 0:全部 1:会员 2:非网 (可不传,默认全部)
if (params.identity !== undefined) formData.append('identity', params.identity);
}
return request({
url: 'http://d9a962ee.natappfree.cc/admin/user/login/statistics/regionUserDistribution',
method: 'post',
headers: {
'token': localStorage.getItem('token'),
'client': 'ios',
'version': '1',
'Content-Type': 'multipart/form-data'
},
data: formData
})
}
// 获取DeepChart用户活跃度趋势 // 获取DeepChart用户活跃度趋势
export function getUserDeepChartTrend(params) { export function getUserDeepChartTrend(params) {
const formData = new FormData(); const formData = new FormData();

80
src/views/PlatformData/UserLoginStats.vue

@ -223,7 +223,7 @@
import { ref, onMounted, nextTick, watch } from 'vue'; import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getUserLoginList, getUserLoginTrend, getRegionActiveData, getRegionActiveDataHistogram, getUserLoginChannel, getUserLoginChannelMember, getUserLoginChannelNoMember } from '../../api/platformData';
import { getUserLoginList, getUserLoginTrend, getRegionActiveData, getRegionActiveDataHistogram, getUserLoginChannel, getUserLoginChannelMember, getUserLoginChannelNoMember, getRegionUserDistribution } from '../../api/platformData';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -562,7 +562,8 @@ const fetchAllRegionData = async () => {
try { try {
await Promise.all([ await Promise.all([
fetchRegionActiveData(), fetchRegionActiveData(),
fetchRegionHistogramData()
fetchRegionHistogramData(),
fetchRegionDistributionData()
]); ]);
} catch (error) { } catch (error) {
console.error('获取地区数据失败:', error); console.error('获取地区数据失败:', error);
@ -736,6 +737,81 @@ const toggleBarChartMode = () => {
fetchRegionHistogramData(); fetchRegionHistogramData();
}; };
const fetchRegionDistributionData = async () => {
let params = {};
if (dateRangeRegion.value && dateRangeRegion.value.length === 2) {
params.start_time = formatDate(dateRangeRegion.value[0]);
params.end_time = formatDate(dateRangeRegion.value[1]);
}
try {
const [resAll, resMember, resNormal] = await Promise.all([
getRegionUserDistribution({ ...params, identity: 0 }),
getRegionUserDistribution({ ...params, identity: 1 }),
getRegionUserDistribution({ ...params, identity: 2 })
]);
console.log("获取地区分布数据响应:", { resAll, resMember, resNormal });
const processData = (res) => {
const data = res.region_user_distribution ? res : (res.data && res.data.region_user_distribution ? res.data : null);
if (data && data.region_user_distribution) {
return data.region_user_distribution.map(item => ({
name: item.region,
value: item.total
})).filter(item => item.value > 0); // 0使
}
return [];
};
updatePieChart(chartRegionPieRef, chartRegionPieInstance, processData(resAll));
updatePieChart(chartRegionMemberPieRef, chartRegionMemberPieInstance, processData(resMember));
updatePieChart(chartRegionNonMemberPieRef, chartRegionNonMemberPieInstance, processData(resNormal));
} catch (e) {
console.error('获取地区分布数据失败:', e);
}
};
let chartRegionPieInstance = null;
let chartRegionMemberPieInstance = null;
let chartRegionNonMemberPieInstance = null;
const updatePieChart = (chartRef, chartInstance, data) => {
if (!chartRef.value) return;
let instance = chartInstance;
if (!instance) {
// ()
// echartsDOM
instance = echarts.getInstanceByDom(chartRef.value);
if (!instance) {
instance = echarts.init(chartRef.value);
}
}
const option = {
color: regionColors,
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
series: [
{
type: 'pie',
radius: '70%',
center: ['30%', '50%'],
data: data,
label: { show: false },
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2
},
}
]
};
instance.setOption(option);
};
const handleSearchRegion = () => { const handleSearchRegion = () => {
// URL // URL
const query = { ...route.query }; const query = { ...route.query };

Loading…
Cancel
Save