apache / echarts

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

Removing "3,0" when manually placing data using [3,0] #8257

Closed waliddoch closed 4 years ago

waliddoch commented 6 years ago

I am currenlty experimenting with Echarts.

In certain cases, i want to write series-data to my chart in a different category, as explained in this part of the documentation - using the squared [] to choose the "column" where i want to use the data.

The problem is that when displaying the data on the chart I get it printed with commas 3,0,0,0. The parameter responsible for the output is formatter: '{c} {name|{a}}', and I couldn't find anything else that suits me via the documentation for the formatter part.

enter image description here

This is my code:

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