179 lines
4.5 KiB
Vue
179 lines
4.5 KiB
Vue
<template>
|
|
<div class="groupPanel-component">
|
|
<img :src="title" alt="" class="title" />
|
|
<div class="groupPanel-list">
|
|
<div class="group-item" v-for="group in groupList" :key="group.id">
|
|
<div class="group-item-title">
|
|
<img
|
|
class="group-item-title-icon"
|
|
src="@/assets/images/linkPrediction/title/group-item-title.png"
|
|
alt=""
|
|
/>
|
|
<div class="group-item-title-type">{{ group.type }}</div>
|
|
</div>
|
|
<div class="group-item-statistics">
|
|
<div class="statistics-title">关注话题：{{ group.focusedTopic }}</div>
|
|
<div class="container" :id="`group-chart-${group.id}`"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, ref, onMounted, onUnmounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
const props = defineProps({
|
|
groupList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
|
|
// 存储图表实例，用于销毁
|
|
const chartInstances = new Map();
|
|
const indicator = [
|
|
{ name: '成长期', max: 30 },
|
|
{ name: '收缩期', max: 30 },
|
|
{ name: '合并期', max: 30 },
|
|
{ name: '分裂期', max: 30 },
|
|
]
|
|
// 初始化图表的外部函数
|
|
const initChart = (groupList) => {
|
|
groupList.forEach(group => {
|
|
const chartDom = document.getElementById(`group-chart-${group.id}`);
|
|
if (chartDom && group.series) {
|
|
const myChart = echarts.init(chartDom);
|
|
chartInstances.set(group.id, myChart);
|
|
const option = {
|
|
tooltip: {},
|
|
// 雷达图配置
|
|
radar: {
|
|
startAngle: 135, // 原点从 -45° 开始
|
|
indicator: indicator, // 雷达图坐标轴
|
|
shape: 'circle', // 圆形分层
|
|
splitNumber: 5, // 分层的数量
|
|
// 坐标字体
|
|
axisName: {
|
|
color: '#94C1EC',
|
|
fontSize: 14,
|
|
},
|
|
// 圆心到坐标的线
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(35, 60, 92, 0.75)'
|
|
}
|
|
},
|
|
// 每个圆的线
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(37, 50, 67, 1)'
|
|
}
|
|
},
|
|
// 每个圆之间的填充
|
|
splitArea: {
|
|
show: true,
|
|
areaStyle: {
|
|
color: ['rgba(10, 26, 47, 0.3)', 'rgba(10, 26, 47, 0.5)']
|
|
}
|
|
},
|
|
},
|
|
series: group.series
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 调用初始化图表函数
|
|
initChart(props.groupList);
|
|
|
|
// 响应窗口大小变化
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
// 处理窗口大小变化
|
|
const handleResize = () => {
|
|
chartInstances.forEach(chart => {
|
|
chart.resize();
|
|
});
|
|
};
|
|
|
|
// 组件卸载时销毁图表
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
chartInstances.forEach(chart => {
|
|
chart.dispose();
|
|
});
|
|
chartInstances.clear();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.groupPanel-component {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title {
|
|
margin-top: -7px;
|
|
margin-left: -2px;
|
|
}
|
|
.groupPanel-list {
|
|
width: 100%;
|
|
height: 470px;
|
|
padding: 0 20px;
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 3px; /* 垂直滚动条宽度 */
|
|
height: 5px; /* 水平滚动条高度 */
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
|
|
border-radius: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
|
|
}
|
|
.group-item {
|
|
width: 100%;
|
|
height: 260px;
|
|
padding-top: 16px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
|
|
.group-item-title {
|
|
position: relative;
|
|
.group-item-title-type {
|
|
position: absolute;
|
|
top: 0;
|
|
color: #8efbff;
|
|
left: 17px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.group-item-statistics {
|
|
width: 100%;
|
|
height: 40px;
|
|
margin-top: 20px;
|
|
color: #fff;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-style: Medium;
|
|
font-size: 14px;
|
|
.container {
|
|
left: 40px;
|
|
width: 218px;
|
|
height: 170px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|