During the development, the design draft may require us to download the current Echarts outside the Echars, so we cannot use the built-in Echats. So I encapsulated one.

The picture

myChart.setOption(option); If (data.isshow){setTimeout(function() {var img = new Image(); Img. SRC = mychart.getdataurl ({type:" PNG ", pixelRatio: 2, // double backgroundColor: '# FFF '}); img.onload=function(){ var canvas=document.createElement("canvas"); canvas.width=img.width; canvas.height=img.height; var ctx=canvas.getContext('2d'); CTX. DrawImage (img, 0, 0); var dataURL=canvas.toDataURL('image/png'); var a = document.createElement('a'); Var event = new MouseEvent('click'); / / will be a download of the attribute is set to we want to download the pictures of name, if the name does not exist the use 'download image as the default name a. d. ownload =' rectangular chart. PNG '| |' download pictures name; // set the generated URL to a.href = dataURL; // Trigger the click event of A. disPatchEvent (event); }; }}, 1000)Copy the code

— — — — — — — — — — — — — — — — — — another way — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

$scope.saveImag = function() {
        console.log('saveImage', $scope.myChart);
        var url = $scope.myChart.getConnectedDataURL({
            pixelRatio: 2.// Export image resolution ratio, default is 1
            backgroundColor: '#fff'.// Chart background color
            excludeComponents: [
                // The tool component that is ignored when saving the chart. The toolbar is ignored by default
                'toolbox'].type: 'png' // The image type supports PNG and JPEG
        });
        if($rootScope.isWeixin||$rootScope.isDingDing||$rootScope.isWxwork) {
            $scope.currentImage = {
                src: url
            };
            SharedState.turnOn('imageLook');
            return;
        }
        var $a = document.createElement('a');
        // var type = imgType
        // $a.download = $scope.myChart.getOption().title[0].text + '.' + 'png'
        $a.download = 'Proportion of shop tour content' + '. ' + 'png';
        $a.target = '_blank';
        $a.href = url;
        // Chrome and Firefox
        if (typeof MouseEvent === 'function') {
            var evt = new MouseEvent('click', {
                view: window.bubbles: true.cancelable: false
            });
            $a.dispatchEvent(evt);
        } else { // IE
            var base64 = {
                dataURL: url,
                type: 'png'.ext: 'png'
            };
            var blob = this.convertBase64UrlToBlob(base64);
            / / download
            window.navigator.msSaveBlob(
                blob,
                'Proportion of shop tour content' + '. ' + 'png'); }};Copy the code