echarts 图片下载事件

echarts 是Baidu 开源的一款图表库，因其配置开发的方式，倍受开发者的青睐。

最近的项目中，也采用的echarts 作为图表库。项目中要求集成用户数据行为收集系统 IDIS（类似countly）,其中统计要求统计用户下载图表的次数。echarts 文档配置手册中，toolbox 中可以配置自定义控件，代码如下:

toolbox: {
    feature: {
        myTool2: {
            show: true,
            title: '自定义扩展方法',
            icon: 'image://http://echarts.baidu.com/images/favicon.png',
            onclick: function (){
                alert('myToolHandler2')
            }
        }
}

以上代码可以让开发者自定义toolbox控件样式以及事件回调，但是无法满足下载图片后埋点的需求。但是实际上，自定义事件中的函数附带一个参数，参数包含echarts options 以及其实例以及一些实例方法，我们可以采用这个实例方法实现图片下载后埋点的需求：

toolbox: {
  feature: {
    myTool: {
      show: true,
      onclick: function (params) {
         // params.scheduler.ecInstance 获取图表实例，并配置生成图片的属性
        const dataSource = params.scheduler.ecInstance.getDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: '#fff'
        });
        // 本地将canvas 图片导出成图片，并下载
        const MIME_TYPE = 'image/png';
        const dlLink = document.createElement('a');
        dlLink.download  = 'Near Miss.png';
        dlLink.href = dataSource;
        dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
        UserActionAnalyzeService.recordAction('dashboard', 'dashboard_download_leadership_vs_employee');
      },
      icon: ''  // self define
    }
  }
}