美文网首页
外部按钮调用ECharts图表的保存为图片操作

外部按钮调用ECharts图表的保存为图片操作

作者: 老95 | 来源:发表于2017-10-09 09:59 被阅读0次

最近使用ECharts库绘制图表,依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法,看了看也没遇到一个可以满意的。后来,突然想到了echart开放了源码,可以看看源码,找到下载的方法,然后调用不就可以了(可能是我技术忒次,看了看不只到如何直接调用方法,所以把源方法copy下来,改了改,只需要传递图表的容器id即可)

echart图表示例(工具栏中有下载图片按钮)

image.png

附上代码记录一下
//传递图表容器id
function downloadImpByChart(chartId) {
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5,  //导出的图片分辨率比率,默认是1
backgroundColor: '#fff',  //图表背景色
excludeComponents:[  //保存图表时忽略的工具组件,默认忽略工具栏
'toolbox'
],
type:'png'  //图片类型支持png和jpeg
});
var $a = document.createElement('a');
var type = 'png';
$a.download = myChart.getOption().title[0].text + '.' + type;
$a.target = '_blank';
$a.href = url;
// Chrome and Firefox
if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: false
});
$a.dispatchEvent(evt);
}
// IE
else {
var html = ''

  • '<body style="margin:0;">'
  • '![](' + url + ')'
  • '</body>';
    var tab = window.open();
    tab.document.write(html);
    }
    };

相关文章

  • 外部按钮调用ECharts图表的保存为图片操作

    最近使用ECharts库绘制图表,依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项...

  • echart 在图表外部调用保存图片操作

    注意:下载名称可能获取不到,以至于无法执行,我直接赋值固定的下载名称download.png 参考文档:https...

  • Django Echarts绘制K线图

    通过IPython调用Echarts绘制图表功能用不太习惯。暂且搁置,通过Django 项目调用绘制K线图。 项目...

  • 细节优化

    ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法 ECharts地图中...

  • 【java】Echarts导出为word文档

    最近在使用Echarts做图表分析,同时要求有导出分析报告的功能,这时Echarts自带的保存图片功能就不能满足自...

  • 微信小程序(wepy + Echarts)绘制图表

    【场景说明:】需要进行图表显示时,当前优秀的图表框架有很多。操作相对较多的有百度(Echarts - https:...

  • ECharts - 数据图表的使用

    欢迎移步我的博客阅读:《ECharts - 数据图表的使用》 关于ECharts(ECharts) ECharts...

  • Vue echarts

    安装 echarts 图表组件实现组件主要思路 安装 echarts 图表组件 如果经常使用图表,则可以封装一个 ...

  • JAVA导出echarts图表图片

    应用场景 实现思路 1.准备导出echarts所用到的工具 1.导入jar包 2.下载浏览器驱动 我这里用的pha...

  • 警告框与弹出框的处理

    alert/confirm/prompt按钮弹出框操作的主要方法如下: alert按钮的操作步骤如下: (1)调用...

网友评论

      本文标题:外部按钮调用ECharts图表的保存为图片操作

      本文链接:https://www.haomeiwen.com/subject/rquuyxtx.html