ECharts 自定义图表导出图片

最新推荐文章于 2024-02-05 15:04:55 发布

旭东怪

最新推荐文章于 2024-02-05 15:04:55 发布

阅读量5k

点赞数 4

分类专栏：图表库

本文链接：https://blog.csdn.net/qq_38974638/article/details/109085492

版权

图表库专栏收录该内容

65 篇文章 34 订阅

订阅专栏

1 前言

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

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

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

2 实现代码

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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 最终效果图

旭东怪

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
ECharts 自定义图表导出图片

1 前言在项目过程中，碰到一个这样的需求，页面显示时如下图所示ECharts图表背景是深色，文字是白色的。但是导出图片要求如下图所示，背景是白色的，文字是黑色的。这时我们就需要用到自定义图表导出图片，实现思路这样的，用两个图表，一个深底白字的图表用来显示在页面上，一个白底黑字的图表隐藏专门用来导出图片。2 实现代码<body>  <div id="main" styl
复制链接

扫一扫