page1事件热度图完成
Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
parent
96a07169bc
commit
66586abd57
BIN
SocialNetworks.7z
Normal file
BIN
SocialNetworks.7z
Normal file
Binary file not shown.
Binary file not shown.
|
|
@ -115,6 +115,9 @@
|
|||
</div>
|
||||
<div ref="hotspotChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="leader-post" ref="leaderPost">
|
||||
<!-- 原始内容 -->
|
||||
<div ref="originalContent">
|
||||
|
|
@ -124,20 +127,25 @@
|
|||
<div ref="clonedContent"></div>
|
||||
</div>
|
||||
<div class="words">
|
||||
<img src="../assets/images/words.png" alt="" style="margin-top: -6px;">
|
||||
<img src="../assets/images/wordsimg.png" alt="" style="margin-top: 10px;margin-left: 20px;">
|
||||
<!-- <div class="word-cloud-container">
|
||||
<div v-for="word in words" :key="word.text" class="word-item" :class="word.size" :style="{
|
||||
top: word.top,
|
||||
left: word.left,
|
||||
transform: `translate(-50%, -50%) rotate(${word.rotate}deg)`,
|
||||
color: word.color
|
||||
}">
|
||||
{{ word.text }}
|
||||
</div>
|
||||
</div> -->
|
||||
<img src="../assets/images/words.png" alt="" style="margin-top: -6px;">
|
||||
<img src="../assets/images/wordsimg.png" alt="" style="margin-top: 10px;margin-left: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ============================================= -->
|
||||
<!-- 将弹窗代码放在这里 (Recommended placement) -->
|
||||
<!-- ============================================= -->
|
||||
<div v-if="showDetailsModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<!-- 您可以添加一个关闭按钮 -->
|
||||
<button class="close-btn" @click="closeDetailsModal">×</button>
|
||||
|
||||
<!-- 这里是详情图表的容器 -->
|
||||
<div ref="detailsChart" class="details-chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -149,7 +157,7 @@
|
|||
onUnmounted,
|
||||
nextTick, watch
|
||||
} from 'vue';
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
// 定义按钮列表
|
||||
const buttonList = ['全部', '新闻媒体', '自媒体', '政府官号'];
|
||||
// 定义当前激活的按钮索引
|
||||
|
|
@ -385,29 +393,60 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
let myChart = null;
|
||||
const activeChartTab = ref('cumulative'); // Default to cumulative
|
||||
|
||||
const trendData = [8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12];
|
||||
const cumulativeData = trendData.reduce((acc, val) => {
|
||||
// --- [MODIFIED] Data Processing ---
|
||||
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'
|
||||
];
|
||||
|
||||
// Calculate daily summary data
|
||||
const dailyTrendData = [
|
||||
granularTrendData.slice(0, 4).reduce((a, b) => a + b, 0), // 7.31
|
||||
granularTrendData.slice(4, 8).reduce((a, b) => a + b, 0), // 8.1
|
||||
granularTrendData.slice(8, 12).reduce((a, b) => a + b, 0), // 8.2
|
||||
granularTrendData.slice(12, 15).reduce((a, b) => a + b, 0) // 8.3
|
||||
];
|
||||
const dailyCumulativeData = dailyTrendData.reduce((acc, val) => {
|
||||
acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val);
|
||||
return acc;
|
||||
}, []);
|
||||
const dailyXAxisLabels = ['7.31', '8.1', '8.2', '8.3'];
|
||||
|
||||
// [新增] 计算基于精细颗粒度的累计数据，用于详情弹窗
|
||||
const granularCumulativeData = granularTrendData.reduce((acc, val) => {
|
||||
acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
// [在这里添加新代码]
|
||||
|
||||
// Organize datasets for easy access
|
||||
// 在 <script setup> 中找到这个对象
|
||||
const chartDataSets = {
|
||||
trend: {
|
||||
data: trendData,
|
||||
yAxisMax: 20000
|
||||
},
|
||||
cumulative: {
|
||||
data: cumulativeData,
|
||||
yAxisMax: 120000
|
||||
}
|
||||
default: {
|
||||
trend: {
|
||||
data: dailyTrendData,
|
||||
yAxisMax: 60000
|
||||
},
|
||||
cumulative: {
|
||||
data: dailyCumulativeData,
|
||||
yAxisMax: 120000
|
||||
}
|
||||
},
|
||||
details: {
|
||||
trend: {
|
||||
data: granularTrendData,
|
||||
yAxisMax: 20000
|
||||
},
|
||||
// [新增] 为累计图添加放大版数据（这里复用日度数据）
|
||||
cumulative: {
|
||||
data: granularCumulativeData, // [更正] 使用新计算的精细累计数据
|
||||
yAxisMax: 120000
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fullXAxisLabels = [
|
||||
'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'
|
||||
];
|
||||
// --- End Data Processing ---
|
||||
|
||||
const getChartOptions = (xAxisData, seriesData, yMax, axisLabelInterval) => ({
|
||||
tooltip: {
|
||||
|
|
@ -437,7 +476,7 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
axisLabel: {
|
||||
color: '#a7c5d4',
|
||||
fontSize: 10,
|
||||
rotate: 15,
|
||||
rotate: 0, // No rotation for daily view
|
||||
interval: axisLabelInterval
|
||||
}
|
||||
},
|
||||
|
|
@ -464,7 +503,10 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
symbolSize: 8,
|
||||
data: seriesData,
|
||||
label: {
|
||||
show: false
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#cdeeff',
|
||||
fontSize: 10
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#00baff',
|
||||
|
|
@ -490,17 +532,15 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
const initHotspotChart = () => {
|
||||
if (hotspotChart.value) {
|
||||
myChart = echarts.init(hotspotChart.value);
|
||||
const initialDataSet = chartDataSets[activeChartTab.value];
|
||||
const axisLabelInterval = (index) => index % 4 ===
|
||||
0; // Show label every 4 points (0, 4, 8, 12) for sparse view
|
||||
myChart.setOption(getChartOptions(fullXAxisLabels, initialDataSet.data, initialDataSet.yAxisMax,
|
||||
axisLabelInterval));
|
||||
const initialDataSet = chartDataSets.default[activeChartTab.value];
|
||||
myChart.setOption(getChartOptions(dailyXAxisLabels, initialDataSet.data, initialDataSet.yAxisMax,
|
||||
0)); // Interval 0 for daily view is fine
|
||||
}
|
||||
};
|
||||
|
||||
watch(activeChartTab, (newTab) => {
|
||||
if (myChart) {
|
||||
const dataSet = chartDataSets[newTab];
|
||||
const dataSet = chartDataSets.default[newTab];
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
max: dataSet.yAxisMax
|
||||
|
|
@ -511,23 +551,48 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Modal Logic */
|
||||
const showDetailsModal = ref(false);
|
||||
const detailsChart = ref(null);
|
||||
let myDetailsChart = null;
|
||||
|
||||
|
||||
const openDetailsModal = async () => {
|
||||
showDetailsModal.value = true;
|
||||
await nextTick();
|
||||
if (detailsChart.value && !myDetailsChart) {
|
||||
myDetailsChart = echarts.init(detailsChart.value);
|
||||
const dataSet = chartDataSets.trend; // Details view always shows trend
|
||||
myDetailsChart.setOption(getChartOptions(fullXAxisLabels, dataSet.data, dataSet.yAxisMax,
|
||||
0)); // Interval 0 to show all labels
|
||||
}
|
||||
};
|
||||
showDetailsModal.value = true;
|
||||
await nextTick();
|
||||
|
||||
if (detailsChart.value && !myDetailsChart) {
|
||||
myDetailsChart = echarts.init(detailsChart.value);
|
||||
|
||||
// 关键改动：根据当前激活的标签页来决定使用哪个数据集
|
||||
// 我们假设放大的图表也分'trend'和'cumulative'
|
||||
// 您需要在 chartDataSets.details 中也为 cumulative 提供数据
|
||||
|
||||
let dataSet;
|
||||
let xAxisLabels;
|
||||
let rotate = 0; // 默认不旋转标签
|
||||
|
||||
if (activeChartTab.value === 'trend') {
|
||||
// 如果是趋势图，使用更详细的颗粒度数据
|
||||
dataSet = chartDataSets.details.trend; // { data: [...], yAxisMax: ... }
|
||||
xAxisLabels = granularXAxisLabels;
|
||||
rotate = 15; // 详细数据需要旋转标签
|
||||
} else { // activeChartTab.value === 'cumulative'
|
||||
// 更正：将 default 修改为 details
|
||||
dataSet = chartDataSets.details.cumulative;
|
||||
xAxisLabels = granularXAxisLabels; // [更正] X轴标签也使用精细的颗粒度
|
||||
rotate = 15; // [更正] 数据点变多了，同样需要旋转标签
|
||||
}
|
||||
|
||||
const options = getChartOptions(xAxisLabels, dataSet.data, dataSet.yAxisMax, 0);
|
||||
|
||||
// 仅在需要时旋转X轴标签
|
||||
options.xAxis.axisLabel.rotate = rotate;
|
||||
|
||||
myDetailsChart.setOption(options);
|
||||
}
|
||||
};
|
||||
|
||||
const closeDetailsModal = () => {
|
||||
showDetailsModal.value = false;
|
||||
if (myDetailsChart) {
|
||||
|
|
@ -535,15 +600,51 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
myDetailsChart = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
initHotspotChart();
|
||||
});
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
if (myChart) myChart.dispose();
|
||||
if (myDetailsChart) myDetailsChart.dispose();
|
||||
});
|
||||
|
||||
|
||||
// // 1. 定义图表数据 (请将图片路径替换为您自己的)
|
||||
// const chartData = ref([
|
||||
// {
|
||||
// name: '趋势热度图',
|
||||
// smallImage: '/src/assets/images/trend-chart.png', // 面板中显示的小图
|
||||
// largeImage: '/src/assets/images/trend-chart-large.png' // 弹窗中显示的大图
|
||||
// },
|
||||
// {
|
||||
// name: '累计热度图',
|
||||
// smallImage: '/src/assets/images/cumulative-chart.png',
|
||||
// largeImage: '/src/assets/images/cumulative-chart-large.png'
|
||||
// }
|
||||
// ]);
|
||||
|
||||
// // 2. 追踪当前激活的标签页，默认为0 (第一个)
|
||||
// const activeTab = ref(0);
|
||||
|
||||
// // 3. 控制详情弹窗的显示状态
|
||||
// const dialogVisible = ref(false);
|
||||
|
||||
// // 4. 计算属性，用于获取当前激活标签的大图路径
|
||||
// const currentLargeImage = computed(() => {
|
||||
// return chartData.value[activeTab.value]?.largeImage || '';
|
||||
// });
|
||||
|
||||
// // 5. 切换标签页的方法
|
||||
// const switchTab = (index) => {
|
||||
// activeTab.value = index;
|
||||
// };
|
||||
|
||||
// // 6. 打开详情弹窗的方法
|
||||
// const showDetails = () => {
|
||||
// dialogVisible.value = true;
|
||||
// };
|
||||
/* ******************事件热度******** */
|
||||
|
||||
|
||||
|
|
@ -1132,10 +1233,8 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
/* *****************领袖分析end******************* */
|
||||
|
||||
/* **********************事件热度start***************** */
|
||||
|
||||
/* ***************事件热度**********/
|
||||
/* 事件热度图区域样式 */
|
||||
.event-hot {
|
||||
/* Event Hotspot Chart Styles */
|
||||
.event-hot {
|
||||
position: relative;
|
||||
width: 352px;
|
||||
height: 296px;
|
||||
|
|
@ -1214,13 +1313,61 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* --- [FIX] --- */
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Removed height: 100% to prevent covering other elements */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-overlay {
|
||||
position: fixed; /* 固定定位，覆盖整个视口 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000; /* 确保在最上层 */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #0d1b38; /* 弹窗背景色，与您的UI风格保持一致 */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3a95ff;
|
||||
box-shadow: 0 0 25px rgba(58, 149, 255, 0.5);
|
||||
width: 80%;
|
||||
max-width: 900px; /* 弹窗最大宽度 */
|
||||
height: 60%;
|
||||
max-height: 500px;
|
||||
display: flex; /* 使用flex布局，让图表容器撑满 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a7c5d4;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 详情图表的容器，必须有明确的尺寸 */
|
||||
.details-chart-container {
|
||||
width: 100%;
|
||||
height: 100%; /* 撑满 modal-content 的剩余空间 */
|
||||
flex-grow: 1; /* 占据所有可用空间 */
|
||||
}
|
||||
/* *****************事件热度******** */
|
||||
|
||||
/* *******************事件热度end****************** */
|
||||
|
||||
|
||||
|
|
@ -1265,4 +1412,52 @@ import * as echarts from 'echarts'; // 引入 ECharts
|
|||
font-size: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-overlay {
|
||||
position: fixed; /* 固定定位，覆盖整个视口 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000; /* 确保在最上层 */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #0d1b38; /* 弹窗背景色，与您的UI风格保持一致 */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3a95ff;
|
||||
box-shadow: 0 0 25px rgba(58, 149, 255, 0.5);
|
||||
width: 80%;
|
||||
max-width: 900px; /* 弹窗最大宽度 */
|
||||
height: 60%;
|
||||
max-height: 500px;
|
||||
display: flex; /* 使用flex布局，让图表容器撑满 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a7c5d4;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 详情图表的容器，必须有明确的尺寸 */
|
||||
.details-chart-container {
|
||||
width: 100%;
|
||||
height: 100%; /* 撑满 modal-content 的剩余空间 */
|
||||
flex-grow: 1; /* 占据所有可用空间 */
|
||||
}
|
||||
|
||||
</style>
|
||||
0
src/views/new_file11.md
Normal file
0
src/views/new_file11.md
Normal file
0
src/views/new_file12.md
Normal file
0
src/views/new_file12.md
Normal file
|
|
@ -0,0 +1,918 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<img src="../assets/images/instruction.png" alt="" class="intruduction">
|
||||
</div>
|
||||
<div class="leader-containner1">
|
||||
<div class="leader-show">
|
||||
<img src="../assets/images/leader-show.png" alt="" style="margin-top: -6px;">
|
||||
<div class="all-leader">
|
||||
<button v-for="(item, index) in buttonList" :key="index" :class="{ active: activeButton === index }"
|
||||
@click="changeData(index)">
|
||||
{{ item }}
|
||||
</button>
|
||||
<div class="leader-data">
|
||||
<div v-if="timePointDataIndex === 0" class="leader-list-wrapper">
|
||||
<div v-for="leader in filteredLeaders" :key="leader.name" class="leader-item">
|
||||
<img :src="leader.avatar" alt="avatar" class="leader-avatar" />
|
||||
<div class="leader-info">
|
||||
<p class="leader-name">{{ leader.name }}</p>
|
||||
<span class="leader-stat">粉丝数量: {{ leader.followers }}</span>
|
||||
<span class="leader-stat">发帖总数: {{ leader.posts }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="leader-radio">
|
||||
<div>
|
||||
<img src="../assets/images/peiluoxi.png" alt="" style="margin-left: 125px;">
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="leader-time">
|
||||
<p>2022.07.31 00:00:00</p>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
|
||||
<div v-for="(breakpoint, index) in breakpoints" :key="index" class="breakpoint"
|
||||
:style="{ left: breakpoint + '%' }" @click="pauseProgress(index)"></div>
|
||||
<div class="drag-button" :style="{ left: progress + '%' }" @mousedown="startDrag"></div>
|
||||
</div>
|
||||
<p>2022.08.01 00:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="leader-ansys">
|
||||
<div class="charts-wrapper">
|
||||
<div v-for="(chart, index) in chartData" :key="index" class="chart-section">
|
||||
<h3 class="chart-title">{{ chart.title }}</h3>
|
||||
<div class="chart-area">
|
||||
<div class="x-axis">
|
||||
<div class="axis-labels">
|
||||
<span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
|
||||
</div>
|
||||
<span class="unit">{{ chart.unit }}</span>
|
||||
</div>
|
||||
<div class="chart-body">
|
||||
<div v-for="item in chart.series" :key="item.name" class="bar-row">
|
||||
<span class="row-label">{{ item.name }}</span>
|
||||
<div class="bar-wrapper">
|
||||
<div class="bar-container">
|
||||
<div class="bar" :class="item.name === '所有用户' ? 'bar-user' : 'bar-leader'"
|
||||
:style="{ width: (item.value / chart.max) * 100 + '%' }"></div>
|
||||
<span class="value"
|
||||
:class="item.name === '所有用户' ? 'value-user' : 'value-leader'"
|
||||
:style="{ left: `calc(${(item.value / chart.max) * 100}% + 8px)` }">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="leader-containner2">
|
||||
<div class="event-hot">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">事件热度图</h3>
|
||||
</div>
|
||||
<div class="chart-controls">
|
||||
<button :class="{ active: activeChartTab === 'trend' }"
|
||||
@click="activeChartTab = 'trend'">趋势热度图</button>
|
||||
<button :class="{ active: activeChartTab === 'cumulative' }"
|
||||
@click="activeChartTab = 'cumulative'">累计热度图</button>
|
||||
<button class="details-btn" @click="openDetailsModal">查看详情</button>
|
||||
</div>
|
||||
<div ref="hotspotChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="leader-post" ref="leaderPost">
|
||||
<div ref="originalContent">
|
||||
<img src="../assets/images/tiewen.png" alt="">
|
||||
</div>
|
||||
<div ref="clonedContent"></div>
|
||||
</div>
|
||||
|
||||
<div class="words">
|
||||
<img src="../assets/images/words.png" alt="" class="section-title-img">
|
||||
<img src="../assets/images/wordsimg.png" alt="" style="margin-top: 10px;margin-left: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Modal -->
|
||||
<div v-if="showDetailsModal" class="modal-overlay" @click.self="closeDetailsModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">事件热度详情 (每6小时)</h3>
|
||||
<button class="modal-close-btn" @click="closeDetailsModal">×</button>
|
||||
</div>
|
||||
<div ref="detailsChart" class="modal-chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Modal -->
|
||||
<div v-if="showDetailsModal" class="modal-overlay" @click.self="closeDetailsModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">事件热度详情 (每6小时)</h3>
|
||||
<button class="modal-close-btn" @click="closeDetailsModal">×</button>
|
||||
</div>
|
||||
<div ref="detailsChart" class="modal-chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
watch
|
||||
} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// Refs and State
|
||||
const buttonList = ['全部', '新闻媒体', '自媒体', '政府官号'];
|
||||
const activeButton = ref(0);
|
||||
const leaderPost = ref(null);
|
||||
const originalContent = ref(null);
|
||||
const clonedContent = ref(null);
|
||||
let scrollInterval = null;
|
||||
|
||||
/* Opinion Leader Data */
|
||||
const leadersData = ref([{
|
||||
name: 'Hu Xijin 胡锡进',
|
||||
followers: '53.8万',
|
||||
posts: '54',
|
||||
avatar: '',
|
||||
category: '自媒体'
|
||||
},
|
||||
{
|
||||
name: 'Indo-Pacific News',
|
||||
followers: '11.5万',
|
||||
posts: '11.3万',
|
||||
avatar: '',
|
||||
category: '新闻媒体'
|
||||
},
|
||||
{
|
||||
name: 'Mick Wallace',
|
||||
followers: '24.8万',
|
||||
posts: '10259',
|
||||
avatar: '',
|
||||
category: '自媒体'
|
||||
},
|
||||
]);
|
||||
const filteredLeaders = computed(() => {
|
||||
const currentCategory = buttonList[activeButton.value];
|
||||
if (currentCategory === '全部') return leadersData.value;
|
||||
return leadersData.value.filter(leader => leader.category === currentCategory);
|
||||
});
|
||||
const timePointDataIndex = ref(0);
|
||||
|
||||
/* Timeline Logic */
|
||||
const progress = ref(0);
|
||||
let progressInterval = null;
|
||||
const breakpoints = [4, 12.5, 25, 37.5, 50, 62.5, 75, 87.5];
|
||||
const isPaused = ref(false);
|
||||
const startProgress = () => {
|
||||
/* ... */ };
|
||||
const pauseProgress = (index) => {
|
||||
/* ... */ };
|
||||
const changeData = (index) => {
|
||||
activeButton.value = index;
|
||||
};
|
||||
|
||||
/* Event Hotspot Chart Logic */
|
||||
const hotspotChart = ref(null);
|
||||
let myChart = null;
|
||||
const activeChartTab = ref('cumulative'); // Default to cumulative
|
||||
|
||||
// --- [MODIFIED] Data Processing ---
|
||||
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'
|
||||
];
|
||||
|
||||
// Calculate daily summary data
|
||||
const dailyTrendData = [
|
||||
granularTrendData.slice(0, 4).reduce((a, b) => a + b, 0), // 7.31
|
||||
granularTrendData.slice(4, 8).reduce((a, b) => a + b, 0), // 8.1
|
||||
granularTrendData.slice(8, 12).reduce((a, b) => a + b, 0), // 8.2
|
||||
granularTrendData.slice(12, 15).reduce((a, b) => a + b, 0) // 8.3
|
||||
];
|
||||
const dailyCumulativeData = dailyTrendData.reduce((acc, val) => {
|
||||
acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val);
|
||||
return acc;
|
||||
}, []);
|
||||
const dailyXAxisLabels = ['7.31', '8.1', '8.2', '8.3'];
|
||||
|
||||
// Organize datasets for easy access
|
||||
const chartDataSets = {
|
||||
default: {
|
||||
trend: {
|
||||
data: dailyTrendData,
|
||||
yAxisMax: 60000
|
||||
},
|
||||
cumulative: {
|
||||
data: dailyCumulativeData,
|
||||
yAxisMax: 120000
|
||||
}
|
||||
},
|
||||
details: {
|
||||
trend: {
|
||||
data: granularTrendData,
|
||||
yAxisMax: 20000
|
||||
}
|
||||
}
|
||||
};
|
||||
// --- End Data Processing ---
|
||||
|
||||
const getChartOptions = (xAxisData, seriesData, yMax, axisLabelInterval) => ({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 21, 41, 0.8)',
|
||||
borderColor: '#3a95ff',
|
||||
textStyle: {
|
||||
color: '#cbeaff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '22%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(62, 115, 171, 0.5)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#a7c5d4',
|
||||
fontSize: 10,
|
||||
rotate: 0, // No rotation for daily view
|
||||
interval: axisLabelInterval
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: yMax,
|
||||
axisLabel: {
|
||||
color: '#a7c5d4',
|
||||
formatter: '{value}'
|
||||
},
|
||||
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: 10
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#00baff',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
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)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
const initHotspotChart = () => {
|
||||
if (hotspotChart.value) {
|
||||
myChart = echarts.init(hotspotChart.value);
|
||||
const initialDataSet = chartDataSets.default[activeChartTab.value];
|
||||
myChart.setOption(getChartOptions(dailyXAxisLabels, initialDataSet.data, initialDataSet.yAxisMax,
|
||||
0)); // Interval 0 for daily view is fine
|
||||
}
|
||||
};
|
||||
|
||||
watch(activeChartTab, (newTab) => {
|
||||
if (myChart) {
|
||||
const dataSet = chartDataSets.default[newTab];
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
max: dataSet.yAxisMax
|
||||
},
|
||||
series: [{
|
||||
data: dataSet.data
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* Modal Logic */
|
||||
const showDetailsModal = ref(false);
|
||||
const detailsChart = ref(null);
|
||||
let myDetailsChart = null;
|
||||
|
||||
const openDetailsModal = async () => {
|
||||
showDetailsModal.value = true;
|
||||
await nextTick();
|
||||
if (detailsChart.value && !myDetailsChart) {
|
||||
myDetailsChart = echarts.init(detailsChart.value);
|
||||
const dataSet = chartDataSets.details.trend;
|
||||
const options = getChartOptions(granularXAxisLabels, dataSet.data, dataSet.yAxisMax,
|
||||
0); // Interval 0 to show all
|
||||
options.xAxis.axisLabel.rotate = 15; // Rotate labels in dense view
|
||||
myDetailsChart.setOption(options);
|
||||
}
|
||||
};
|
||||
|
||||
const closeDetailsModal = () => {
|
||||
showDetailsModal.value = false;
|
||||
if (myDetailsChart) {
|
||||
myDetailsChart.dispose();
|
||||
myDetailsChart = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
initHotspotChart();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (myChart) myChart.dispose();
|
||||
if (myDetailsChart) myDetailsChart.dispose();
|
||||
});
|
||||
|
||||
|
||||
/* Leader Analysis Data */
|
||||
const chartData = ref([{
|
||||
title: '平均发帖数',
|
||||
unit: '数量',
|
||||
max: 10,
|
||||
series: [{
|
||||
name: '领袖',
|
||||
value: 6.4
|
||||
}, {
|
||||
name: '所有用户',
|
||||
value: 0.46
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '帖子平均生存周期',
|
||||
unit: '天数',
|
||||
max: 10,
|
||||
series: [{
|
||||
name: '领袖',
|
||||
value: 2.19
|
||||
}, {
|
||||
name: '所有用户',
|
||||
value: 2.32
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '平均粉丝数',
|
||||
unit: '天数',
|
||||
max: 10,
|
||||
series: [{
|
||||
name: '领袖',
|
||||
value: 2.19
|
||||
}, {
|
||||
name: '所有用户',
|
||||
value: 0.46
|
||||
}]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-color: #0d1b38;
|
||||
border: 1px solid #3e73ab;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 25px rgba(0, 186, 255, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid rgba(62, 115, 171, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #e0f7ff;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a7c5d4;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-chart-container {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Event Hotspot Chart Styles */
|
||||
.event-hot {
|
||||
position: relative;
|
||||
width: 352px;
|
||||
height: 296px;
|
||||
margin-top: 10px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 2px;
|
||||
background-color: #04142166;
|
||||
border-top: 1px solid #3e73ab;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #e0f7ff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header::after {
|
||||
content: '////';
|
||||
letter-spacing: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
color: rgba(77, 159, 223, 0.6);
|
||||
font-weight: bold;
|
||||
transform: translateY(-50%) skewX(-20deg);
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chart-controls button {
|
||||
background: none;
|
||||
border: 1px solid #1c588f;
|
||||
color: #a7c5d4;
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.chart-controls button.active {
|
||||
background-color: #236291;
|
||||
color: white;
|
||||
border-color: #236291;
|
||||
}
|
||||
|
||||
.chart-controls button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.chart-controls button:nth-child(2) {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.details-btn {
|
||||
margin-left: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Existing Styles */
|
||||
.leader-data {
|
||||
height: calc(100% - 30px);
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #2a3e5e #0d1b38;
|
||||
}
|
||||
|
||||
.leader-data::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.leader-data::-webkit-scrollbar-track {
|
||||
background: #0d1b38;
|
||||
}
|
||||
|
||||
.leader-data::-webkit-scrollbar-thumb {
|
||||
background-color: #2a3e5e;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #0d1b38;
|
||||
}
|
||||
|
||||
.leader-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
color: #a7c5d4;
|
||||
}
|
||||
|
||||
.leader-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background-color: #2a3e5e;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24" 24" fill="none" stroke="%235f7e9c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
border: 1px solid #2a3e5e;
|
||||
}
|
||||
|
||||
.leader-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.leader-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 5px 0;
|
||||
color: #e0f7ff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.leader-stat {
|
||||
font-size: 13px;
|
||||
color: #a7c5d4;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.intruduction {
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.leader-containner1,
|
||||
.leader-containner2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.leader-show {
|
||||
width: 352px;
|
||||
height: 540px;
|
||||
background-color: #04142166;
|
||||
border: 1px solid #3AA1F833;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.all-leader {
|
||||
width: 305px;
|
||||
height: 450px;
|
||||
margin-left: 24px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.all-leader button {
|
||||
height: 24px;
|
||||
margin-left: 0px;
|
||||
font-family: OPPOSans;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #04142166;
|
||||
color: #E1F4FF;
|
||||
border: 1px solid #1C588F;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.all-leader button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.all-leader button:nth-child(4) {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.all-leader button.active {
|
||||
background-color: #236291;
|
||||
}
|
||||
|
||||
.leader-radio {
|
||||
width: 800px;
|
||||
height: 540px;
|
||||
margin-left: 10px;
|
||||
background-color: #04142166;
|
||||
border: 1px solid #3AA1F833;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.leader-time {
|
||||
width: 767px;
|
||||
height: 42px;
|
||||
margin-left: 7px;
|
||||
margin-top: 445px;
|
||||
border-radius: 4px;
|
||||
color: #FFFFFF;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
background-image: linear-gradient(to right, #00527D, #97E3F87A);
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
top: 50%;
|
||||
margin-left: 200px;
|
||||
height: 6px;
|
||||
border-radius: 20px;
|
||||
background-color: #3B7699;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: #007BFF;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.breakpoint {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #007BFF;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leader-ansys {
|
||||
width: 372px;
|
||||
height: 542px;
|
||||
margin-left: 10px;
|
||||
border-radius: 2px;
|
||||
background-color: #04142166;
|
||||
border: 1px solid #3AA1F833;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.leader-post {
|
||||
width: 800px;
|
||||
height: 296px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 2px;
|
||||
background-color: #04142166;
|
||||
border: 1px solid #3AA1F833;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 296px;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.words {
|
||||
width: 372px;
|
||||
height: 296px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 2px;
|
||||
background-color: #04142166;
|
||||
border: 1px solid #3AA1F833;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.charts-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
color: #cdeeff;
|
||||
margin: 0 0 25px 0;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.chart-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #4da0e0;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.x-axis {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 65px;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #8bacc8;
|
||||
}
|
||||
|
||||
.axis-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.unit {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
position: relative;
|
||||
background-image: linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px), linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px), linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px), linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px), linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20% 100%;
|
||||
background-position: 20% 0, 40% 0, 60% 0, 80% 0, 100% 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.bar-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
width: 65px;
|
||||
flex-shrink: 0;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding-right: 5px;
|
||||
color: #cdeeff;
|
||||
}
|
||||
|
||||
.bar-wrapper {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 100%;
|
||||
border-radius: 7px;
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bar-leader {
|
||||
background-color: #3d8dcb;
|
||||
}
|
||||
|
||||
.bar-user {
|
||||
background-color: #27c1a8;
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value-leader {
|
||||
color: #3d8dcb;
|
||||
}
|
||||
|
||||
.value-user {
|
||||
color: #27c1a8;
|
||||
}
|
||||
</style>
|
||||
0
src/views/new_file9.md
Normal file
0
src/views/new_file9.md
Normal file
Loading…
Reference in New Issue
Block a user