hz4th_coder
121521456d
功能特性： - 支持柱状图、折线图、混合图 - 支持多系列数据对比 - 支持拖拽调整系列顺序和自定义颜色 - 支持区域分割（左右对比） - 5种主题风格可选 - 支持导出PNG/SVG - 响应式布局，适配移动端
145 lines
7.1 KiB
HTML
145 lines
7.1 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">
|
||
<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" onclick="generateChart()">🎨 生成图表</button>
|
||
<button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
|
||
<button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表配置区 -->
|
||
<div class="panel-section">
|
||
<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">
|
||
<h2>🎨 系列配置</h2>
|
||
<div id="seriesConfig" class="series-config">
|
||
<p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 区域分割配置 -->
|
||
<div class="panel-section">
|
||
<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="exportChart('png')">📥 导出PNG</button>
|
||
<button class="btn btn-success" onclick="exportChart('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>
|