前端实现导出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();
        },

猜你喜欢

转载自www.cnblogs.com/bai--feng/p/12721617.html