ECharts 自定义图表导出图片

妖狐艹你老母 2023-10-05 11:41 160阅读 0赞

#### 1 前言 ####

在项目过程中，碰到一个这样的需求，页面显示时如下图所示ECharts图表背景是深色，文字是白色的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

但是导出图片要求如下图所示，背景是白色的，文字是黑色的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

这时我们就需要用到自定义图表导出图片，实现思路这样的，用两个图表，一个深底白字的图表用来显示在页面上，一个白底黑字的图表隐藏专门用来导出图片。

#### 2 实现代码 ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
    	<div id="main2" style="width: 600px;height:400px;display:none"></div>
    	<span onclick="Export()">下载</span>
        <script type="text/javascript">
    		// 深底黑字，用于页面显示
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '第一个 ECharts 实例',
    				textStyle:{
    					color:"#fff"
    				}
                },
    			backgroundColor:"#05233b",
                tooltip: {},
                legend: {
                    data:['销量'],
    				textStyle:{
    					color:"#fff"
    				}
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    				axisLine:{
    					lineStyle:{
    						color:"#fff"
    					}
    				}
                },
                yAxis: {
    				axisLine:{
    					lineStyle:{
    						color:"#fff"
    					}
    				},
    				splitLine:{
    					show:false
    				}
    			},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option);
    		
    		//白底黑字隐藏，用于导出
    		var myChart2 = echarts.init(document.getElementById('main2'));
            // 指定图表的配置项和数据
            var option2 = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {
    				splitLine:{
    					show:false
    				}
    			},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart2.setOption(option2);
    		//导出图片
    		function Export(){
                var img = new Image();
                img.src = myChart2.getDataURL({
                    type:"png",
                    pixelRatio: 1, //放大2倍
                    backgroundColor: '#fff'
                });
     
                img.onload=function(){
                    var canvas=document.createElement("canvas");
                    canvas.width=img.width;
                    canvas.height=img.height;
                    var ctx=canvas.getContext('2d');
                    ctx.drawImage(img,0,0);
                    var  dataURL=canvas.toDataURL('image/png');
     
                    var a = document.createElement('a');
                    // 创建一个单击事件
                    var event = new MouseEvent('click');
                    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                    a.download = '图片.png' || '下载图片名称';
                    // 将生成的URL设置为a.href属性
                    a.href = dataURL;
                    // 触发a的单击事件
                    a.dispatchEvent(event);
                };
            }
        </script>
    </body>

#### 3 最终效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201014215544477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201014215838876.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201014221311553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70