使用原生JS实现Echarts数据导出Excel的功能
内容提要
Echarts工具箱新增了导出数据到Excel的功能。用户现在可以自定义工具，将数据导出为Excel。文章提供了实现此功能的代码示例。可以使用“myTool”属性将自定义工具添加到工具箱中。onclick函数用于触发Excel文件的下载。代码将数据转换为HTML表格，然后下载为CSV文件。
延伸解读
自定义工具命名规则
在ECharts的toolbox中添加自定义工具时，工具名称必须以'my'开头，例如myTool1、myTool2等。这是ECharts的强制要求，否则自定义工具可能无法正常显示或工作。开发者需遵循此命名约定，以确保功能生效。
onclick参数与数据获取
onclick函数接收一个参数，该参数包含ECharts实例的完整信息，其中option属性存储了图表的数据和配置。通过opt.option可以访问xAxis和series等数据，从而提取需要导出的内容。开发者可通过console.log打印该参数以了解其结构。
CSV文件编码与MIME类型
代码中csvContent设置为'data:text/csv;charset=utf-8,%EF%BB%BF'，其中%EF%BB%BF是UTF-8 BOM，用于确保Excel正确识别中文。MIME类型必须与文件后缀名对应，否则下载可能失败。开发者应根据实际文件类型调整此设置。
数据转换与下载机制
导出功能将数据转换为HTML表格结构，其中<th>定义列名，<td>包含具体数据。然后通过动态创建<a>元素并触发点击事件实现下载。注意，数据中的逗号会被替换为空格，以避免CSV格式错误。下载完成后，<a>元素会被移除。
Q&A
Echarts toolbox 如何添加自定义工具？
在 toolbox.feature 中添加自定义工具，工具名必须以 'my' 开头，例如 myTool1。设置 show: true、title、icon 和 onclick 函数即可。
为什么自定义工具名称必须以 'my' 开头？
这是 Echarts toolbox 的命名约定，自定义工具名只能以 'my' 开头，如 myTool1、myTool2，否则可能无法识别。
onclick 函数如何实现导出 Excel 文件？
onclick 函数接收 opt 参数，从中获取图表数据，将数据转换为 HTML 表格格式，然后编码为 CSV 数据 URI，通过创建 <a> 元素并触发点击下载文件。
导出的 CSV 文件内容包含哪些部分？
导出的 CSV 文件包含每一列的列名（如日期、系列名称）和具体数据样本，数据以逗号分隔，每行代表一个数据点。
csvContent 变量有什么作用？
csvContent 设置保存文件的 MIME 类型，例如 'data:text/csv;charset=utf-8,%EF%BB%BF'，类型名必须与文件后缀名对应，否则下载可能出错。
如何设置下载文件的名称？
通过创建 <a> 元素并设置其 download 属性来指定下载文件的名称，例如 downloadLink.download = '气井分类.csv'。
