项目使用到半圆,关键字【半圆】找不到合适的例子,就在前人的例子上稍微做了改动
配置项如下
// 参考作品:https://gallery.echartsjs.com/editor.html?c=xFrH5r49t_
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0,0,0,0)",
borderWidth: 0
},
emphasis: {
color: "rgba(0,0,0,0)",
borderWidth: 0
}
};
var dataStyle = {
normal: {
formatter: '{c}/100',
position: 'center',
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'normal',
color: '#34374E'
}
}
};
option = {
backgroundColor: '#fff',
series: [{
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: ['26%', '29%'], // 半径
center: ['340', '445'],
minAngle: 180,
startAngle: -180, // 开始角度,180,则从左侧开始
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 0,
itemStyle: {
normal: {
color: '#E1E8EE'
}
},
}, {
value: 0,
itemStyle: placeHolderStyle,
},
]
},
{
type: 'pie',
hoverAnimation: true, //鼠标经过的特效
radius: ['25%', '30%'],
center: ['340', '445'],
minAngl: 180,
startAngle: -180, // 开始角度,180,则从左侧开始
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 10,
itemStyle: {
normal: {
color: '#6F78CC'
}
},
label: dataStyle,
}, {
value: 100,
itemStyle: placeHolderStyle,
},
]
}
]
};