112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// 市场趋势图表
|
|
const marketTrendChart = echarts.init(document.getElementById('marketTrendChart'));
|
|
marketTrendChart.setOption({
|
|
title: {
|
|
text: '数据要素市场规模趋势',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
bottom: '5%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '15%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['2020', '2021', '2022', '2023', '2024E']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '亿元'
|
|
},
|
|
series: [
|
|
{
|
|
name: '数据交易规模',
|
|
type: 'bar',
|
|
data: [200, 400, 600, 800, 1000],
|
|
itemStyle: {
|
|
color: '#0d6efd'
|
|
}
|
|
},
|
|
{
|
|
name: '数据融资规模',
|
|
type: 'line',
|
|
data: [2, 4, 6, 8, 10],
|
|
itemStyle: {
|
|
color: '#198754'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 监听窗口大小变化
|
|
window.addEventListener('resize', function() {
|
|
marketTrendChart.resize();
|
|
});
|
|
|
|
// 展示类型切换
|
|
const displayTabs = document.querySelectorAll('.display-tab');
|
|
const displayContents = document.querySelectorAll('.display-content > div');
|
|
|
|
displayTabs.forEach((tab, index) => {
|
|
tab.addEventListener('click', () => {
|
|
// 更新标签状态
|
|
document.querySelector('.display-tab.active').classList.remove('active');
|
|
tab.classList.add('active');
|
|
|
|
// 更新内容显示
|
|
document.querySelector('.display-content > div.active').classList.remove('active');
|
|
displayContents[index].classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 图片放大功能
|
|
const archImage = document.querySelector('.arch-image');
|
|
const imageModal = document.querySelector('.image-modal');
|
|
const modalImage = imageModal.querySelector('img');
|
|
const modalClose = imageModal.querySelector('.image-modal-close');
|
|
|
|
if (archImage) {
|
|
archImage.addEventListener('click', () => {
|
|
const imgSrc = archImage.querySelector('img').src;
|
|
modalImage.src = imgSrc;
|
|
imageModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
});
|
|
}
|
|
|
|
// 点击关闭按钮关闭
|
|
if (modalClose) {
|
|
modalClose.addEventListener('click', () => {
|
|
imageModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
});
|
|
}
|
|
|
|
// 点击背景关闭
|
|
if (imageModal) {
|
|
imageModal.addEventListener('click', (e) => {
|
|
if (e.target === imageModal) {
|
|
modalClose.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ESC键关闭
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && imageModal.classList.contains('show')) {
|
|
modalClose.click();
|
|
}
|
|
});
|
|
});
|