页面效果描述：本篇文章最后实现了通过拖动一个可调整大小的分隔符，用户可以动态地调整图表显示区域和源代码显示区域的大小。通过监听鼠标事件，当用户拖动分隔符时，会动态计算并更新两个区域的大小
1.原图表显示：
页面效果：
<!DOCTYPE html> <!-- 定义文档类型 -->
<html lang="en" style="height: 100%"> <!-- 定义HTML文档的根元素，并设置样式使高度为100% -->
<head>
<meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
</head>
<body style="height: 100%; margin: 0"> <!-- 定义body元素，并设置样式使高度为100%，边距为0 -->
<div id="container" style="height: 100%"></div> <!-- 图表容器，设置样式使高度为100% -->
<script type="text/javascript" src="echarts.min.js"></script> <!-- 引入ECharts库 -->
<script type="text/javascript">
var dom = document.getElementById('container'); // 获取图表容器
var myChart = echarts.init(dom, null, {
// 初始化ECharts实例
renderer: 'canvas', // 设置渲染器为canvas
useDirtyRect: false // 关闭脏矩形渲染优化
});
var app = {
}; // 定义一个空对象，通常用于存储应用级别的变量
var option; // 定义一个变量用于存储图表配置
// 图表配置项开始
option = {
title: {
// 图表标题
text: '题目' // 标题文本
},
tooltip: {
// 提示框组件
trigger: 'axis', // 触发类型：坐标轴触发
axisPointer: {
// 坐标轴指示器配置项
type: 'cross', // 指示器类型：十字准星
label: {
// 指示器文本标签
backgroundColor: '#6a7985' // 文本标签背景颜色
}
}
},
legend: {
// 图例组件
data: ['数据1', '数据2', '数据3', '数据4', '数据5'] // 图例数据数组
},
toolbox: {
// 工具栏组件
feature: {
// 工具栏功能配置
saveAsImage: {
} // 保存为图片功能
}
},
grid: {
// 直角坐标系内绘图网格
left: '3%', // grid 组件离容器左侧的距离
right: '4%', // grid 组件离容器右侧的距离
bottom: '3%', // grid 组件离容器底部的距离
containLabel: true // grid 区域是否包含坐标轴的刻度标签
},
xAxis: [ // 直角坐标系 grid 中的 x 轴
{
type: 'category', // 坐标轴类型：类目轴
boundaryGap: false, // 类目轴两边不留白
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 类目数据
}
],
yAxis: [ // 直角坐标系 grid 中的 y 轴
{
type: 'value' // 坐标轴类型：数值轴
}
],
series: [ // 系列列表
{
// 第一个系列（数据1）
name: '数据1', // 系列名称
type: 'line', // 系列类型：折线图
stack: 'Total', // 数据堆叠
areaStyle: {
}, // 区域填充样式
emphasis: {
// 高亮状态的样式和标签设置
focus: 'series' // 高亮时聚焦到系列
},
data: [120, 132, 101, 134, 90, 230, 210] // 系列中的数据内容数组
},
// 第二个系列（数据2）配置，与第一个系列类似
{
name: '数据2',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
// 第三个系列（数据3）配置，与第一个系列类似
{
name: '数据3',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
// 第四个系列（数据4）配置，与第一个系列类似
{
name: '数据4',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
// 第五个系列（数据5）配置，与第一个系列类似，但包含额外的标签显示配置
{
name: '数据5',
type: 'line',
stack: 'Total',
label: {
show: true, // 显示标签
position: 'top' // 标签的位置
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === 'object') {
// 判断option是否存在且为对象
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
}
window.addEventListener('resize', myChart.resize); // 添加窗口大小改变时的监听事件，用于图表自适应
</script>
</body>
</html>
2.页面源代码显示：
页面效果：
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
<style>
body {
display: flex; /* 使用Flex布局 */
height: 100%; /* 设置body高度为100% */
margin: 0; /* 去除默认边距 */
}
#container{
flex: 1; /* 分配相等的空间给两个容器 */
height: 100%; /* 设置容器高度为100% */
}
#source-container {
background-color: rgba(111, 231, 35, 0.36); /* 背景色以便区分 */
padding: 20px; /* 设置内边距 */
overflow: auto; /* 设置溢出时自动滚动 */
flex: 1; /* 分配相等的空间给两个容器 */
}
#downloadButton {
padding: 10px 20px; /* 设置内边距 */
background-color: #007bff; /* 设置背景颜色 */
color: #1ed5cf; /* 设置文字颜色 */
border: none; /* 去除边框 */
border-radius: 5px; /* 设置边框圆角 */
cursor: pointer; /* 鼠标悬停时显示指针 */
font-size: 16px; /* 设置字体大小 */
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部20px */
right: 20px; /* 距离右侧20px */
z-index: 1000; /* 设置层级 */
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div> <!-- 图表容器 -->
<div id="source-container"> <!-- 源代码显示容器 -->
<pre id="source-code"></pre> <!-- 用于显示HTML源代码 -->
<button id="downloadButton" onclick="downloadSourceCode()">下载</button> <!-- 下载按钮 -->
</div>
<script type="text/javascript" src="echarts.min.js"></script> <!-- 引入ECharts库 -->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {
};
var option;
option = {
/* 图表配置项开始 */
title: {
text: '题目'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '数据1',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '数据2',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '数据3',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '数据4',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '数据5',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
// 设置源代码显示
document.getElementById('source-code').textContent = document.documentElement.outerHTML;
// 下载源代码功能
function downloadSourceCode() {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(document.documentElement.outerHTML));
element.setAttribute('download', '图表.html');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</body>
</html>
3.页面动态调整：
页面效果：
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
<style>
/* 设置html和body元素高度为100%，并启用flex布局 */
body, html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
/* 主容器，flex布局，占据剩余空间 */
#main-container {
display: flex;
flex: 1; /* 占据剩余空间 */
overflow: hidden;
}
/* 图表容器，初始时占据全部剩余空间 */
#chart-container {
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
}
#source-container {
flex: 0; /* 初始时不占据空间，根据需要调整 */
background-color: rgba(111, 231, 35, 0.36);
padding: 30px;
overflow: auto;
/*height: 90%;*/
}
/* 分割线，用于调整#chart-container和#source-container的大小 */
#splitter {
background-color: #ccc;
cursor: ew-resize;
width: 5px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
/* 下载按钮样式 */
#downloadButton {
padding: 10px 20px;
background-color: #007bff;
color: #1ed5cf;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="main-container">
<div id="chart-container">
<div id="container" style="height: 100%;"></div> <!-- ECharts图表容器 -->
<div id="splitter"></div> <!-- 分割线，用于拖动调整大小 -->
</div>
<div id="source-container">
<pre id="source-code"></pre> <!-- 显示HTML源码 -->
<button id="downloadButton" onclick="downloadSourceCode()">下载</button> <!-- 下载按钮 -->
</div>
</div>
<!-- 引入ECharts库 -->
<script src="echarts.min.js"></script>
<script type="text/javascript">
// 初始化ECharts图表
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {
};
var option;
// 设置图表选项
option = {
title: {
text: '题目'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '数据1',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '数据2',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '数据3',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '数据4',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '数据5',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
// 监听窗口大小变化以调整图表大小
window.addEventListener('resize', myChart.resize);
// 设置源代码显示
document.getElementById('source-code').textContent = document.documentElement.outerHTML;
// 分割线拖动调整大小的逻辑
let startX, startWidth, isResizing = false;
document.getElementById('splitter').addEventListener('mousedown', function(e) {
isResizing = true;
startX = e.clientX;
startWidth = document.getElementById('chart-container').offsetWidth;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mouseleave', onMouseUp);
});
/* 拖动时调整大小的逻辑 */
function onMouseMove(e) {
if (!isResizing) return;
let newWidth = startWidth + (e.clientX - startX);
newWidth = Math.max(100, Math.min(document.getElementById('main-container').offsetWidth - 5, newWidth));
document.getElementById('chart-container').style.flex =
`${
newWidth / document.getElementById('main-container').offsetWidth * 100}%`;
document.getElementById('source-container').style.flex = `calc(100% - ${
newWidth}px)`;
}
/* 停止拖动时的清理逻辑 */
function onMouseUp() {
isResizing = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mouseleave', onMouseUp);
}
// 下载源代码功能
function downloadSourceCode() {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(document.documentElement.outerHTML));
element.setAttribute('download', '图表.html');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</body>
</html>
