u202.png
需求：使用echarts實現(xiàn)上圖的效果
參考的是：https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-label-tangential
實現(xiàn)代碼及注釋:
const option = {
// 極坐標(biāo)polar
polar: {
radius: [40, '50%'] // '15%'整個繪圖區(qū)域的大薪旄椤喊废； 40圓環(huán)的半徑大小
},
// 自定義繪制圖形
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, // 圓環(huán)最大值
startAngle: 90, // 圓環(huán)開始繪制的位置甩鳄，90度為12點的位置
clockwise: false, // 圓環(huán)繪制的方向瓢剿，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對應(yīng) radiusAxis里的data 個數(shù)
{
value: 75,
itemStyle: {
normal: {
color: '#1778B9'
}
}
},
{
value: 60,
itemStyle: {
normal: {
color: '#D52722'
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#FB8106'
}
}
}
],
coordinateSystem: 'polar'
}
}
