u202.png
需求：使用echarts实现上图的效果
参考的是：https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-label-tangential
实现代码及注释:
const option = {
// 极坐标polar
polar: {
radius: [40, '50%'] // '15%'整个绘图区域的大小； 40圆环的半径大小
},
// 自定义绘制图形
graphic: [
{
type: 'text', // 绘制文本
x: 50,
y: 40,
style: {
text: '超欠',
textAlign: 'center',
fontSize: '10px',
fill: '#1778B9' // 文本颜色
}
},
{
type: 'text',
x: 50,
y: 55,
style: {
text: '-3837',
textAlign: 'center',
fontSize: '10px',
fill: '#D52722'
}
}
],
angleAxis: {
show: false, // 角度x轴刻度线
max: 100, // 圆环最大值
startAngle: 90, // 圆环开始绘制的位置，90度为12点的位置
clockwise: false, // 圆环绘制的方向，false为逆时针方向
axisLine: {
show: false // x轴刻度分割线
},
axisLabel: {
show: false // x轴刻度文本
},
splitLine: {
show: false // 切分线显示
}
},
radiusAxis: {
show: false, // 带弧度的x轴的轴线
type: 'category',
data: ['a', 'b', 'c']
},
series: {
type: 'bar', // 柱状
barCategoryGap: '0%', // 每个类别之间的空隙
data: [ // 这里的data对应 radiusAxis里的data 个数
{
value: 75,
itemStyle: {
normal: {
color: '#1778B9'
}
}
},
{
value: 60,
itemStyle: {
normal: {
color: '#D52722'
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#FB8106'
}
}
}
],
coordinateSystem: 'polar'
}
}
