关于echarts图表下载

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自带的下载图片的功能还是后面所说的别的方法，不知道是哪里的问题，在手机浏览器上是下不下来的，提示下载失败，在此记录一下，看是否可以找到解决的方法！

关于echarts图表下载

猜你喜欢