option = {
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
show: false,
},
grid: {
left: "3%",
right: "3%",
},
series: [
{
type: 'bar',
data: [40],
barWidth: 15,
z: 100,
label: {
show: true,
position: 'right',
distance: 0,
formatter: '{insideTopRight|▎}',
rich: {
insideTopRight: {
color: '#424EB8',
align: 'left',
width: 0,
lineHeight: 25,
fontSize: '20',
}
}
},
cursor: 'default',
itemStyle: {
normal: {
barBorderRadius: [20, 0, 0, 20],
color: '#424EB8',
},
},
},
{
type: 'bar',
data: [70],
label: {
show: true,
position: 'insideRight',
distance: 0,
formatter: '{insideTopRight|▎}{insidebottomRight|▉}',
z: 10,
rich: {
insideTopRight: {
color: '#424EB8',
align: 'left',
width: 0,
verticalAlign: "bottom",
lineHeight: 23,
fontSize: '20',
},
insidebottomRight: {
color: '#D6E9FF',
align: 'left',
width: 0,
verticalAlign: "bottom",
lineHeight: 10,
fontSize: '10',
padding: [0, 0, 6, -1]
}
}
},
cursor: 'default',
silent: true,
barWidth: 13,
barGap: '-100%',
itemStyle: {
color: '#D6E9FF',
borderColor: '#D6E9FF',
borderWidth: 3,
barBorderRadius: [20, 20, 20, 20],
}
},
{
type: 'bar',
data: [100],
tooltip: {
show: false
},
silent: true,
barWidth: 13,
barGap: '-100%',
itemStyle: {
color: '#D6E9FF',
borderColor: '#D6E9FF',
borderWidth: 3,
barBorderRadius: [20, 20, 20, 20]
},
cursor: 'default'
},
{
type: 'bar',
data: [70],
tooltip: {
show: false
},
label: {
show: true,
position: 'right',
distance: 0,
formatter: `{insideTopRight|}{Right|当年目标：{@[0]}万元}`,
rich: {
Right: {
color: '#424EB8',
fontSize: '10',
verticalAlign: 'bottom',
padding: [-10, 0, 0, -25]
},
insideTopRight: {
color: '#fff',
align: 'bottom',
width: 0,
verticalAlign: "bottom",
lineHeight: 52,
fontSize: '10'
}
}
},
cursor: 'default',
silent: true,
barWidth: 13,
barGap: '-100%',
itemStyle: {
color: '#D6E9FF',
borderColor: '#D6E9FF',
borderWidth: 3,
barBorderRadius: [20, 20, 20, 20]
}
}
]
}