可视化图表与页面源代码显示
页面效果：
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
<title>饼状图</title>
<style>
body {
display: flex;
height: 100%;
margin: 0;
}
#container {
flex: 1;
height: 100%;
}
#source-container {
flex: 1;
overflow: auto;
padding: 20px;
background-color: rgba(111, 231, 35, 0.36); /* 背景色以便区分 */
}
#downloadButton {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
#downloadButton:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="source-container">
<pre id="source-code"></pre>
</div>
<button id="downloadButton" onclick="downloadSource()">下载</button>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/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;
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['年份', '2012', '2013', '2014', '2015', '2016', '2017'],
['数据1', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['数据2', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['数据3', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['数据4', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: '年份',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
// 将源代码放入右侧的容器中
document.getElementById('source-code').textContent = document.documentElement.outerHTML;
// 按钮函数
function downloadSource() {
const source = document.documentElement.outerHTML;
const blob = new Blob([source], { type: 'text/html' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'chart-source.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
万能代码：将下面这段代码放入任何一个前端（
html,css,js）可视化图表示例中，在其页面上都会显示源码及页面下载这个按钮功能
<!--在html中写入-->
<div id="source-container">
<pre id="source-code"></pre>
</div>
<button id="downloadButton" onclick="downloadSource()">下载</button>
/*在CSS中写入*/
body {
display: flex;
height: 100%;
margin: 0;
}
#container {
flex: 1;
height: 100%;
}
#source-container {
flex: 1;
overflow: auto;
padding: 20px;
background-color: rgba(111, 231, 35, 0.36); /* 背景色以便区分 */
}
#downloadButton {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
#downloadButton:hover {
background-color: #0056b3;
}
//在js中写入
// 将源代码放入右侧的容器中
document.getElementById('source-code').textContent = document.documentElement.outerHTML;
// 下载按钮
function downloadSource() {
const source = document.documentElement.outerHTML;
const blob = new Blob([source], { type: 'text/html' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'chart-source.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}