hz4th_coder
13abdea15b
- ocean 海洋蓝：清爽专业，适合商务科技场景 - forest 森林绿：自然护眼，适合长时间阅读 - sunset 日落橙：温暖活力，吸引注意力 - lavender 薰衣草紫：优雅浪漫，柔和梦幻 - minimal 极简灰：干净现代，强调内容本身 现在共10种表格主题可选
191 lines
9.5 KiB
HTML
191 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>数据可视化图表生成器</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 顶部标题 -->
|
|
<header class="app-header">
|
|
<h1>📊 数据可视化图表生成器</h1>
|
|
<p class="subtitle">粘贴数据，生成精美图表或表格</p>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<!-- 左侧面板：数据输入和配置 -->
|
|
<div class="left-panel">
|
|
<!-- 模式切换 -->
|
|
<div class="panel-section">
|
|
<div class="mode-switch">
|
|
<button class="mode-btn active" id="btnChartMode" onclick="switchMode('chart')">📈 图表模式</button>
|
|
<button class="mode-btn" id="btnTableMode" onclick="switchMode('table')">📋 表格模式</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据输入区 -->
|
|
<div class="panel-section">
|
|
<h2>📝 数据输入</h2>
|
|
<div class="input-format-hint">
|
|
<p><strong>格式说明：</strong></p>
|
|
<p>第一行为表头，后续行为数据</p>
|
|
<pre>类别, 系列1, 系列2, 系列3
|
|
A, 10, 20, 30
|
|
B, 15, 25, 35
|
|
C, 20, 30, 40</pre>
|
|
</div>
|
|
<textarea id="dataInput" placeholder="在此粘贴数据... 支持逗号、制表符分隔 示例： 产品, 2023年, 2024年, 2025年 Q1, 120, 150, 180 Q2, 200, 220, 260 Q3, 180, 210, 240 Q4, 250, 280, 320"></textarea>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" id="btnGenerate" onclick="generate()">🎨 生成图表</button>
|
|
<button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
|
|
<button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表配置区 -->
|
|
<div class="panel-section" id="chartConfigSection">
|
|
<h2>⚙️ 图表配置</h2>
|
|
|
|
<div class="config-group">
|
|
<label>图表类型</label>
|
|
<select id="chartType" onchange="updateChart()">
|
|
<option value="bar">柱状图</option>
|
|
<option value="line">折线图</option>
|
|
<option value="bar-line">柱状图+折线图混合</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>标题</label>
|
|
<input type="text" id="chartTitle" placeholder="图表标题" oninput="updateChart()">
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>主题风格</label>
|
|
<select id="themeStyle" onchange="updateChart()">
|
|
<option value="default">默认</option>
|
|
<option value="dark">深色</option>
|
|
<option value="macarons">马卡龙</option>
|
|
<option value="gradient">渐变</option>
|
|
<option value="retro">复古</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>显示选项</label>
|
|
<div class="checkbox-group">
|
|
<label><input type="checkbox" id="showLegend" checked onchange="updateChart()"> 图例</label>
|
|
<label><input type="checkbox" id="showGrid" checked onchange="updateChart()"> 网格线</label>
|
|
<label><input type="checkbox" id="showLabel" onchange="updateChart()"> 数据标签</label>
|
|
<label><input type="checkbox" id="stackMode" onchange="updateChart()"> 堆叠模式</label>
|
|
<label><input type="checkbox" id="smoothLine" checked onchange="updateChart()"> 平滑曲线</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格配置区 -->
|
|
<div class="panel-section" id="tableConfigSection" style="display:none;">
|
|
<h2>⚙️ 表格配置</h2>
|
|
|
|
<div class="config-group">
|
|
<label>标题</label>
|
|
<input type="text" id="tableTitle" placeholder="表格标题" oninput="updateTable()">
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>主题风格</label>
|
|
<select id="tableTheme" onchange="updateTable()">
|
|
<option value="default">默认</option>
|
|
<option value="dark">深色</option>
|
|
<option value="macarons">马卡龙</option>
|
|
<option value="gradient">渐变</option>
|
|
<option value="retro">复古</option>
|
|
<option value="ocean">海洋</option>
|
|
<option value="forest">森林</option>
|
|
<option value="sunset">日落</option>
|
|
<option value="lavender">薰衣草</option>
|
|
<option value="minimal">极简</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>字体大小: <span id="fontSizeValue">14</span>px</label>
|
|
<input type="range" id="tableFontSize" min="10" max="24" value="14" oninput="updateFontSize(); updateTable()">
|
|
</div>
|
|
|
|
<div class="config-group">
|
|
<label>显示选项</label>
|
|
<div class="checkbox-group">
|
|
<label><input type="checkbox" id="stripeRows" checked onchange="updateTable()"> 斑马纹</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系列配置区 -->
|
|
<div class="panel-section" id="seriesConfigSection">
|
|
<h2>🎨 系列配置</h2>
|
|
<div id="seriesConfig" class="series-config">
|
|
<p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 区域分割配置 -->
|
|
<div class="panel-section" id="splitConfigSection">
|
|
<h2>📐 区域分割</h2>
|
|
<div class="config-group">
|
|
<label><input type="checkbox" id="enableSplit" onchange="updateChart()"> 启用区域分割</label>
|
|
</div>
|
|
<div id="splitConfig" class="split-config" style="display:none;">
|
|
<div class="config-group">
|
|
<label>分割位置（横坐标索引，如：3 表示在第3个数据后分割）</label>
|
|
<input type="number" id="splitIndex" value="3" min="1" oninput="updateChart()">
|
|
</div>
|
|
<div class="config-group">
|
|
<label>左侧区域标签</label>
|
|
<input type="text" id="leftLabel" placeholder="如：2023年" oninput="updateChart()">
|
|
</div>
|
|
<div class="config-group">
|
|
<label>右侧区域标签</label>
|
|
<input type="text" id="rightLabel" placeholder="如：2024年" oninput="updateChart()">
|
|
</div>
|
|
<div class="config-group">
|
|
<label>分割线样式</label>
|
|
<select id="splitStyle" onchange="updateChart()">
|
|
<option value="solid">实线</option>
|
|
<option value="dashed">虚线</option>
|
|
<option value="dotted">点线</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导出按钮 -->
|
|
<div class="panel-section">
|
|
<div class="btn-group">
|
|
<button class="btn btn-success" onclick="exportImage('png')">📥 导出PNG</button>
|
|
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧面板：图表预览 -->
|
|
<div class="right-panel">
|
|
<div class="chart-container">
|
|
<div id="chartArea" class="chart-area">
|
|
<div class="placeholder">
|
|
<p>📊</p>
|
|
<p>输入数据后点击"生成图表"</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|