动态效果

你可以创建一个额外的 ::after 伪元素来放置背景图像，这样就可以在不影响 div 本身的情况下实现背景图的渲染。以下是一个示例：

.echartsBody {
  position: relative;
  width: 100%;
  height: calc(70% - 0px);
  overflow: hidden; /* 防止背景图超出容器 */
}

.echartsBody::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/bg.png") center center no-repeat;
  background-size: 50%;
  z-index: -1; /* 将背景图放在内容之下 */
}

此代码创建了一个与 .echartsBody 大小和位置相同的 ::after 伪元素，并将背景图像应用于该伪元素。将 z-index 设置为 -1 可以确保背景位于内容之下。如果你的页面有其他的 z-index 层级，你可能需要调整这个 z-index 值。

请注意，这种方法可能会在某些较老的浏览器中无法正常工作，因为它们可能不支持 ::after 伪元素或 background-size 属性。

背景图片旋转

要使背景图像旋转，你可以使用 CSS 动画。这是一个简单的例子，将背景图像旋转360度，持续时间为10秒：

.echartsBody {
  position: relative;
  width: 100%;
  height: calc(70% - 0px);
  overflow: hidden; 
}

.echartsBody::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/bg.png") center center no-repeat;
  background-size: 50%;
  z-index: -1;
  animation: spin 10s linear infinite; /* 添加动画 */
}

/* 定义一个名为spin的关键帧动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在这个例子中，我们定义了一个名为 spin 的关键帧动画，使元素从 0 度旋转到 360 度。然后我们在 ::after 伪元素上应用了这个动画，设置为无限循环(infinite)，使得背景图持续旋转。

注意，动画效果会取决于你的背景图片和容器的大小。你可能需要根据你的具体需求调整旋转速度（改变 10s）或旋转方向（改变 rotate(360deg) 到 rotate(-360deg)）。