echart饼图设置背景图片

1，运用echart属性设置图片

 initChart () {
    ...
        series: [
        ],
        graphic: [
          {
            type: 'image', // 图形元素类型
            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
            z: 0, // 层叠
            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
            style: {
              image:' ',// 该图片为https开头或base64在线链接图片
              width: resizeCharts(156),
              height: resizeCharts(156)
            }
          }
        ]
     ...
  },

XXX.js

以1920*1080屏幕为基础，按不同尺寸比例设置大小
export function resizeCharts (px) {
  const w = window.innerWidth / 1920
  const h = window.innerHeight / 1080
  return w < h ? w * px : h * px
}

2.用一个大的div包裹图表容器main，在大的div上定位一张img图片

  <div class="ring">
        <img class="base-ring" src="@/assets/visual-screen/nucleic-acid/base-ring.svg" alt="" />
        <!-- 饼图 -->
        <div id="main"></div>
      </div>