Echarts - >堆叠独立的酒吧

时间:2018-06-15 03:11:22

标签: javascript echarts

我正在使用echarts并尝试堆叠具有独立数据的条形图。基本上,它应该看起来像这样(只是水平而不是垂直):

https://i.stack.imgur.com/fKf5a.png (取自Pandas- stacked bar chart with independent/unrelated partitions of bars

到目前为止,我的代码是(在https://ecomfe.github.io/echarts-examples/public/editor.html中使用):

option = {
    xAxis: {
        type: 'value',

    },

    tooltip: 'show',

        yAxis: {
        type: 'category',
        data : ["Name 1","Name 2"],
    },

        series: [
        {
        data: [210],
        type: 'bar',
        stack: '2',
        },
        {
        data: [20],
        type: 'bar',
        stack: '2',
        },
                {
                    name: 'City Beta',
        data: [75],
        type: 'bar',
        stack: '4',
        },
        {
            name: 'City Alpha',
        data: [25],
        type: 'bar',
        stack: '4',
        }
    ]
};

我需要独立命名每个栏。这可能吗?理想情况下它看起来像这样: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-y-category-stack

但是每个栏都有独立的值,名称等。没有值和名称会重复。

任何帮助都将受到高度赞赏。

1 个答案:

答案 0 :(得分:0)

是的,您可以...

使用下面的代码,您可以获取它。

label: {
normal: {
    show: true,
    position: 'insideRight'
}

},

示例代码:

var option = {
xAxis: {
    type: 'value',

},

tooltip: 'show',

yAxis: {
    type: 'category',
    data: ["Name 1", "Name 2"],
},

series: [{
        data: [210],
        type: 'bar',
        stack: '2',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
    },
    {
        data: [20],
        type: 'bar',
        stack: '2',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
    },
    {
        name: 'City Beta',
        data: [75],
        type: 'bar',
        stack: '4',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
    },
    {
        name: 'City Alpha',
        data: [25],
        type: 'bar',
        stack: '4',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
    }
]

};

输出:

enter image description here