1、业务需求

将数据显示在饼图内部，格式化百分比显示，鼠标放上去显示具体名称和数值

原样式如下

2、业务实现

调整代码如下，核心语句已标记注释

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: 'Access From',
    type: 'pie',
    radius: '50%',
    data: [{
      value: 1048,
      name: 'Search Engine'
    },
    {
      value: 735,
      name: 'Direct'
    },
    {
      value: 580,
      name: 'Email'
    },
    {
      value: 484,
      name: 'Union Ads'
    },
    {
      value: 300,
      name: 'Video Ads'
    }],
    radius: '50%',
    center: ['50%', '50%'], // 这个属性可以调整图像的位置，左面所示为中心
    label: {
      normal: {
        show: true,
        position: 'inner', // 数值显示在内部
        formatter: '{d}%', // 格式化数值百分比输出
      },
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

更改后效果如下图所示

 3）附录

​​ECharts 提示框组件Tooltip属性大全（包含文本注释）​​

 以上就是ECharts 饼图数据放在饼图内部显示的介绍，做此记录，如有帮助，欢迎点赞关注收藏！