当前位置：首页 > news >正文

可视化图表与源代码显示的动态调整

news 来源：原创 2024/9/20 8:07:09

可视化图表与源代码显示的动态调整

页面效果描述：本篇代码实现了通过拖动一个可调整大小的分隔符，用户可以动态地调整图表显示区域和源代码显示区域的大小。通过监听鼠标事件，当用户拖动分隔符时，会动态计算并更新两个区域的大小

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="utf-8"><style>body, html {height: 100%;margin: 0;display: flex;flex-direction: column;}#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%;}#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><div id="splitter"></div></div><div id="source-container"><pre id="source-code"></pre><button id="downloadButton" onclick="downloadSourceCode()">下载</button></div></div><script src="echarts.min.js"></script><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;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', 'page.html');element.style.display = 'none';document.body.appendChild(element);element.click();document.body.removeChild(element);}</script>
</body>
</html>