新框架page1事件热度布局完成
Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
parent
60031902a2
commit
9a61a4e33f
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 54 KiB |
|
|
@ -1,20 +1,202 @@
|
|||
<template>
|
||||
<div class="event-hot">
|
||||
<img src="../../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
|
||||
<div class="panel-container event-hot">
|
||||
<!-- 1. 标题行 -->
|
||||
<div class="header-title">
|
||||
<img src="../../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
|
||||
</div>
|
||||
|
||||
<!-- 2. 控件行 -->
|
||||
<div class="header-controls">
|
||||
<div class="chart-tabs">
|
||||
<button :class="{ active: activeChartTab === 'trend' }" @click="activeChartTab = 'trend'">时序热度图</button>
|
||||
<button :class="{ active: activeChartTab === 'cumulative' }" @click="activeChartTab = 'cumulative'">累计热度图</button>
|
||||
</div>
|
||||
<button class="details-btn" @click="showDetails">查看详情</button>
|
||||
</div>
|
||||
|
||||
<!-- 3. ECharts 容器 -->
|
||||
<div ref="hotspotChart" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 目前没有逻辑
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const emit = defineEmits(['showDetails']);
|
||||
|
||||
// ===================================================================
|
||||
// 数据定义与处理
|
||||
// ===================================================================
|
||||
const activeChartTab = ref('trend');
|
||||
|
||||
// --- 完整/详情用数据 (Granular/Details Data) ---
|
||||
const granularTrendData = [8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12];
|
||||
const granularXAxisLabels = ['7.31 00h', '7.31 06h', '7.31 12h', '7.31 18h', '8.1 00h', '8.1 06h', '8.1 12h', '8.1 18h', '8.2 00h', '8.2 06h', '8.2 12h', '8.2 18h', '8.3 00h', '8.3 06h', '8.3 12h'];
|
||||
const granularCumulativeData = granularTrendData.reduce((acc, val) => { acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val); return acc; }, []);
|
||||
|
||||
// --- 面板用数据 (Panel Data - Daily Summary) ---
|
||||
const panelTrendData = [32655, 29182, 55732, 1051]; // Figma中的数据
|
||||
const panelXAxisLabels = ['2022.7.31', '2022.8.1', '2022.8.2', '2022.8.3'];
|
||||
const panelCumulativeData = panelTrendData.reduce((acc, val) => { acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val); return acc; }, []);
|
||||
|
||||
// --- 整合数据集 ---
|
||||
const chartDataSets = {
|
||||
panel: {
|
||||
trend: { data: panelTrendData, xAxis: panelXAxisLabels, yAxisMax: 60000 },
|
||||
cumulative: { data: panelCumulativeData, xAxis: panelXAxisLabels, yAxisMax: 120000 }
|
||||
},
|
||||
details: {
|
||||
trend: { data: granularTrendData, xAxis: granularXAxisLabels, yAxisMax: 20000 },
|
||||
cumulative: { data: granularCumulativeData, xAxis: granularXAxisLabels, yAxisMax: 120000 }
|
||||
}
|
||||
};
|
||||
|
||||
// ===================================================================
|
||||
// ECharts 逻辑
|
||||
// ===================================================================
|
||||
const hotspotChart = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const getChartOptions = (xAxisData, seriesData, yMax, rotate = 0) => ({
|
||||
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,21,41,0.8)', borderColor: '#3a95ff', textStyle: { color: '#cbeaff' } },
|
||||
grid: { left: '3%', right: '8%', bottom: '5%', top: '20%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xAxisData,
|
||||
axisLine: { lineStyle: { color: 'rgba(62, 115, 171, 0.5)' } },
|
||||
axisLabel: { color: '#a7c5d4', fontSize: 12, rotate: rotate },
|
||||
axisTick: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: yMax,
|
||||
axisLabel: { color: '#a7c5d4', fontSize: 12 },
|
||||
splitLine: { show: true, lineStyle: { color: 'rgba(62, 115, 171, 0.2)', type: 'dashed' } }
|
||||
},
|
||||
series: [{
|
||||
name: '热度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
data: seriesData,
|
||||
label: { show: true, position: 'top', color: '#cdeeff', fontSize: 12 },
|
||||
itemStyle: { color: '#00baff', borderColor: '#041421', borderWidth: 2 },
|
||||
lineStyle: { color: '#00baff', width: 2 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 186, 255, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(0, 186, 255, 0)' }
|
||||
])
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 监听标签页切换，更新面板小图
|
||||
watch(activeChartTab, (newTab) => {
|
||||
if (myChart) {
|
||||
const dataSet = chartDataSets.panel[newTab];
|
||||
myChart.setOption({
|
||||
xAxis: [{ data: dataSet.xAxis }],
|
||||
yAxis: { max: dataSet.yAxisMax },
|
||||
series: [{ data: dataSet.data }]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 点击“查看详情”时，触发事件并传递完整数据
|
||||
const showDetails = () => {
|
||||
const dataSet = chartDataSets.details[activeChartTab.value];
|
||||
const rotate = dataSet.xAxis.length > 5 ? 15 : 0;
|
||||
const option = getChartOptions(dataSet.xAxis, dataSet.data, dataSet.yAxisMax, rotate);
|
||||
emit('showDetails', { option });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (hotspotChart.value) {
|
||||
myChart = echarts.init(hotspotChart.value);
|
||||
// 初始化时使用面板数据
|
||||
const initialDataSet = chartDataSets.panel[activeChartTab.value];
|
||||
myChart.setOption(getChartOptions(initialDataSet.xAxis, initialDataSet.data, initialDataSet.yAxisMax));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (myChart) myChart.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event-hot {
|
||||
width: 352px;
|
||||
height: 296px;
|
||||
background-color: #04142166;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
/* 容器样式，无边框 */
|
||||
.panel-container {
|
||||
width: 352px;
|
||||
height: 276px;
|
||||
background: rgba(4, 20, 33, 0.4);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 18px 0 #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 标题行 */
|
||||
.header-title {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.header-title img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* 控件行 */
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-tabs {
|
||||
display: flex;
|
||||
border: 1px solid #1C588F;
|
||||
border-radius: 3px;
|
||||
background-color: #031826;
|
||||
}
|
||||
|
||||
.chart-tabs button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a7c5d4;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chart-tabs button.active {
|
||||
background-color: #236291;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.details-btn {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 1px solid #1c588f;
|
||||
color: #a7c5d4;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user