echarts进度

echarts图表集

      const data=[{ value: 10.09,name:'制梁进度', color: '#86C58C',state:'' },  { value: 66.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 barshowBackground: 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 barformatter: '{b}' // Use the data item's name for label content}}))}]};