echarts 饼状图中间添加图片

最新推荐文章于 2024-06-11 10:16:09 发布

原创最新推荐文章于 2024-06-11 10:16:09 发布 · 6.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在ECharts的饼状图中心位置添加图片，通过设置'graphic'属性，指定图片路径、尺寸及位置，实现图表美化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts 饼状图中间添加图片

代码如下：

 option = {
 
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          
          graphic:{       //图形中间图片
            elements: [{
              type: 'image',
              style: {
                image: "image/aa.png",//你的图片地址
                width: 80,
                height: 85.7
              },
              left: 'center',
              top: 'center'
            }]
          },
       
          series: [
            {
              name: '统计：',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              minAngle:10,//最小比例显示，解决最大值最小值差距过大导致最小值的比例显示不出来
              emphasis: {
                label: {
                  show: true,
                },
              },
              labelLine: {
                show: true
              },
              itemStyle:{
                normal:{
          
                  opacity:0.4
                }
              },
              data: this.classifydatas
            }
          ]
        }