echarts设置背景图片，且能够自适应宽高

最新推荐文章于 2024-08-21 11:14:08 发布

依赖_赖

最新推荐文章于 2024-08-21 11:14:08 发布

阅读量9.3k

点赞数 2

分类专栏：图表及地图相关文章标签： vue.js echarts

本文链接：https://blog.csdn.net/weixin_39150852/article/details/109582706

版权

图表及地图相关专栏收录该内容

26 篇文章 26 订阅

订阅专栏

设置option的backgroundcolor属性

	var img = new Image();
	img.src = '图片的url';
	
	option = {
		backgroundColor = {
			image: img ,
			repeat: "no-repeat",
		},
		...
	}

2.自适应图表宽高

    //echarts: 当前图表
    let fullImage = new Image();
	let img = new Image();
	let canvas = document.createElement('canvas');
	let ctx = canvas.getContext('2d');
	canvas.width = echarts.getWidth() * window.devicePixelRatio;
	canvas.height = echarts.getHeight() * window.devicePixelRatio;
	img.onload = () => {
		ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
		fullImage.src = canvas.toDataURL();
		echarts.resize();
	};
	img.src = require("../../../assets/echarts-bg.jpg");
	
	option = {
		backgroundColor = {
			image: fullImage,
			repeat: "no-repeat",
		},
		...
	}

可能会先加载默认黑色背景再加载图片，页面闪现，解决方法如下：
fullImage设置为全局变量，初始化时为fullImage赋值

	mounted() {
		this.myOption = this.$echarts.init(this.$el);
			this.fullImage = new Image();
			let img = new Image();
			let canvas = document.createElement('canvas');
			let ctx = canvas.getContext('2d');
			canvas.width = this.myOption.getWidth() * window.devicePixelRatio;
			canvas.height = this.myOption.getHeight() * window.devicePixelRatio;
			img.onload = () => {
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				this.fullImage.src = canvas.toDataURL();
				this.myOption.resize();
			};
			img.src = require("../../../assets/echarts-bg.jpg");
	}

初始化图标时设置定时器

	option = {
			backgroundColor = {
				image: this.fullImage,
				repeat: "no-repeat",
			},
			...
		}
    setTimeout(()=>{
		echarts.setOption(option)
	}, 100)