在饼状图中间如何加图片

在echarts中,怎么在饼状图中间加一个图片,没遇到过这种,求解

img

img

事先做一个背景图片只有中心是你所需要的图片,其余部分均为透明白色,然后设置为饼图的图片就可以了

img

加了中心是白色花朵背景图后效果图如下:

img

var img = "https://img0.baidu.com/it/u=4260719975,1530958102&fm=253&fmt=auto&app=138&f=PNG?w=650&h=650",
option = {
    graphic: {
        elements: [
            {
                type: 'image',
                // z: 3,
                style: {
                    image: img,
                    width: 200,
                    height: 200,
                },
                left: 'center',
                top: 'center',
            },
        ],
    },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 135, name: 'Video Ads' },
        { value: 102, name: 'Others' }
      ]
    }
  ]
};


graphic: {//图形中间图片
    elements: [{
      type: "image",
      style: {
        image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F27%2F20150927124837_KeRUL.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651219937&t=cd810aaa55f2b18881793b0d577aac9d",//你的图片地址
        width: 100,
        height: 100,
      },
      left: "center",
      top: "center",
    }],
  },

https://echarts.apache.org/zh/option.html#graphic.id
https://blog.csdn.net/weixin_42729938/article/details/123901475