381 lines
9.6 KiB
Vue
381 lines
9.6 KiB
Vue
<template>
|
||
<div class="index-module__NV_5cW__chartCard chartCard__wide mb-[1.5rem]">
|
||
<h3 class="chartCard__title">漏洞语言分布</h3>
|
||
<div class="chartCard__container">
|
||
<div class="num-empty" v-if="isEmpty.languageTrend"></div>
|
||
<div v-else id="languageTrendChart" class="chart"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import { languageTrendPage1 } from '@/api/jyh/situation';
|
||
|
||
// 空数据标识
|
||
const isEmpty = ref({
|
||
languageTrend: false
|
||
});
|
||
|
||
// 图表实例存储（用于resize时销毁重绘）
|
||
const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
|
||
languageTrendChart: null
|
||
});
|
||
|
||
// 漏洞语言分布数据 - 响应式数据
|
||
const languageTrendData = ref({
|
||
years: [] as string[],
|
||
series: [] as any[]
|
||
});
|
||
|
||
// 获取后端数据
|
||
const fetchLanguageTrendData = async () => {
|
||
try {
|
||
console.log('开始请求漏洞语言分布数据...');
|
||
const response = await languageTrendPage1();
|
||
const businessData = response.data; // Axios响应格式，业务数据在response.data中
|
||
console.log('API响应:', response);
|
||
|
||
if (businessData?.code === 200) {
|
||
console.log('API返回的数据:', businessData.data);
|
||
|
||
// 处理后端返回的数据格式
|
||
const processedData = processBackendData(businessData.data);
|
||
languageTrendData.value = processedData;
|
||
|
||
// 更新空数据标识
|
||
isEmpty.value.languageTrend = !processedData.years || processedData.years.length === 0;
|
||
} else {
|
||
console.error('获取漏洞语言分布数据失败:', businessData?.msg || '未知错误');
|
||
// 设置默认数据
|
||
setDefaultData();
|
||
}
|
||
} catch (error) {
|
||
console.error('获取漏洞语言分布数据异常:', error);
|
||
// 发生异常时设置默认数据
|
||
setDefaultData();
|
||
}
|
||
};
|
||
|
||
// 处理后端返回的数据格式
|
||
const processBackendData = (backendData: any[]) => {
|
||
// 按语言分组
|
||
const groupedData: { [key: string]: { year: string, value: number }[] } = {};
|
||
|
||
backendData.forEach(item => {
|
||
if (!groupedData[item.name]) {
|
||
groupedData[item.name] = [];
|
||
}
|
||
groupedData[item.name].push({
|
||
year: item.year,
|
||
value: item.data
|
||
});
|
||
});
|
||
|
||
// 提取所有年份并排序
|
||
const allYearsSet = new Set<string>();
|
||
Object.values(groupedData).forEach(langData => {
|
||
langData.forEach(d => allYearsSet.add(d.year));
|
||
});
|
||
const years = Array.from(allYearsSet).sort();
|
||
|
||
// 生成系列数据
|
||
const series = Object.entries(groupedData).map(([name, data]) => {
|
||
// 根据年份顺序填充数据，缺失的设为0
|
||
const values = years.map(year => {
|
||
const found = data.find(d => d.year === year);
|
||
return found ? found.value : 0;
|
||
});
|
||
|
||
// 这里可以使用预定义的颜色方案，或者动态生成
|
||
const predefinedColors: { [key: string]: string } = {
|
||
'JavaScript': '#FAC858',
|
||
'Python': '#5470C6',
|
||
'HTML/CSS': '#91CC75',
|
||
'SQL': '#9254DE',
|
||
'Java': '#EE6666',
|
||
'TypeScript': '#73C0DE',
|
||
'Shell': '#52C41A',
|
||
'C++': '#FF6E00',
|
||
'C#': '#722ED1',
|
||
'Go': '#00DDFF',
|
||
'PHP': '#F5222D',
|
||
'Rust': '#FC8452'
|
||
};
|
||
|
||
const color = predefinedColors[name] || getRandomColor();
|
||
|
||
return {
|
||
name: name,
|
||
type: 'established', // 可以根据实际情况调整
|
||
color: color,
|
||
data: values
|
||
};
|
||
});
|
||
|
||
return {
|
||
years: years,
|
||
series: series
|
||
};
|
||
};
|
||
|
||
// 设置默认数据
|
||
const setDefaultData = () => {
|
||
languageTrendData.value = {
|
||
years: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
|
||
series: [
|
||
{
|
||
name: 'JavaScript',
|
||
type: 'established',
|
||
color: '#FAC858',
|
||
data: [65, 64, 69, 70, 69, 65, 61, 61]
|
||
},
|
||
{
|
||
name: 'Python',
|
||
type: 'established',
|
||
color: '#5470C6',
|
||
data: [32, 41, 49, 55, 52, 53, 54, 60]
|
||
},
|
||
{
|
||
name: 'HTML/CSS',
|
||
type: 'established',
|
||
color: '#91CC75',
|
||
data: [60, 55, 61, 61, 60, 54, 52, 52]
|
||
},
|
||
{
|
||
name: 'SQL',
|
||
type: 'established',
|
||
color: '#9254DE',
|
||
data: [42, 47, 56, 56, 54, 49, 52, 50]
|
||
},
|
||
{
|
||
name: 'Java',
|
||
type: 'established',
|
||
color: '#EE6666',
|
||
data: [47, 51, 50, 54, 49, 48, 49, 49]
|
||
},
|
||
{
|
||
name: 'TypeScript',
|
||
type: 'emerging',
|
||
color: '#73C0DE',
|
||
data: [12, 17, 25, 28, 29, 34, 34, 50]
|
||
},
|
||
{
|
||
name: 'Shell',
|
||
type: 'established',
|
||
color: '#52C41A',
|
||
data: [29, 29, 40, 39, 37, 34, 34, 41]
|
||
},
|
||
{
|
||
name: 'C++',
|
||
type: 'established',
|
||
color: '#FF6E00',
|
||
data: [17, 18, 20, 27, 23, 25, 25, 21]
|
||
},
|
||
{
|
||
name: 'C#',
|
||
type: 'established',
|
||
color: '#722ED1',
|
||
data: [20, 22, 24, 22, 21, 23, 21, 19]
|
||
},
|
||
{
|
||
name: 'Go',
|
||
type: 'emerging',
|
||
color: '#00DDFF',
|
||
data: [8, 12, 18, 19, 17, 19, 17, 14]
|
||
},
|
||
{
|
||
name: 'PHP',
|
||
type: 'declining',
|
||
color: '#F5222D',
|
||
data: [30, 26, 29, 27, 32, 20, 18, 15]
|
||
},
|
||
{
|
||
name: 'Rust',
|
||
type: 'emerging',
|
||
color: '#FC8452',
|
||
data: [2, 2, 5, 7, 6, 9, 10, 10]
|
||
}
|
||
]
|
||
};
|
||
isEmpty.value.languageTrend = false;
|
||
};
|
||
|
||
// 生成随机颜色的辅助函数
|
||
const getRandomColor = () => {
|
||
const colors = ['#FAC858', '#5470C6', '#91CC75', '#9254DE', '#EE6666', '#73C0DE', '#52C41A', '#FF6E00', '#722ED1', '#00DDFF', '#F5222D', '#FC8452'];
|
||
return colors[Math.floor(Math.random() * colors.length)];
|
||
};
|
||
|
||
// 初始化漏洞语言分布图表（堆叠面积图）
|
||
const initLanguageTrendChart = () => {
|
||
const el = document.getElementById('languageTrendChart');
|
||
if (!el) return;
|
||
|
||
// 延迟执行以确保DOM已渲染
|
||
setTimeout(() => {
|
||
const chartEl = document.getElementById('languageTrendChart');
|
||
if (!chartEl) return;
|
||
|
||
if (chartInstances.value.languageTrendChart) {
|
||
chartInstances.value.languageTrendChart.dispose();
|
||
}
|
||
|
||
const myChart = echarts.init(chartEl);
|
||
chartInstances.value.languageTrendChart = myChart;
|
||
|
||
// 准备堆叠面积图数据
|
||
const series = languageTrendData.value.series.map(item => ({
|
||
name: item.name,
|
||
type: 'line',
|
||
stack: '总量',
|
||
areaStyle: {
|
||
color: item.color
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: item.color
|
||
},
|
||
symbol: 'none',
|
||
data: item.data
|
||
}));
|
||
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
formatter: (params: any) => {
|
||
let res = `<div>${params[0].name}年</div>`;
|
||
params.forEach((p: any) => {
|
||
res += `<div style="display:flex;align-items:center;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${p.color};"></span>${p.seriesName}: ${p.value}%</div>`;
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
textStyle: { fontSize: 12 },
|
||
data: languageTrendData.value.series.map(item => item.name)
|
||
},
|
||
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: languageTrendData.value.years,
|
||
axisLabel: { fontSize: 12 }
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '使用率(%)',
|
||
nameTextStyle: { fontSize: 12 },
|
||
axisLabel: { fontSize: 12 }
|
||
}
|
||
],
|
||
series: series
|
||
});
|
||
|
||
// 监听窗口大小变化，重新调整图表大小
|
||
window.addEventListener('resize', () => {
|
||
if (chartInstances.value.languageTrendChart) {
|
||
chartInstances.value.languageTrendChart.resize();
|
||
}
|
||
});
|
||
}, 0);
|
||
};
|
||
|
||
|
||
// 在组件挂载后获取数据并初始化图表
|
||
onMounted(async () => {
|
||
await fetchLanguageTrendData();
|
||
nextTick(() => {
|
||
initLanguageTrendChart();
|
||
});
|
||
});
|
||
|
||
// 监听数据变化，重新初始化图表
|
||
watch(languageTrendData, () => {
|
||
if (!isEmpty.value.languageTrend) {
|
||
nextTick(() => {
|
||
initLanguageTrendChart();
|
||
});
|
||
}
|
||
}, { deep: true });
|
||
|
||
// 在组件卸载前清理资源
|
||
onUnmounted(() => {
|
||
if (chartInstances.value.languageTrendChart) {
|
||
chartInstances.value.languageTrendChart.dispose();
|
||
}
|
||
});
|
||
|
||
defineExpose({
|
||
initLanguageTrendChart
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.index-module__NV_5cW__chartCard {
|
||
-webkit-backdrop-filter: blur(10px);
|
||
backdrop-filter: blur(10px);
|
||
background: #ffffffe6;
|
||
border: 1px solid #ffffff4d;
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 4px 16px #00000014;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.index-module__NV_5cW__chartCard:hover {
|
||
border-color: #3b82f64d;
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px #0000001f;
|
||
}
|
||
|
||
.chartCard__wide {
|
||
grid-column: 1 / -1; /* 跨列显示 */
|
||
}
|
||
|
||
.chartCard__title {
|
||
color: #333;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin: 0 0 1rem 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.chartCard__container {
|
||
width: 100%;
|
||
height: 300px; /* 图表高度 */
|
||
position: relative;
|
||
}
|
||
|
||
.mb-\[1\.5rem\] {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* 与示例一致的空数据样式 */
|
||
.num-empty {
|
||
height: 10px;
|
||
border-top: 2px solid #2951E0;
|
||
width: 100%;
|
||
background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |