首页 > 文章 > 前端

如何用JavaScript高效生成基于ECharts图表的高清视频或GIF动画？

时间：2025-03-17 08:00:33 403浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本文介绍如何高效生成基于ECharts图表的高清视频或GIF动画。直接用屏幕录制软件生成的视频清晰度往往不足，而ECharts使用canvas或SVG渲染，这为我们提供了提升清晰度的机会。文章将讲解如何利用JavaScript库（如recordrtc.js和gif.js）直接从ECharts图表生成高清MP4视频和GIF动画，避免屏幕录制带来的清晰度损失，并提供相应的代码示例和参数调整建议，帮助开发者快速实现ECharts图表的高清视频/GIF导出功能，提升图表可视化效果。

基于echarts图表生成高清晰度视频的方法

本文将探讨如何将基于echarts生成的动态图表（例如支持动态排序的柱状图）转化为高清晰度的视频。直接使用屏幕录制软件往往会造成视频清晰度不足的问题，而echarts使用canvas或svg渲染，这为我们提供了提升清晰度的机会。

问题在于如何利用echarts的canvas渲染特性直接生成视频，而不是依赖屏幕录制。解决方法是使用javascript库来实现视频录制功能。

一种方法是使用recordrtc.js插件。该插件结合html2canvas，可以将canvas内容录制成视频。需要引入recordrtc.js和html2canvas.js这两个插件。以下代码片段展示了如何使用recordrtc.js将echarts图表录制成mp4视频：

<!doctype html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=x-ua-compatible content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>echarts to video</title>
    <style>
        html,body,#mycanvas{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="mycanvas"></div>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/recordrtc/5.5.9/recordrtc.js"></script>
    <script src="https://cdn.bootcss.com/filesaver.js/1.3.8/filesaver.min.js"></script>
    <script>
        let $parent = document.getelementbyid('mycanvas')
        let mychart = echarts.init($parent);
        //这里的option就是echrts案例中的option，代码太多，就不贴了
        mychart.setoption(option);
        
        settimeout(function(){
            //开始录制
            exporttovideo(5000)
        },500)
        
        function exporttovideo(time){
            //time 为录制时长 毫秒
            time = time || 0
            
            let $canvas = document.queryselector('#mycanvas canvas')
            
            var recordrtc = recordrtc($canvas, {
                type: 'canvas'
            });
            //开始录制
            recordrtc.startrecording();
            
            settimeout(function(){
                //录制结束
                recordrtc.stoprecording(function(videourl) {
                    console.log(videourl)
                
                    var recordedblob = recordrtc.getblob();
                    //recordrtc.getdataurl(function(dataurl) { });
                    saveas(recordedblob, "test.mp4");
                });
            }, time)
        }
    </script>
</body>

</html>

如果需要生成gif动画，可以使用gif.js插件。需要引入gif.js插件。代码片段如下：

<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>echarts to gif</title>
    <style>
        html,body,#myCanvas{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="myCanvas"></div>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/gif.js/0.2.0/gif.js"></script>
    <script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script>
    <script>
        let $parent = document.getElementById('myCanvas')
        let myChart = echarts.init($parent);

        //这里的option就是echrts案例中的option，代码太多，就不贴了
        myChart.setOption( option );
        
        setTimeout(function(){
            //开始录制gif
            exportToGif(5000)
        }, 20)
        
        function exportToGif(time){
            var start = Date.now()
            //time 为录制时长 毫秒
            time = time || 0
            
            let $canvas = document.querySelector('#myCanvas canvas')
            
            function loop(){
                window.requestAnimationFrame(function(){
                    gif.addFrame($canvas, {delay: 100});
                    if(Date.now() - start >= time){
                        gif.render();
                    }else{
                        loop()
                    }
                })
            }
            
            var gif = new GIF({
              workers: 2,
              quality: 10
            });
            
            gif.on('finished', function(blob) {
                  saveAs(blob, "test.gif");
            });
            
            loop()
        }
    </script>
</body>

</html>

这些代码片段展示了如何使用相应的javascript库来录制视频或gif，从而避免了屏幕录制带来的清晰度问题。记住，需要根据实际情况调整录制时长以及gif的帧率和质量参数。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。