echarts 自定义点击按钮下载文件

可以使用 echarts 的事件监听来实现自定义点击按钮下载文件的功能。

首先，在 echarts 初始化时，需要为按钮添加点击事件监听器。可以使用 echarts 的 `on` 方法来实现，例如：

myChart.on('click', function(params) {
  if (params.componentType === 'toolbox' && params.name === 'download') {
    // 处理下载操作
  }
});

这段代码实现了当用户点击 echarts 中的下载按钮时，会触发一个点击事件，然后我们可以在事件处理函数中编写下载文件的代码。

接下来，我们需要编写下载文件的代码。可以使用 HTML5 中的 `Blob` 和 `URL.createObjectURL` 方法来实现。具体的代码如下：

var data = "hello, world";
var blob = new Blob([data], {type: "text/plain"});
var url = URL.createObjectURL(blob);

var link = document.createElement("a");
link.download = "hello.txt";
link.href = url;

document.body.appendChild(link);
link.click();

document.body.removeChild(link);
URL.revokeObjectURL(url);

这段代码将字符串 `hello, world` 转换为 Blob 对象，并使用 `URL.createObjectURL` 方法为其创建一个 URL。然后，创建一个 `a` 元素，并将其 `download` 属性设置为下载文件的名称，`href` 属性设置为上面创建的 URL。接着，将 `a` 元素添加到页面中，触发 `click` 事件，最后移除 `a` 元素并释放 URL 资源。

将上述代码和 echarts 的事件监听器结合起来，即可实现自定义点击按钮下载文件的功能。

完整代码示例：

myChart.on('click', function(params) {
  if (params.componentType === 'toolbox' && params.name === 'download') {
    var data = "hello, world";
    var blob = new Blob([data], {type: "text/plain"});
    var url = URL.createObjectURL(blob);

    var link = document.createElement("a");
    link.download = "hello.txt";
    link.href = url;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }
});