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 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
            }
          }))
        }]
      };