echarts图表截图保存成图片的两种方法saveAsImage

echarts图表截图保存成图片的两种方法saveAsImage

    • 1.echarts自带的截图
    • 2.使用echarts的API方法

1.echarts自带的截图

option中加上

toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },

2.使用echarts的API方法

getDataURL 导出图表图片,返回一个 base64 的 URL,可以设置为Image的src

//先clone来避免影响页面显示
 var clone = $('#'+divid).clone();
//找到所有echarts图表容器
 var charts = clone.find('#'+chartsid);

var curEchart = echarts.getInstanceByDom(charts[0]);

if(curEchart) {
        //将图表替换为图片
        var base = curEchart.getDataURL({
            pixelRatio: 2,
            backgroundColor: '#fff'
        });
    }

var a = document.createElement("a");//创建一个标签
a.href = base; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
a.download = `${title}.jpg`; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签

你可能感兴趣的:(Echarts,echarts,前端,javascript)