进度条echarts 柱状配置项内容和展示

       var myColor = ['#81E7ED']
 var dataLine = [50, 66, 33, 25]
 let positionLeft = 0.4,
    max = 100 + 2*positionLeft
 var option = {
     backgroundColor: '#101E44',
     grid: [
         {
         left: '8%',
         top: '12%',
         right: '5%',
         bottom: '8%',
         containLabel: true
     },
     {
         left: '10%',
         top: '12%',
         right: '5%',
         bottom: '8%',
         containLabel: true
     }
         ],
     xAxis: [{
         max:max,
         show: false
     }],
     yAxis: [{
         axisTick: 'none',
         axisLine: 'none',
         offset: '27',
         axisLabel: {
             textStyle: {
                 color: '#81E7ED',
                 fontSize: '16'
             }
         },
         data: ['智能科技', '人工科技', '智能装备制造', '核能科技']
     }, {
         axisTick: 'none',
         axisLine: 'none',
         show: false,
         axisLabel: {
             textStyle: {
                 color: '#ffffff',
                 fontSize: '16'
             }
         },
         data: [1, 1, 1, 1]
     }, {

         axisLine: {
             lineStyle: {
                 color: 'rgba(0,0,0,0)'
             }
         },
         data: []
     }],
     series: [
         
        { //间距
            type: 'bar',
            barWidth: 15,
            stack: 'b',
            legendHoverLink: false,
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [positionLeft,positionLeft,positionLeft,positionLeft]
        },{
         name: '条',
         type: 'bar',
         stack: 'b',
         yAxisIndex: 0,
         data: dataLine,
         label: {
             normal: {
                 show: false,
                 position: 'right',
                 distance: 10,
                 formatter: function(param) {
                     return param.value + '%'
                 },
                 textStyle: {
                     color: '#ffffff',
                     fontSize: '16'
                 }
             }
         },
         barWidth: 10,
         itemStyle: {
             normal: {
                 color: function(params) {
                     var num = myColor.length
                     return myColor[params.dataIndex % num]
                 }
             }
         },
         z: 2
     }, {
         name: '白框',
         type: 'bar',
         yAxisIndex: 1,
         barGap: '-100%',
         data: [99.8, 99.9, 99.9, 99.9],
         barWidth: 21,
         itemStyle: {
             normal: {
                 color: '#0e2147',
                 barBorderRadius: 2
             }
         },
         z: 1
     },
     {
         name: '外框',
         type: 'bar',
         yAxisIndex: 2,
         barGap: '-100%',
         data: [100, 100, 100, 100],
         barWidth: 23,
         label: {
             normal: {
                 show: true,
                 position: 'right',
                 distance: 10,
                formatter: function(data) {
                    return dataLine[data.dataIndex] +"%";
                },
                 textStyle: {
                     color: '#ffffff',
                     fontSize: '16'
                 }
             }
         },
         itemStyle: {
             normal: {
                 color: function(params) {
                     var num = myColor.length
                     return myColor[params.dataIndex % num]
                 },
                 barBorderRadius: 0
             }
         },
         z: 0
     },
 /*     {
         name: '白框',
         type: 'bar',
         yAxisIndex: 1,
         barGap: '-100%',
         data: [0, 0, 0, 0],
         barWidth: 20,
         itemStyle: {
             normal: {
                 color: '#0e2147',
                 barBorderRadius: 0
             }
         },
         z: 1
     },
     {
         name: '外框',
         type: 'bar',
         yAxisIndex: 2,
         barGap: '-100%',
         data: [2, 3, 4, 5],
         barWidth: 22,
         itemStyle: {
             normal: {
                 color: function(params) {
                     var num = myColor.length
                     return myColor[params.dataIndex % num]
                 },
                 barBorderRadius: 0
             }
         },
         z: 0
     }*/
     
     ]
 }