ECharts饼图添加背景图片

一、使用graphic添加背景图

option = {
    graphic: { 
        elements: [{
            type: 'image',//需要填充图片
            style: {
                image: ”path/to/your/background-image.jpg“, //需要添加的图片地址
                left: 'center',
                top: 'center'
            },
        }]
    },
   
    series: [
		{
            type: 'pie',
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            radius: ['40%', '70%'], // 控制饼图的大小
            label: {
                show: true,
                position: 'outside'
            }
        }
	]
};

二、使用 backgroundColor 和 tooltip 的 formatter 自定义背景色和内容

option = {
    backgroundColor: 'rgba(255, 255, 255, 0)', // 设置背景颜色，例如透明背景
    tooltip: {
        formatter: function (params) {
            return `${params.name}: ${params.value} (${params.percent}%)`; // 自定义提示框内容
        }
    },
    series: [
        {
            type: 'pie',
            data: [...], // 数据项配置同上
            radius: ['40%', '70%'], // 控制饼图的大小
            label: {
                show: true,
                position: 'outside'
            }
        }
    ]
};

三、在series内再添加一个元素

var myChart = echarts.init(document.getElementById('main'));    
var width = echarts.init(myChart ).getWidth() //获取宽度用来动态调整背景图大小
 // 饼状图内部图片，可以单独封装，多处调用
 var common_inner_image =  {
        type: 'pie',
        hoverAnimation: false, // 阻止鼠标相关事件
        animation: false,
        selectedMode: false,
        silent: true,
        tooltip: {
          trigger: 'none'
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'none'
            },
            label: {
              show: true,
              formatter: [ '{image|}' ].join('\n'),
              position: 'center',
            }
          }
        ]
      },
var innerImg = JSON.parse(JSON.stringify(common_inner_image)) //解析数据
      innerImg.data[0].label.rich = {
        image: {
          backgroundColor: {
            image:  ”path/to/your/background-image.jpg“, //需要添加的图片地址
          },
          width: width / 4 - 10,
          height: width / 4 - 10
        }
      }
// 图表配置项
var option = {
		//实现图标内包含背景图片
        series: [
          {
            name: '',
            type: 'pie',
            radius: ["60%", "75%"],
            center: ["35%", "50%"], //饼图位置控制
            data: data,
            label: {
              color: "#FFFFFF",
              formatter: (t) => {
                return t.value;
              },
            },
            labelLine:{
              length:15,
              length2:20,
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200; //定义动画延迟，错开显示，增强视觉效果
            },
          },
          {
            center: ["35%", "50%"], //饼图位置控制
            ...innerImg,//通过解构添加属性
          }
        ]
};
 
myChart.setOption(option);