正文

从echarts3图表轻松转换图片，教你一键保存精美图表！

/0 浏览量
0530

在数据可视化领域，ECharts 是一个非常受欢迎的 JavaScript 库，它可以帮助我们创建丰富的交互式图表。然而，有时候我们需要将 ECharts 生成的图表保存为图片格式，以便于分享或打印。本文将教你如何从 ECharts3 图表轻松转换图片，并一键保存精美图表。

1. 准备工作

在开始之前，请确保你的网页项目中已经引入了 ECharts3 库。以下是引入 ECharts3 的基本步骤：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 创建图表

接下来，你可以使用 ECharts 的 API 创建一个图表。以下是一个简单的柱状图示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

3. 转换图表为图片

要将 ECharts 图表转换为图片，你可以使用 myChart.getDom() 方法获取图表的 DOM 元素，然后使用 html2canvas 库将其转换为图片。以下是一个示例：

// 引入 html2canvas
<script src="https://cdn.jsdelivr.net/npm/html2canvas/dist/html2canvas.min.js"></script>

// 转换图表为图片
function convertChartToImage() {
    html2canvas(document.getElementById('main')).then(function(canvas) {
        // 将 canvas 转换为图片
        var url = canvas.toDataURL('image/png');
        // 创建一个图片元素
        var img = document.createElement('img');
        img.src = url;
        img.style.width = '100%';
        // 将图片插入到页面中
        document.body.appendChild(img);
    });
}

// 调用函数
convertChartToImage();

4. 保存图片

将图片转换为 base64 格式后，你可以使用 JavaScript 的 a 标签创建一个下载链接，从而实现一键保存图片：

// 保存图片
function saveImage() {
    var url = document.getElementById('main').getElementsByTagName('img')[0].src;
    var a = document.createElement('a');
    a.href = url;
    a.download = 'chart.png';
    a.click();
}

// 创建下载链接
var downloadLink = document.createElement('a');
downloadLink.href = '#';
downloadLink.textContent = '保存图片';
downloadLink.onclick = saveImage;
document.body.appendChild(downloadLink);

5. 总结

通过以上步骤，你可以轻松地将 ECharts3 图表转换为图片，并实现一键保存精美图表。这种方法不仅方便分享和打印，还可以用于制作报告、演示文稿等场景。希望本文对你有所帮助！

-- 展开阅读全文 --