echarts图表生成后的下载,本身是带有这个下载工具栏的,
但是可以通过另外的方法对该图表进行下载或者是展示。
如图:
图表一是用echarts画出的,图表二是仅一张img图片,图表三则是一张可以下载的img图片。
html:
<div id="main" style="width: 400px;height:200px;"></div>
js:
// 基于准备好的dom,初始化echarts实例(开头:图表显示区域)
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据(图表数据及样式配置)
option = {
backgroundColor: 'rgba(255,255,255,1)',
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {
show: true,
pixelRatio: 1,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
}
},
series : [
{
name:'业务指标',
type:'gauge',
detail : {formatter:'{value}%'},
data:[{value: 50, name: '完成率'}]
}
]
};
myChart.setOption(option);
图表二很简单,就是直接通过getDataURL()方法把图表的图片信息转化为base64的格式,这个是可以直接通过放入img标签的src内进行展示的,这个时候图片的下载键是不起作用的。实现如下:
html:
<div class="showImg1"></div>
js:
var picBase64Info = myChart.getDataURL(); $(".showImg1").html('<img src="'+picBase64Info+'"/>')
即可。
注:网上蛮多地方说的是用getDataURL(“png”)这样的方式实现,但是这个有个问题是,这样得到的关于图表的base64的图片信息背景色是透明的,如图:
,直接用getDataURL()则是完全copy这个图表的图片信息的。
图表三提供了另一种方式的下载,把图表信息转为canvas之后进行下载。
实现如下:
html:
<p class="showImg"><!--<img id="ringoImage" alt="" src=""/>--></p>
<div><a onclick="down()" href="javascript:void(0);">下载图片</div>
<div class="base64"></div>
js:
/* 根据图片生成画布*/
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
/* 下载图片*/
function down() {
var sampleImage = document.getElementById("ringoImage"),
canvas = convertImageToCanvas(sampleImage);
url = canvas.toDataURL("image/png");//PNG格式
//以下代码为下载此图片功能
var triggerDownload = $("#download").attr("href", url).attr("download", "echartsImg.png");
triggerDownload[0].click();
}
但是现在有个问题是这个不管是echarts自带的下载图片的功能还是后面所说的别的方法,不知道是哪里的问题,在手机浏览器上是下不下来的,提示下载失败,在此记录一下,看是否可以找到解决的方法!