echarts 饼图添加底层图片旋转

• 效果展示

• 方法封装(使用css动画)

const addImageRotationFunction = (dom: HTMLDivElement,imgUrl:string) => {
	// 创建背景图元素
	const bgImage = document.createElement('img');
	bgImage.src = imgUrl;
	bgImage.style.position = 'absolute';
	bgImage.style.top = '50%';
	bgImage.style.left = '30%';
	bgImage.style.transform = 'translate(-50%, -50%)';
	// bgImage.style.width = '80%';
	bgImage.style.height = '90%';
	bgImage.style.opacity = '1';
	// bgImage.style.zIndex = '-1';

	// 添加旋转动画
	bgImage.style.animation = 'rotate 10s linear infinite';

	// 添加到容器
	dom.appendChild(bgImage);

	// 添加CSS动画
	const style = document.createElement('style');
	style.textContent = `
  @keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
`;
	document.head.appendChild(style);
};

• 使用

// 初始化图表
const chartInit = () => {
	// 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(chartRef.value);
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(chartOption1.value);
        // 添加底图旋转
	addImageRotationFunction(chartRef.value,imgUrl);
	//自适应大小
	addEventListener('resize', () => {
		myChart.resize();
	});
};