[GitHub] hAtul89 opened a new issue #8256: Remove spaces if bar isn't set

[GitBox]

hAtul89 opened a new issue #8256: Remove spaces if bar isn't set
URL: https://github.com/apache/incubator-echarts/issues/8256
 
 
   I have this chart: 
   
   [![enter image description here][1]][1]
   
       var app = echarts.init(document.getElementById('main-chart'));
       
       var posList = [
           'left', 'right', 'top', 'bottom',
           'inside',
           'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
           'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 
'insideBottomRight'
       ];
       
       app.configParameters = {
           rotate: {
               min: -90,
               max: 90
           },
           align: {
               options: {
                   left: 'left',
                   center: 'center',
                   right: 'right'
               }
           },
           verticalAlign: {
               options: {
                   top: 'top',
                   middle: 'middle',
                   bottom: 'bottom'
               }
           },
           position: {
               options: echarts.util.reduce(posList, function (map, pos) {
                   map[pos] = pos;
                   return map;
               }, {})
           },
           distance: {
               min: 0,
               max: 100
           }
       };
       
       app.config = {
           rotate: 90,
           align: 'left',
           verticalAlign: 'middle',
           position: 'insideBottom',
           distance: 15,
           onChange: function () {
               var labelOption = {
                   normal: {
                       rotate: app.config.rotate,
                       align: app.config.align,
                       verticalAlign: app.config.verticalAlign,
                       position: app.config.position,
                       distance: app.config.distance
                   }
               };
               app.setOption({
                   series: [{
                       label: labelOption
                   }, {
                       label: labelOption
                   }, {
                       label: labelOption
                   }]
               });
           }
       };
       
       
       
       var labelOption = {
           normal: {
               show: true,
               position: app.config.position,
               distance: app.config.distance,
               align: app.config.align,
               verticalAlign: app.config.verticalAlign,
               rotate: app.config.rotate,
               // formatter: '{c}  {name|{a}}',
               formatter: '{name|{a}}',
               fontSize: 16,
               rich: {
                   name: {
                       textBorderColor: '#fff'
                   }
               }
           }
       };
       
       option = {
           color: ['#007bff', '#00b0f0', 'red', '#e5323e'],
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'shadow'
               }
           },
           legend: {
               data: ['Inactives / Viewers', 'Inactives / Viewers / Less than 
1min per day', 'Light no Macro'] 
               // data: ['Light no Macro']
       
           },
           toolbox: {
               show: true,
               orient: 'vertical',
               left: 'right',
               top: 'center',
               feature: {
                   mark: {show: true},
                   // dataView: {show: true, readOnly: false},
                   // magicType: {show: true, type: ['line', 'bar', 'stack', 
'tiled']},
                   restore: {show: true},
                   saveAsImage: {show: true}
               }
           },
           calculable: true,
           xAxis: [
               {
                   type: 'category',
                   axisTick: {show: false},
                   data: ['usage1', 'usage2', 'usage3', 'sum of all']
               }
           ],
           yAxis: [
               {
                   type: 'value', 
                   name: 'Score'
               }
           ],
           series: [
               {
                   name: 'Light no Macro',
                   type: 'bar',
                   label: labelOption,
                   color: 'red',
                   data: [<?php echo "[3,{$qws[7][7]},0,0]"; ?>]
               },
               {
                   name: 'Inactives / Viewers',
                   type: 'bar',
                   barGap: 0,
                   label: labelOption,
                   data: [<?php echo 
"{$qws[1][7]},{$qws[3][7]},{$qws[5][7]},{$qws[8][7]}"; ?>] 
               },
               {
                   name: 'Inactives / Viewers / Less than 1min per day',
                   type: 'bar',
                   label: labelOption,
                   data: [<?php echo $qws[2][7].','.$qws[4][7].','.$qws[6][7]; 
?>]
               }
           ]
       };
       
           app.setOption(option);
   
   
   The "Light no Macro" is a "separate"-unique data - as you can see in the 
chart. 
   As a result of adding it: this creates spaces in the beginning of each 
column of every option (usage1,usage2,usage3) and in the end of the last chart 
(sum of all). 
   
   
     [1]: https://i.stack.imgur.com/qZCJS.png

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org