<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>诗酒长廊·将进酒数字艺术装置</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
:root {
--wine-color: #c23531;
--river-color: #2f4554;
--hair-color: #61a0a8;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.control-panel {
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.slider-group {
margin: 15px 0;
}
.visual-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
height: 60vh;
}
.poem-chart {
background: rgba(255,255,255,0.8);
border-radius: 8px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>《将进酒》数字意象长廊</h1>
<!-- 后台数据控制面板 -->
<div class="control-panel">
<div class="slider-group">
<label>酒意浓度：<input type="range" id="wine" min="0" max="100" value="50"></label>
<span id="wineValue">50%</span>
</div>
<div class="slider-group">
<label>黄河流速：<input type="range" id="river" min="0" max="100" value="70"></span>
</div>
<div class="slider-group">
<label>白发比例：<input type="range" id="hair" min="0" max="100" value="40"></span>
</div>
</div>
<!-- 前台可视化展示 -->
<div class="visual-container">
<div id="wineChart" class="poem-chart"></div>
<div id="riverChart" class="poem-chart"></div>
<div id="hairChart" class="poem-chart"></div>
</div>
</div>
<script>
// 数据存储对象
let poemData = {
wine: {
current: 50,
history: [30, 45, 50] // 情感演变数据
},
river: {
current: 70,
history: [20, 50, 70]
},
hair: {
current: 40,
history: [10, 25, 40]
}
};
// 初始化图表
const wineChart = echarts.init(document.getElementById('wineChart'));
const riverChart = echarts.init(document.getElementById('riverChart'));
const hairChart = echarts.init(document.getElementById('hairChart'));
// 通用图表配置
const baseOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['初现', '发展', '高潮']
},
yAxis: { max: 100 },
series: [{
type: 'line',
smooth: true,
showSymbol: false
}]
};
// 更新图表函数
function updateCharts() {
const updateChart = (chart, color, data) => {
chart.setOption({
...baseOption,
color: [color],
series: [{
...baseOption.series[0],
data: data.history.concat(data.current),
areaStyle: { color: color + '20' }
}]
});
};
updateChart(wineChart, '#c23531', poemData.wine);
updateChart(riverChart, '#2f4554', poemData.river);
updateChart(hairChart, '#61a0a8', poemData.hair);
}
// 实时数据绑定
document.querySelectorAll('input[type="range"]').forEach(slider => {
slider.addEventListener('input', function() {
const type = this.id;
const value = parseInt(this.value);
// 更新数据
poemData[type].current = value;
poemData[type].history = updateHistory(poemData[type].history, value);
// 更新显示
document.getElementById(type + 'Value').textContent = value + '%';
updateCharts();
});
});
// 历史数据处理
function updateHistory(arr, newValue) {
const newArr = [...arr.slice(1), newValue];
return newArr.map(v => Math.min(v + Math.random()*10-5, 100)); // 添加自然波动
}
// 初始化渲染
updateCharts();
// 数据保存/加载
function saveData() {
localStorage.setItem('poemConfig', JSON.stringify(poemData));
}
function loadData() {
const saved = localStorage.getItem('poemConfig');
if(saved) poemData = JSON.parse(saved);
}
</script>
</body>
</html
</html>
index.html
index.html