ECharts 饼图内环绘制:使用 graphic 组件实现
可以使用 ECharts 中的 graphic 组件绘制饼图内环,具体步骤如下:
- 在饼图中设置一个内半径,表示内环的大小,可以通过设置 series 中的 radius 数组来实现:
series: [{
type: 'pie',
radius: ['50%', '70%'], // 外半径为 50%,内半径为 70%
// ...
}]
- 在图表中添加一个 graphic 组件,用于绘制内环,可以通过设置 graphic 的 type 属性为 'ring' 来实现:
graphic: {
type: 'ring',
shape: {
cx: '50%', // 中心点横坐标
cy: '50%', // 中心点纵坐标
r: ['50%', '70%'] // 内环半径和外环半径
},
style: {
fill: '#fff', // 填充颜色
stroke: '#999', // 描边颜色
lineWidth: 1 // 描边宽度
}
}
- 通过设置 graphic 的 shape 和 style 属性,可以进一步调整内环的形状和样式,例如设置内环为圆形、设置填充颜色和描边颜色等。
完整代码示例:
option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}],
graphic: {
type: 'ring',
shape: {
cx: '50%',
cy: '50%',
r: ['50%', '70%']
},
style: {
fill: '#fff',
stroke: '#999',
lineWidth: 1
}
}
};
原文地址: https://www.cveoy.top/t/topic/lxuE 著作权归作者所有。请勿转载和采集!