前言
假设现有 ECharts 生成的两个图标，要求实现可下载为图片。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 示例</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><style>#charts-container {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}.chart {width: 400px;height: 300px;}</style>
</head>
<body><h1 style="text-align: center;">ECharts 示例</h1><div id="charts-container"><!-- 饼状图 --><div id="pie-chart" class="chart"></div><!-- 折线图 --><div id="line-chart" class="chart"></div></div><script>// 初始化饼状图const pieChart = echarts.init(document.getElementById('pie-chart'));const pieOption = {title: {text: '销售数据',left: 'center'},tooltip: {trigger: 'item'},legend: {bottom: '0',},series: [{name: '销售额',type: 'pie',radius: '50%',data: [{ value: 1048, name: '电子产品' },{ value: 735, name: '服装' },{ value: 580, name: '家居用品' },{ value: 484, name: '食品' },{ value: 300, name: '其他' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};pieChart.setOption(pieOption);// 初始化折线图const lineChart = echarts.init(document.getElementById('line-chart'));const lineOption = {title: {text: '每月销售额趋势',left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月']},yAxis: {type: 'value'},series: [{name: '销售额',type: 'line',data: [820, 932, 901, 934, 1290, 1330],smooth: true}]};lineChart.setOption(lineOption);// 响应式调整图表大小window.addEventListener('resize', () => {pieChart.resize();lineChart.resize();});</script>
</body>
</html>
方案一：利用 ECharts 提供的 getDataURL 方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 导出图片</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><style>#charts-container {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}.chart {width: 400px;height: 300px;}.btn-container {text-align: center;margin-top: 20px;}button {margin: 10px;padding: 10px 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><h1 style="text-align: center;">ECharts 导出图片示例</h1><div id="charts-container"><!-- 饼状图 --><div id="pie-chart" class="chart"></div><!-- 折线图 --><div id="line-chart" class="chart"></div></div><div class="btn-container"><button id="export-pie">导出饼状图为图片</button><button id="export-line">导出折线图为图片</button></div><script>// 初始化饼状图const pieChart = echarts.init(document.getElementById('pie-chart'));const pieOption = {title: {text: '销售数据',left: 'center'},tooltip: {trigger: 'item'},legend: {bottom: '0',},series: [{name: '销售额',type: 'pie',radius: '50%',data: [{ value: 1048, name: '电子产品' },{ value: 735, name: '服装' },{ value: 580, name: '家居用品' },{ value: 484, name: '食品' },{ value: 300, name: '其他' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};pieChart.setOption(pieOption);// 初始化折线图const lineChart = echarts.init(document.getElementById('line-chart'));const lineOption = {title: {text: '每月销售额趋势',left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月']},yAxis: {type: 'value'},series: [{name: '销售额',type: 'line',data: [820, 932, 901, 934, 1290, 1330],smooth: true}]};lineChart.setOption(lineOption);// 导出图片功能function exportChart(chartInstance, fileName) {// 获取图片的 Base64 数据const imageBase64 = chartInstance.getDataURL({type: 'png', // 图片格式pixelRatio: 2, // 分辨率倍率backgroundColor: '#fff' // 背景色});// 创建一个 <a> 标签用于下载const link = document.createElement('a');link.href = imageBase64;link.download = `${fileName}.png`; // 指定下载的文件名link.click(); // 触发点击事件，开始下载}// 绑定按钮事件document.getElementById('export-pie').addEventListener('click', () => {exportChart(pieChart, '销售数据-饼状图');});document.getElementById('export-line').addEventListener('click', () => {exportChart(lineChart, '销售数据-折线图');});// 响应式调整图表大小window.addEventListener('resize', () => {pieChart.resize();lineChart.resize();});</script>
</body></html>
方案二：html2canvas
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 示例</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><!-- 引入 html2canvas --><script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script><style>#charts-container {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}.chart {width: 400px;height: 300px;}#download-btn {display: block;margin: 20px auto;padding: 10px 20px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}</style>
</head><body><h1 style="text-align: center;">ECharts 示例</h1><div id="charts-container"><!-- 饼状图 --><div id="pie-chart" class="chart"></div><!-- 折线图 --><div id="line-chart" class="chart"></div></div><!-- 下载按钮 --><button id="download-btn">下载图表</button><script>// 初始化饼状图const pieChart = echarts.init(document.getElementById('pie-chart'));const pieOption = {title: {text: '销售数据',left: 'center'},tooltip: {trigger: 'item'},legend: {bottom: '0',},series: [{name: '销售额',type: 'pie',radius: '50%',data: [{ value: 1048, name: '电子产品' },{ value: 735, name: '服装' },{ value: 580, name: '家居用品' },{ value: 484, name: '食品' },{ value: 300, name: '其他' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};pieChart.setOption(pieOption);// 初始化折线图const lineChart = echarts.init(document.getElementById('line-chart'));const lineOption = {title: {text: '每月销售额趋势',left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月']},yAxis: {type: 'value'},series: [{name: '销售额',type: 'line',data: [820, 932, 901, 934, 1290, 1330],smooth: true}]};lineChart.setOption(lineOption);// 响应式调整图表大小window.addEventListener('resize', () => {pieChart.resize();lineChart.resize();});// 点击下载按钮时触发截图并下载document.getElementById('download-btn').addEventListener('click', () => {// 选择需要截图的图表容器const chartContainer = document.getElementById('charts-container');// 使用 html2canvas 进行截图html2canvas(chartContainer).then(canvas => {// 创建一个链接并模拟点击下载const link = document.createElement('a');link.href = canvas.toDataURL('image/png');link.download = 'echarts_chart.png'; // 设置下载文件名link.click(); // 模拟点击下载});});</script>
</body></html>
