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

       var myColor = ['#81E7ED'];
 var dataLine = [40, 56, 23, 15, 15];
 var positionLeft = 10,
     max = 100 + positionLeft;

 var g_cellBar0_y = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAoCAYAAAAhf6DEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA6SURBVEhLY2x8/vY/A4mg3zwcTDOBSTLBqGYSwahmEsGoZhLBqGYSwahmEsGoZhLBqGYSwZDUzMAAAJldBMF2UASmAAAAAElFTkSuQmCC';
 var g_cellBarImg0_y = new Image();
 g_cellBarImg0_y.src = g_cellBar0_y;

 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',
         axisLabel: {
             inside: true,
             align: 'left',
             textStyle: {
                 color: '#81E7ED',
                 fontSize: '16'
             }
         },
         z: 10,
         data: ['CCA', 'CHH', 'ABC', 'CBC', 'SCH']
     }, {
         axisTick: 'none',
         axisLine: 'none',
         show: true,
         axisLabel: {
             inside: true,
             align: 'right',
             textStyle: {
                 color: '#ffffff',
                 fontSize: '16'
             }
         },
         z: 10,
         data: [40, 56, 23, 15, 15]
     }, {

         axisLine: {
             lineStyle: {
                 color: 'rgba(0,0,0,0)'
             }
         },
         data: []
     }],
     series: [

         { //间距
             type: 'bar',
             barWidth: 30,
             stack: 'b',
             legendHoverLink: false,
             itemStyle: {
                 normal: {
                     color: 'rgba(0,0,0,0)'
                 }
             },
             z: 3,
             data: [positionLeft, 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: 30,
             itemStyle: {
                 color: {
                     image: g_cellBarImg0_y,
                     repeat: 'repeat'
                 }
                 /*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, 99.9],
             barWidth: 57,
             itemStyle: {
                 normal: {
                     color: '#0e2147',
                     barBorderRadius: 2
                 }
             },
             z: 1
         },
         {
             name: '外框',
             type: 'bar',
             yAxisIndex: 2,
             barGap: '-100%',
             data: [100, 100, 100, 100, 100],
             barWidth: 59,
             label: {
                 normal: {
                     show: false,
                     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, 7, 0, 7]
                 }
             },
             z: 0
         },
     ]
 }