前端实现导出Echarts图表


  导出Echart图表,很简单,我这里用的是vue。

  下面的事件函数是你自己创建按钮点击或者其他操作来触发的。(Echarts内部也自带下载图片的功能。网上一搜一堆都能找到)

   handleClickExportEcharts(){//导出Echart
                const canvas = document.getElementsByTagName('canvas')[0];
                let image = canvas.toDataURL({
                    type:"png",
                    pixelRatio: 2,
                    // backgroundColor:'#f1f6f9',//有人说不设置此项,导出图片的底色是黑色。我个人设置了也并没有什么卵用 要想设置导出图片有底色,就要设置Echart的背景色,不设置就是透明的。
                });
                let alink = document.createElement("a");
                    alink.href = image;
                    alink.download = "Echarts图"; //导出的图片名
                    alink.click();
        },


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM