lingji-work-fe/src/views/components/dataEngine/userPersona.vue

<template>
  <view>
    <topHeader ref="topHeaderRef" @search="search"></topHeader>
    <div class="h-360px w-100% flex mb-24px">
      <!-- 1. 性别分布 -->
      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px w-600px mr-24px">
        <div class="title-row">
          <span class="title mr-4px">性别分布</span>
          <a-tooltip>
            <template #content>基于社交内容平台中用户资料、互动行为及语义特征进行智能识别与估算。</template>
            <icon-question-circle size="16" class="!color-#737478" />
          </a-tooltip>
        </div>
        <a-space v-if="genderData.length > 0">
          <div id="container" class="w-300px h-300px"></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 v-if="genderData.length > 0" style="width: 40px">{{ 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 v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
              <span>TGI</span>
              <span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
            </a-space>
          </a-space>
        </a-space>
        <div v-else>
          <NoData class="w-100% h-100%" />
        </div>
      </div>
      <!-- 2. 年龄分布 -->
      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
        <a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
          <div class="title-row">
            <span class="title mr-4px">年龄分布</span>
            <a-tooltip>
              <template #content>基于社交平台的公开信息、内容偏好与行为模式，通过算法进行年龄段归类和统计。</template>
              <icon-question-circle size="16" class="!color-#737478" />
            </a-tooltip>
          </div>
          <a-space v-if="ageValueData.length > 0" 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>
        <div v-if="ageValueData.length === 0" class="w-100% flex-1">
          <NoData />
        </div>
        <div v-else id="age-container" class="w-100% flex-1"></div>
      </div>
    </div>
    <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
      <div class="title-row">
        <span class="title mr-4px">地域分布</span>
        <a-tooltip>
          <template #content>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
          <icon-question-circle size="16" class="!color-#737478" />
        </a-tooltip>
      </div>
      <div class="flex">
        <a-space direction="vertical">
          <div id="chinaMap" style="height: 416px; width: 640px"></div>
          <a-space direction="vertical" style="font-size: 14px">
            <span class="cts">搜索指数</span>
            <a-space>
              <span class="cts">高</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 class="cts">低</span>
            </a-space>
          </a-space>
        </a-space>
        <div class="flex flex-col h-486px">
          <a-tabs default-active-key="1" class="h-100%" @change="tabChange">
            <a-tab-pane key="1" title="省份">
              <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
                <template #empty>
                  <NoData />
                </template>
                <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" class="h-100%" :scroll="{ y: '100%' }">
                <template #empty>
                  <NoData />
                </template>
                <template #columns>
                  <a-table-column title="排名" data-index="rank" />
                  <a-table-column title="城市" data-index="geo" />
                  <a-table-column title="分布占比" data-index="rate">
                    <template #cell="{ record }">
                      <span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
                    </template>
                  </a-table-column>

                  <a-table-column title="TGI指数" data-index="tgi" />
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </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, selectedSubCategory], () => {
  getAgeDistributionsList();
  getGeoDistributionsList();
  getGenderDistributionsList();
  drawChinaMap();
});

const search = () => {
  getAgeDistributionsList();
  getGeoDistributionsList();
  getGenderDistributionsList();
  drawChinaMap();
};

// 获取年龄分布列表
const getAgeDistributionsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const { code, data } = await fetchAgeDistributionsList(params);
  if (code === 200) {
    ageValueData.value = data;
    nextTick(() => {
      drawAgeChart();
    });
  }
};

// 获得地理分布列表
const getGeoDistributionsList = async () => {
  const params = {
    scope: scope.value,
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const { code, data } = await fetchGeoDistributionsList(params);
  if (code === 200) {
    geoList.value = data;
  }
};
// 获取性别分布列表
const getGenderDistributionsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const { code, data } = await fetchGenderDistributionsList(params);
  if (code === 200) {
    genderData.value = [];
    genderValueData.value = [];

    genderData.value = [...data];
    await nextTick();

    genderValueData.value = data.map((item) => ({
      value: item.rate * 100,
      tgi: item.tgi,
      name: item.gender === 1 ? '女性' : '男性',
    }));

    drawChart();
  }
};

