*可以用整个圆,也可以用半圆,自由发挥即可。有问题可留言
1、效果如下

2、代码实现
// 环状半圆形饼图
var option = {
grid: {
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true
},
series: [
{
name: "一般",
type: "pie",
//起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
tooltip: {},
radius: ["60%", "47%"],
center: ["40%", "40%"],
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 300,
itemStyle: {
normal: {
color: "rgba(80,150,224,0)"
}
}
},
{
value: 125, // 渐变色部分
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFDE00" },
{ offset: 0.5, color: "#00ECD9" },
{ offset: 1, color: "#00ECD9" }
])
},
},
{
value: 175, // 右侧部分
itemStyle: {
normal: {
color: "#0C5071"
}
}
}
]
}
]
};
本文介绍如何使用ECharts库创建环状半圆形饼图,包括设置图表样式、颜色渐变及数据展示等关键步骤。
4820

被折叠的 条评论
为什么被折叠?



