echarts导出为图片

### 如何使用 ECharts 将图表导出为图片 ECharts 提供了多种方式来将图表导出为图片格式。以下是通过 JavaScript 和 HTML 实现这一功能的方法。 #### 使用 `dataURL` 获取 Base64 编码的图像数据 可以利用 ECharts 的 `getConnectedDataURL()` 或者 `getDataURL()` 方法获取图表的 Base64 数据编码，从而将其转换为图片文件[^1]。 ```javascript // 初始化 echarts 实例 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); // 配置项和数据 var option = { title: { text: '示例图' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { type:'category', data:["衬衫","羊毛衫","雪纺衫"]}, yAxis: {type:'value'}, series:[{ name:'销量', type:'bar', data:[5, 20, 36]}] }; myChart.setOption(option); // 导出按钮点击事件处理函数 document.getElementById('exportBtn').onclick = function () { var imgData = myChart.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' }); // 创建隐藏的 a 标签用于下载 var link = document.createElement('a'); link.href = imgData; link.download = 'chart.png'; link.click(); }; ``` 上述代码展示了如何创建一个按钮 (`#exportBtn`) 来触发图表的导出操作，并设置像素比例以及背景颜色参数。 #### 利用 SVG 渲染器导出高质量矢量图形 如果需要更高分辨率或者支持缩放不变形的效果，则可以选择启用 SVG 渲染模式[^2]： ```javascript var chartSVG = echarts.init(document.getElementById('main'), null, { renderer: 'svg' }); // 同样的配置选项... chartSVG.setOption(option); // 下载 SVG 文件逻辑 document.getElementById('exportSvgBtn').onclick = function() { var svgContent = new XMLSerializer().serializeToString(chartSVG.getDom().querySelector('svg')); var blob = new Blob([svgContent], { type: "image/svg+xml;charset=utf-8" }); saveAs(blob, "chart.svg"); }; ``` 这里我们初始化了一个基于 SVG 的渲染实例，并定义了另一个按钮用来保存当前显示的内容到本地磁盘作为 `.svg` 文件。 注意：为了使以上方法正常工作，可能还需要引入额外库比如 FileSaver.js 来简化跨浏览器兼容性的文件保存过程。 ---