如何给echarts图表添加下载图表成图片的功能

最新推荐文章于 2024-11-21 16:23:51 发布
转载 最新推荐文章于 2024-11-21 16:23:51 发布 · 733 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/liuqing576598117/p/9577025.html
标签
#javascript #ViewUI
本文详细介绍如何在ECharts图表中添加下载功能，通过在源码的option中加入toolbox和feature，实现图表的导出与下载，便于用户保存图表为图片。

  1. 先打开一个现成的图表效果图，注意图中圈出的地方，如图

    如何给echarts图表添加下载图表成图片的功能
  2.  

    打开源码找到option，如图

    如何给echarts图表添加下载图表成图片的功能
  3.  

    在option下添加toolbox，如图

    如何给echarts图表添加下载图表成图片的功能
  4.  

    在toolbox下添加feature，如图

    如何给echarts图表添加下载图表成图片的功能
  5.  

    在feature中添加如图代码，这就是下载的功能，

    如何给echarts图表添加下载图表成图片的功能
  6.  

    再次打开图表界面这时会发现右上角多了下载的功能了，点击下载就把把图表下载下来了，如图

    如何给echarts图表添加下载图表成图片的功能
    如何给echarts图表添加下载图表成图片的功能

转载于:https://www.cnblogs.com/liuqing576598117/p/9577025.html

aixie1947
关注
echarts 保存图片到后台下载
12-20
echarts 保存图片到后台下载
echarts自定义下载图表
Koreyoshi123654的博客
07-27 1829
echarts自定义下载图表
ECharts 使用toolbox.feature.saveAsImage 添加下载图片功能
旭东怪的博客
07-09 4355
无下载图片功能效果图： 实现代码： var option = { title: { text: '第一个 ECharts 实例' }, toolbox: { feature: { saveAsImage: {}//图片下载功能 }, }, tooltip: {}, legend: { data:['销量'] }, xAxis: { dat
echarts 自定义图标调用echarts的下载/保存图片功能
qq_58340302的博客
05-27 3965
图表需要配上一个保存图片的功能，当然，echarts本身自带这个功能，但是由于样式问题，需要在图表自身的外部画下载icon并实现保存图片功能。因未查到如何从外部直接调用这个功能，所以根据源码的实现方式，又自己封了一下，在此记录一下。左图是echats自带的下载，是可以设置其左中右等位置的，但并不适合我的ui。这是官网的保存图片的配置地方。右图是我封装后的样式。
echarts 绘制横向柱状图 并下载echarts图表
lucky569的博客
10-29 1559
效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt
在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
weixin_30894583的博客
12-12 2906
问题描述： echarts图表的toolbox里面本身有下载的功能，但有的时候，我们需要在echarts图表外添加一个按钮来实现下载，以下是基于vue，echarts版本4的一个解决方案记录： 解决方法： 1.借助a标签的download属性 <a :href="chartImgUrl" download="echart.png">下载</a> href属性 =&gt...
JS实现Echarts的图表保存为图片功能
wml00000的博客
06-09 1万+
文章目录需求分析开发准备实现思路效果图参考链接 需求分析 实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。。。 开发准备 通过查看Echarts网站，可以很快找到其自带的toolbox配置项，在f...
将Echarts图表导出为图片的三种方式
热门推荐
慢慢manman的博客
12-30 2万+
【代码】将Echarts图表导出为图片的三种方式。
echarts图表转图片的方案
最新发布
owo_ovo的博客
11-21 1305
echarts图表转图片的方案
echarts加个下载按钮
qq_58307541的博客
04-15 527
折线图的线条 ： true---顺滑 false---不顺滑。
vue外部按钮下载echarts图片
qq_41566480的博客
04-06 1430
vue外部按钮下载echarts图片 downloadCharts () { let aLink = document.createElement(‘a’) let blob = this.base64ToBlob() let evt = document.createEvent(‘HTMLEvents’) evt.initEvent(‘click’, true, true) aLink.download = ‘监测统计图’ // 下载图片的名称 aLink.href = URL.createObjectU
如何使用ECharts话一个简单的图表
m0_46222379的博客
12-29 189
ECharts使用五步 下载并引入echarts.js文件 准备容器（用于放图表） 初始化echarts对象 指定配置项和数据（option） 将配置项传给echarts对象 1.下载并且引入echarts.js文件 官网下载路径：下载地址 下载完成之后,可以通过标签方式直接引入echarts.js文件 <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <s
echarts显示工具栏组件，实现下载统计图，柱状图和折线图切换功能
01-24 998
【代码】echarts显示工具栏组件，实现下载统计图，柱状图和折线图切换功能。
【echarts柱状图保存为图片并下载】
trabecula_hj的博客
10-04 1893
echarts柱状图保存为图片并下载直接附上代码创建一个表格如何创建一个注脚 直接附上代码 页面中设置 下载柱状图按钮，带上下载图片名称。 Mon 06Mon 13Mon 20获取url 截取base64 转blob 下载 解决思路Adding GANTT diagram functionality to mermaid // 获取base64位图片 downLoad(titl
echarts 图表下载功能
m0_56972934的博客
08-20 2215
两个方法下载 都可以去配置相关信息，使用那个取决与当时的需求。
Echarts导出图片
weixin_43905297的博客
04-09 2044
echarts实现图表导出为图片
vue中Echart如何打包下载图片
weixin_42080056的博客
11-18 3993
vue中Echart如何打包下载图片
echarts下载图片
killerdoubie的博客
04-26 789
【代码】echarts下载图片。
echart图表保存为图片的两种方式
weixin_69773376的博客
08-11 6080
将echarts图表和ucharts图表保存为图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值