ECharts 饼图内环绘制:使用 graphic 元素实现
以下是一个使用 ECharts 在饼图中用 graphic 绘制内环的示例代码:
var option = {
series: [
{
type: 'pie',
radius: ['50%', '70%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 2,
borderColor: '#fff'
},
emphasis: {
itemStyle: {
borderWidth: 2,
borderColor: '#fff'
}
},
animationDuration: 3000,
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
},
{
type: 'pie',
radius: ['40%', '45%'],
avoidLabelOverlap: false,
data: [
{ value: 1, name: '', itemStyle: { color: '#EDEDED' } }
],
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 0
},
tooltip: {
show: false
},
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: 'center',
style: {
text: '内环',
fill: '#555',
fontFamily: 'Arial',
fontSize: 20,
fontWeight: 'bold'
},
z: 100
}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在这个示例中,我们在饼图中添加了一个内环,使用 graphic 绘制了一个文本元素来显示'内环'文本。具体实现方法是在第二个 series 中添加了一个数据项,并设置了 graphic 元素。同时,我们还对内环的样式进行了微调,如设置了颜色、禁用了标签重叠等。
这个示例中的 option 变量可以直接传给 setOption 方法,用于显示图表。如果需要更多的样式调整,可以在 option 中添加更多的配置项。
原文地址: https://www.cveoy.top/t/topic/lxuI 著作权归作者所有。请勿转载和采集!