Echarts在线免费图表

 
            var myColor = ['#81E7ED'];
 var dataLine = [63.9, 67.2, 68.16, 68.96, 77,44];
 var positionLeft = 20,
     max = 10 + 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: ['湖北 恩施站','甘肃 民乐站', '海南 三亚站', '海南 琼海站', '四川 江油站']
     }, {
         axisTick: 'none',
         axisLine: 'none',
         show: true,
         axisLabel: {
             inside: true,
             align: 'right',
             textStyle: {
                 color: '#ffffff',
                 fontSize: '16'
             }
         },
         z: 10,
         data: [0.799, 0.84, 0.852, 0.862, 0.968]
     }, {

         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
         },
     ]
 }