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属性大全(包含文本注释)