In the process of project development, there is often a demand for image export, especially for the application with chart class. It is usually necessary to download and export the chart. Although echarts provides a download component in the chart, it is inevitable for specific projects to call this method to save the picture outside the chart container
Here is the solution:
Scheme 1: use the official interface of echarts
Using the getDataURL() method officially provided by echarts, we can return a base64 URL address, which can be used outside the echarts chart container to save and download pictures.
Take a look at the official API

echartsInstance.getDataURL Function
(opts: {
    // Export format, optional png, jpeg
    type?: string,
    // The resolution scale of the exported picture, which is 1 by default.
    pixelRatio?: number,
    // The background color of the exported image is the backgroundColor in option by default
    backgroundColor?: string,
    // Ignore the list of components. For example, to ignore a toolbox is ['toolbox ']
    excludeComponents?: Array.<string>
}) => string
//Example:
var img = new Image();
img.src = myChart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});

It is easy to download base64 pictures in new browsers such as chrome

1. Create an a label
2. Assign the a tag's href attribute to base64 encoding of the picture
3. Specify the download attribute of the a tag as the name of the download file
4. Click event triggering a tag

But this set of logic can't work under IE, so writing it will directly report an error.
So it needs to be handled separately under ie. here, ie provides a separate method for handling this kind of file: window.navigator.mssaveoropenblob (blob, Download ﹣ filename) calls this method to directly trigger the download of IE, which is more convenient. The specific methods are as follows:

        saveImg(){
            // Get canvas chart address information
            const imgUrl =  this.dataChart.getDataURL({
                type:'jpeg',
                pixelRatio: 1,
                backgroundColor: '#fff'
            });
            // If the browser supports the msSaveOrOpenBlob method (that is, when using IE browser), call this method to download the image
            if (window.navigator.msSaveOrOpenBlob) {
                // Intercept the data content of base64 (remove the previous description, such as data:image/png;base64) and decode it into binary data
                let bstr = atob(imgUrl.split(',')[1])
                // Gets the length of the decoded binary data, which is used to create the binary data container later
                let n = bstr.length
                // Create an array of type Uint8Array to hold binary data
                let u8arr = new Uint8Array(n)
                // Store binary data in an array of type Uint8Array
                while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
                }
                // Create blob object
                let blob = new Blob([u8arr])
                // Call the method of browser to start the download process of IE
                window.navigator.msSaveOrOpenBlob(blob, 'echarts download' + '.jpg')
            }else{//Similar to chrome browser, create an a-tag and download it with the a-tag's href attribute
                let tempA = document.createElement("a");
                tempA.download = 'echarts download' +'.jpg';
                tempA.href = imgUrl;
                document.body.appendChild(tempA);
                tempA.click();
                tempA.remove();
            }
        }

Scheme 2: using canvas
The echarts diagram itself is drawn in the canvas element, so we can get the canvas object and convert its canvas information to address
Here is the implementation code

    // Get canvas information
    let canvas = document.getElementsByTagName("canvas");
    if(canvas&&canvas.length>0){
        // create label
        let tempA = document.createElement("a");
        // Set download name
        tempA.download = "echarts download" +".png";
        // Set address and file type
        tempA.href = canvas[0].toDataURL("image/png");
        document.body.appendChild(tempA);
        // Trigger download event
        tempA.click();
        // Remove Tag
        tempA.remove();
     }

Above