tool/screenshot.html (215 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts-nightly/dist/echarts.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/china.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/world.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.js"
></script>
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"
></script>
<script type="text/javascript" src="./seedrandom.js"></script>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
#viewport {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="viewport"></div>
<script>
// Params parser
var params = {};
(location.search || '')
.substr(1)
.split('&')
.forEach(function (item) {
var kv = item.split('=');
params[kv[0]] = kv[1];
});
var myChart = echarts.init(
document.getElementById('viewport'),
params.t || null
);
var _$getEChartsOption = function () {
return myChart.getOption();
};
var app = {};
</script>
<script>
const myrng = new Math.seedrandom('echarts');
Math.random = function () {
return myrng();
};
function addComponentPadding(componentOpt) {
if (!componentOpt) {
return;
}
if (!(componentOpt instanceof Array)) {
componentOpt = [componentOpt];
}
componentOpt.forEach(function (opt) {
if (!opt.padding) {
opt.padding = 15;
}
});
}
const isAnimated =
!isNaN(params.start) &&
!isNaN(params.end) &&
+params.end > +params.start;
echarts.registerPreprocessor(function (option) {
if (!isAnimated) {
option.animation = false;
if (option.series) {
if (!(option.series instanceof Array)) {
option.series = [option.series];
}
option.series.forEach(function (seriesOpt) {
if (seriesOpt.type === 'graph') {
seriesOpt.force = seriesOpt.force || {};
seriesOpt.force.layoutAnimation = false;
}
seriesOpt.progressive = 1e5;
seriesOpt.animation = false;
});
}
}
addComponentPadding(option.title);
addComponentPadding(option.legend);
addComponentPadding(option.toolbox);
});
if (params.c) {
if (!window.ROOT_PATH) {
// When visiting `screenshot.html` In browser.
console.error('No ROOT_PATH specified. Use default ROOT_PATH "."');
window.ROOT_PATH = '.';
}
const scriptTag = document.createElement('script');
scriptTag.async = false;
scriptTag.src = `../public/examples/js${'gl' in params ? '/gl' : ''}/${
params.c
}.js`;
document.body.appendChild(scriptTag);
let videoRecorder;
scriptTag.onload = function () {
if (isAnimated) {
videoRecorder = new VideoRecorder(myChart);
setTimeout(() => {
videoRecorder.start();
}, +params.start);
setTimeout(() => {
videoRecorder.stop();
}, +params.end);
}
if (typeof option !== 'undefined' && option) {
myChart.setOption(option);
}
};
}
function VideoRecorder(chart) {
this.start = startRecording;
this.stop = stopRecording;
var recorder = null;
var oldRefreshImmediately = chart.getZr().refreshImmediately;
function startRecording() {
// Normal resolution or high resolution?
var compositeCanvas = document.createElement('canvas');
var width = chart.getWidth();
var height = chart.getHeight();
compositeCanvas.width = width;
compositeCanvas.height = height;
var compositeCtx = compositeCanvas.getContext('2d');
chart.getZr().refreshImmediately = function () {
var ret = oldRefreshImmediately.apply(this, arguments);
var canvasList = chart.getDom().querySelectorAll('canvas');
compositeCtx.fillStyle = '#fff';
compositeCtx.fillRect(0, 0, width, height);
for (var i = 0; i < canvasList.length; i++) {
compositeCtx.drawImage(canvasList[i], 0, 0, width, height);
}
return ret;
};
var stream = compositeCanvas.captureStream(25);
recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
var videoData = [];
recorder.ondataavailable = function (event) {
if (event.data && event.data.size) {
videoData.push(event.data);
}
};
recorder.onstop = function () {
var url = URL.createObjectURL(
new Blob(videoData, { type: 'video/webm' })
);
var a = document.createElement('a');
a.href = url;
a.download = `${params.c}.webm`;
a.click();
setTimeout(function () {
window.URL.revokeObjectURL(url);
}, 100);
};
recorder.start();
}
function stopRecording() {
if (recorder) {
chart.getZr().refreshImmediately = oldRefreshImmediately;
recorder.stop();
}
}
}
</script>
</body>
</html>