Echarts图表没数据的时候，用图片代替暂无数据(图片自适应)

暂无数据时在echarts图表中显示：

代码如下：

 if (data === null || data.length === 0) { // 获取的数据源
        const elementImg = require('@/assets/index/nodata.png') // 暂无数据图片路径
        const main = document.getElementById(id)
        main.style.display = 'flex'
        main.style.justifyContent = 'center' // 设置元素水平居中
        main.style.alignItems = 'center' // 垂直居中
        main.removeChild(main.firstChild) // 移除第一个节点，即里面的要放置图表的div
        const mainImg = document.createElement('img')
        main.appendChild(mainImg) // 添加要显示的图片
        mainImg.style.width = 'auto'
        mainImg.style.height = 'auto'
        mainImg.style.maxWidth = '40%'
        mainImg.style.maxHeight = '40%'
        mainImg.src = elementImg // 要显示图片的src
        return {} // 返回空对象
      }else{ // 有数据时候，进行图表的绘制
      const option={
      .... // 具体实现代码
       }
        return option
      } 

存在数据时，具体绘制图表，可查看该篇文章：
Vue中引入echarts并实现echarts自适

涉及到的知识点：
JS中获取以及操作DOM中的节点

文章借鉴自：https://blog.csdn.net/weixin_42995083/article/details/109297136