const drawChart = () => {
  let dom = document.getElementById('container');
  let myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  });
  let option = {
    color: ['#F64B31', '#2A59F3'],
    tooltip: {
      trigger: 'item',
      backgroundColor: '#fff',
      borderColor: 'rgba(0,0,0,0.05)',
      borderWidth: 1,
      textStyle: {
        color: '#222',
        fontSize: 14,
      },
      extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
      formatter: function (params) {
        return `
          <div class="w-140px">
            <div style="font-weight:500;margin-bottom:8px;">${params.name}</div>
            <div style="display:flex;align-items:center;margin-bottom:4px;">
              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#2a59f3;margin-right:8px;"></span>
              <span>占比</span>
              <span style="margin-left:auto;">${params.value}%</span>
            </div>
            <div style="display:flex;align-items:center;">
              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:8px;"></span>
              <span>TGI</span>
              <span style="margin-left:auto;">${params.data.tgi || '-'}</span>
            </div>
          </div>
        `;
      },
    },
    series: [
      {
        type: 'pie',
        avoidLabelOverlap: false,
        data: genderValueData.value,
        label: {
          show: false, // 关闭扇区外的文字
        },
        labelLine: {
          show: false,
        },
        radius: ['40%', '55%'],
      },
    ],
  };
  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,
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 12,
          backgroundColor: 'rgba(0,0,0,0.7)',
        },
      },
      backgroundColor: '#fff',
      borderColor: 'rgba(0,0,0,0.05)',
      borderWidth: 1,
      textStyle: {
        color: '#333',
        fontSize: 14,
      },
      extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
      formatter: function (params) {
        const name = params[0].name;
        const percent = params[0].value;
        const tgi = params[1].value;
        return `
          <div class="w-140px">
            <div style="margin-bottom: 4px;" class="color-#000">${name}岁</div>
            <div style="display: flex;align-items: center;margin-bottom:2px;">
              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d4cfe;margin-right:6px;"></span>
              <span>占比</span>
              <span style="color:#333;margin-left:auto;">${percent.toFixed(2)}%</span>
            </div>
            <div style="display: flex;align-items: center;">
              <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:6px;"></span>
              <span>TGI</span>
              <span style="color:#333;margin-left:auto;">${tgi}</span>
            </div>
          </div>
        `;
      },
    },
    grid: {
      top: 25,
      right: 30,
      bottom: 40,
      left: 40,
      containLabel: false,
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 12,
        margin: 10,
        hideOverlap: true, // 自动隐藏重叠标签
        color: '#939499',
      },
      axisTick: {
        alignWithLabel: true,
        length: 3, // 缩短刻度线
      },
      axisLine: {
        lineStyle: {
          width: 0.5, // 减细轴线
        },
      },
    },
    yAxis: [
      {
        // 左侧百分比轴
        type: 'value',
        name: '占比',
        nameLocation: 'end',
        nameGap: 10,
        nameTextStyle: {
          color: '#939499',
          fontSize: 12,
          padding: [0, 50, 0, 0], // 微调名称位置
        },
        min: 0,
        max: Math.ceil(Math.max(...yAxis) / 20) * 20,
        interval: calcInterval(yAxis, 20),
        axisLabel: {
          formatter: '{value}%',
          fontSize: 12,
          margin: 10,
          showMinLabel: true,
          showMaxLabel: true,
          color: '#939499',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            // color: 'rgba(255,255,255,0.3)',
            // width: 0.8,
          },
        },
      },
      {
        // 右侧TGI轴
        type: 'value',
        name: 'TGI',
        nameLocation: 'end',
        nameGap: 10,
        nameTextStyle: {
          fontSize: 12,
          color: '#939499',
          padding: [0, 0, 0, 20],
        },
        min: Math.floor(Math.min(...yAxis2) / 50) * 50,
        max: Math.ceil(Math.max(...yAxis2) / 50) * 50,
        interval: calcInterval(yAxis2, 50),
        axisLabel: {
          fontSize: 12,
          margin: 4,
          color: '#939499',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            // color: 'rgba(255,255,255,0.3)',
            // width: 0.8,
          },
        },
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#F64B31',
            width: 0.8,
          },
        },
      },
    ],
    series: [
      {
        // 柱状图
        name: '占比',
        type: 'bar',
        barWidth: 16,
        itemStyle: {
          color: '#6d4cfe',
          borderRadius: [1, 1, 0, 0], // 微圆角
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%',
          fontSize: 12,
          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: 12,
            color: '#FFAE00',
            formatter: (params) => {
              // 改用回调函数
              const avg = params.data.coord[1]; // 获取平均值坐标
              return 'TGI:' + avg.toFixed(0); // 格式化显示
            },
            position: 'insideEnd',
            offset: [0, -10],
          },
          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 lang="scss">
/* 自定义样式 */
: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;
}
.title-row {
  display: flex;
  height: 64px;
  padding: 10px 0 2px 0;
  align-items: center;
  .title {
    color: var(--Text-1, #211f24);
    font-family: $font-family-medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
.cts {
  color: var(--Text-2, #3c4043);
  font-family: $font-family-regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  &.num {
    font-family: $font-family-manrope-regular;
  }
}
:deep(.arco-tabs) {
  display: flex;
  flex-direction: column;
  .arco-tabs-content {
    flex: 1;
    .arco-tabs-content-list,
    .arco-tabs-pane,
    .arco-table-container {
      height: 100%;
    }
  }
}
</style>