apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.66k stars 19.61k forks source link

Remove spaces if bar isn't set #8256

Closed waliddoch closed 4 years ago

waliddoch commented 6 years ago

I have this chart:

enter image description here

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).

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.