echarts手动保存图片并添加背景色

原创已于 2024-06-14 17:54:58 修改 · 631 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2024-06-11 18:26:05 首次发布

由于业务要求，需要手动定义按钮，触发保存echarts图表图片，并添加背景色：

使用chart.getDataURL获取图片下载链接，通过添加a标签实现下载

具体代码逻辑如下：

// 下载保存图片
download() {
  // 获取图表的 base64 图片 URL
  var imgUrl = this.chart.getDataURL({
    type: "png",
    pixelRatio: 2,
    backgroundColor: "#fff",
  });
  // 创建一个图片元素
  var img = document.createElement("img");
  img.src = imgUrl;
  img.style.display = "none";
  // 添加到文档中以便保存
  document.body.appendChild(img);
  // 使用a标签模拟点击进行下载
  var a = document.createElement("a");
  a.href = imgUrl;
  a.download = "关系图.png";
  a.click();
}

这样就可以完美实现保存下载echarts图片了