使用自定义按钮将echarts下载为图片，亲测有效

Holly

已于 2023-02-25 14:08:44 修改

阅读量1.3k

点赞数 3

分类专栏： typescript react 文章标签： echarts javascript 前端

于 2023-02-25 14:03:02 首次发布

本文链接：https://blog.csdn.net/qq_43687185/article/details/129215071

版权

react 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

typescript

8 篇文章 0 订阅

订阅专栏

1、按钮点击之后

const clickA =() =>{
    const countPieDwlx = echarts.init(document.getElementById(chartId)?.firstChild as HTMLElement);
    countPieDwlx?.setOption(option);
    countPieDwlx?.resize();
    savePieImg(countPieDwlx, cellId)
}

下载图片方法

function savePieImg(countPieDwlx, cellId) {
  var picInfo = countPieDwlx.getDataURL({
    type: 'png',
    pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
    backgroundColor: '#fff'
  });//获取到的是一串base64信息
  const elink = document.createElement('a');
  elink.download = "趋势图" + cellId;
  elink.style.display = 'none';
  elink.href = picInfo;
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink)
}

over~