echarts图片上加上自定义文字或其它下载

最新推荐文章于 2024-03-08 16:38:29 发布

前端小狮

最新推荐文章于 2024-03-08 16:38:29 发布

阅读量2.1k

点赞数

分类专栏： echarts js 文章标签： canvas echarts js

本文链接：https://blog.youkuaiyun.com/m0_37885651/article/details/112989902

版权

js 同时被 2 个专栏收录

55 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍了如何在Echarts图表上添加自定义文字并实现图片下载。通过三种方法，包括修改graphic属性、直接在canvas上绘制文字以及使用隐藏canvas重画，详细阐述了实现过程，并提供了完整的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要下载echarts的图片，并且想在图片上加上一条条件之类的文字。

1.在echarts的自定义一个方法，下载前设置 graphic 属性，下载后再去掉属性（应该可以行通）；

2.获取到你的echarts的canvas 元素在上面画上需要的文字或图片之类，在执行下载（貌似文字会闪那么一下），凑合能用；

3.我弄的繁琐一点，借助一个隐藏的canvas 元素重画：

html

//echarts的容器
<div width="100%" height="100%" id="myChart">
		
</div>
//隐藏的canvas
<canvas id="myDownCanvas" style="display: none;"></canvas>

	//我的echarts 图表
	var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                    show:false
                },
                magicType: {type: ['bar']},
                myDown:{//自定义下载
					show : true,
		            title : '下载' + name,
		            icon : 'image://images/inp-icon/mydown-ico.png',
		            onclick : function (e){
		            	//拿到echarts的base64 url  图片里面去掉toolbox 那个工具栏
		                var oldUrl = curCharts.getDataURL({ pixelRatio: 2, backgroundColor: '#fff',excludeComponents:['toolbox']});
		                getNewCanvadUrl(oldUrl);
		            }
				}
            },
        },
    };
   myChart.setOption(option);
   
	function getNewCanvadUrl (oldUrl){
	        var url = oldUrl;
	        var baseCanvas = $("#myChart").find("canvas").first()[0];
	        var newCan = $("#myDownCanvas").get(0);
	        newCan.width = baseCanvas.width * 2;
	        newCan.height = baseCanvas.height * 2;
	        var ctx = newCan.getContext("2d");
	        var img = new Image();
	        img.src= url;
	        img.onload = function(){
	            ctx.drawImage(img,0,0,newCan.width,newCan.height);
	            ctx.font = "20px Microsoft YaHei";
	            ctx.textAlign = 'left';
	            var left = 280;
	            var top = 60;
	            ctx.fillStyle = "#333";
	            var text = ‘echarts图片上加上自定义文字或其它下载’;//想加点啥就可以加点啥了
	            ctx.fillText(text, left, top);
	            //拿到newCan的url
	            var newUrl = newCan.toDataURL();
	            //后面就可以下载了
	            downloadFile(newUrl,'我的图片');
	        }
	    }
	function downloadFile(url, name) { 
        	//拿到url 下载就简单了,ie 用blob 谷歌直接a标签
    };
	//方法顺序该调就调一调