const data=[
{ value: 0.09,name:'制梁进度', color: '#86C58C',state:'' },
{ value: 0.00,name:'架梁进', color: '#C6A381' ,state:'正常'},
{ value: 33.07,name:'下部进度', color: '#669BDA',state:'正常' },
];
// const textStyle = { "color": "#CED6C8", "fontSize": 15 }
const itemColor = {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1
}
let option = {
backgroundColor: "#0b1a2a",
grid: {
left: '15%', // 调整左边距
right: '15%', // 调整右边距
top: '20%', // 调整顶部边距
bottom: '20%' // 调整底部边距
},
tooltip: {
show: false,
},
legend: {
show: false
},
xAxis: [{
splitLine: {
show: false
},
max: 100,
type: 'value',
show: false
}],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
inverse: true,
axisLabel: {
// textStyle: textStyle,
margin: 10
},
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: { "color": "#77D991", "fontSize": 15 },
margin: 100,
align: 'right', // Align the labels to the left
},
data: data.map(item => ({
value: item.state,
name: item.name,
}))
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: { "color": "#CED6C8", "fontSize": 15 },
formatter: function (value) {
return value + '%';
},
align: 'left', // Align the labels to the left
},
data: data.map(item => ({
value: item.value,
name: item.name,
}))
}
],
series: [{
name: '',
type: 'bar',
barWidth: 10, // Width of the bar
showBackground: true,
yAxisIndex: 0,
label: {
show: true,
color:"#fff"
},
data: data.map(item => ({
value: item.value,
name: item.name,
itemStyle: {
color: item.color // Set color for each data point
},
label: {
show: true,
position: 'left', // Place the label on the right side of the bar
formatter: '{b}' // Use the data item's name for label content
}
}))
}]
};