JS（十五）自定义方式导出echarts图片

淡淡的烟草味﹌ 2022-06-10 03:40 400阅读 0赞

用法： 1、echartsContainer对应到echarts的容器id； 2、exportOut()绑定导出按钮即可。

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2017.08.09下午更新

导出多张图片，利用canvas。同样在exportOut中调用drawOnCanvas(dataurl,dataurl1,dataurl2),其中括号中为三个dataurl值。

/**
     * 将canvas画布导出为图片
     */
    function canvasToImageIpal(type) {
        var canvas = document.getElementById("canvasipal");
        var imgdata = canvas.toDataURL(type);
        var fixtype = function (type) {
            type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        }
        imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
        var saveFile = function (data, filename) {
            var link = document.createElement('a');
            link.href = data;
            link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            link.dispatchEvent(event);
        }
        var filename = ccode + "展示" + '.' + type;
        saveFile(imgdata, filename);
    }
    function drawOnCanvas(dataurl, dataurl1, dataurl2) {
        var canvas = document.getElementById("canvasipal");
        var Gc = canvas.getContext("2d");
        var drawImg = new Image();
        drawImg.src = dataurl;
        drawImg.onload = function () {
            draw(this);
        };
        function draw(obj) {
            Gc.drawImage(obj, 0, 0, 600, 300);
        };
        var drawImg1 = new Image();
        drawImg1.src = dataurl1;
        drawImg1.onload = function () {
            draw1(this);
        };
        function draw1(obj) {
            Gc.drawImage(obj, 0, 300, 300, 300);
            var type = 'png';
        };
        var drawImg2 = new Image();
        drawImg2.src = dataurl2;
        drawImg2.onload = function () {
            draw2(this);
        };
        function draw2(obj) {
            Gc.drawImage(obj, 300, 300, 300, 300);
            var type = 'png';
            canvasToImageIpal(type);
        };
    }

\---------------------------------------------------------------------------------------------------------------------------------

2017.9.26更新

html中canvas定义：

导出按钮绑定函数：

function exportOut() {
        var myCharts = echarts.init(document.getElementById('echartsContainer'));
        var dataurl = myCharts.getDataURL();
        var myCharts1 = echarts.init(document.getElementById('echartsContainer1'));
        var dataurl1 = myCharts1.getDataURL();
        var myCharts2 = echarts.init(document.getElementById('echartsContainer2'));
        var dataurl2 = myCharts2.getDataURL();
        drawOnCanvas(dataurl, dataurl1, dataurl2);
        return;
    }

说明：

1、canvas是定义在table中，默认是隐藏的。

2、导出按钮绑定函数中的id是echars容器对应div的id。

3、只兼容了chrome49以上高版本。