1. 设置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",
		},
		...
	}
  1. 可能会先加载默认黑色背景再加载图片,页面闪现,解决方法如下:
    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)
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