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

忘是亡心i 2023-01-10 03:34 82阅读 0赞

> 想要下载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标签
        };
    	//方法顺序该调就调一调