话不多说,上代码:
let percent = 0.5; //percent
let current = 270 * percent; // 当前用量 = all * percent
let all = 270; //彩色部分总大小,自定义,和最下方bottom的值一起决定环形图的角度
const option = {
series: [
{
type: "pie",
label: {
show: false,
},
// itemStyle: {
//
// },
center: ["50%", "50%"],
radius: ["50%", "70%"],
startAngle: 225, //起始角度,根据实际需要调节
data: [
{
name: "用量",
value: current,
label: {
show: true,
position: "center",
formatter: (percent ? (percent * 100).toFixed(2) : 0) + "%",
textStyle: {
baseline: "bottom",
fontSize: 35,
color: "rgba(49, 49, 49, 1)",
},
},
labelLine: {
show: false,
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(232, 159, 71, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(245, 184, 70, 1)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
name: "rest", // 实际显示部分是总量-用量
value: all - current,
itemStyle: {
color: "rgba(248, 171, 44, 0.16)",
},
},
{
name: "bottom",
value: 90,//底部透明部分的颜色,看实际情况,如果需要的是半圆图,这个透明部分的value值就变成和all相同的值,以此类推,可以自己调节value的大小
itemStyle: {
color: "transparent",
},
},
],
},
],
};
以上基本就完成了一个半角的环形图,或者其他角度的都可以自己调,主要就是把不显示的部分换成透明色,然后百分比相对于不透明的一部分即半圆或者四分之三圆来,起始角度决定透明部分在上下左右即环形图缺口的方向