关于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图表下载相关推荐

vue实现echarts图表下载（含多张图表），导出图片格式
使用插件: html2canvas npm安装: npm install html2canvas 组件引入: import html2canvas from "html2canvas&quo ...
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...
【生成PDF】Java如何根据前台Echarts图表生成PDF，并下载
文章目录前言一.如何通过java代码生成PDF? 1.依赖二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...
将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】
因为前端UI设计的Echarts图表的下载按钮是自定义的,但是Echarts自带工具栏的图表下载按钮是固定的不能改变,所以我们需要另写一个方法: 具体做法如下: 1.首先创建一个div来展示我们的Ec ...
ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
ASP.Net绑定Sql数据源用echarts图表来展示数据
ASP.Net绑定Sql数据源用echarts图表来展示数据这里我们需要先学会ajax请求和网页的echarts图的使用不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的首先大家可以先从 ...

关于echarts图表下载

关于echarts图表下载相关推荐

最新文章

热门文章