解绑 Echarts 联动图保存图片默认保存所有图表

问题背景：

产品经理要将一系列不同元素图表进行联动，查阅 echarts 文档后，使用 connect 进行多个图表联动；第二天测试发现，保存图表图片时，图片内的图表错误；

排查时，在 echarts 文档发现了：

如果图表使用了 echarts.connect 对多个图表进行联动，则在导出图片时会导出这些联动的图表。

明白了问题的原因，但是与预期表现不符，需要进行解绑，只导出选择的图表；

解决办法：

再次查看 echarts 配置文档，发现 toolbox 内的 feature 可以自定义工具名，通过自定义保存按钮，即可实现联动图保存的解绑；

// options 配置
toolbox: {
    feature: {
        myDownload: {
            show: true,
            title: '保存为图片',
            icon: 'path://M760.4736,493.9264a25.6,25.6,0,0,0-36.1984,0L512,706.2016V128a25.6,25.6,0,0,0-51.2,0v578.2016L248.5248,493.9264a25.6,25.6,0,0,0-36.1984,36.1984l256,256a25.4976,25.4976,0,0,0,36.2496-0.0512l256-256a25.6,25.6,0,0,0,0-36.1984z M896,972.8h-819.2C34.4576,972.8,0,938.3424,0,896v-102.4a25.6,25.6,0,0,1,51.2,0v102.4a25.6,25.6,0,0,0,25.6,25.6h819.2a25.6,25.6,0,0,0,25.6-25.6v-102.4a25.6,25.6,0,0,1,51.2,0v102.4c0,42.3424-34.4576,76.8-76.8,76.8z',
            onclick: () => downImage(myChart, title),
        },
    },
},

// downImage.ts
 export default downImage = (chartInt, title) => {
    const img = chartInt.getDataURL({
        type: 'png', // 保存的图片格式。
        // name: 'test.png' // 保存的文件名称
        backgroundColor: '#fff', // 保存的图片背景色
        pixelRatio: 2, // 保存图片的分辨率比例
        excludeComponents: ['toolbox', 'dataZoom'], // 保存为图片时忽略的组件列表
    });

    const aHref = document.createElement('a');
    aHref.setAttribute('href', img);
    aHref.setAttribute('download', title);
    aHref.click();

};

downImage 内通过 getDataURL 获取图表实例，同时为保存图表配置；配置项同 saveAsImage;