echarts能否配置成下面的柱状图？？

Question

看了半天的官方文档及试验，没有实现。现在的难点就是柱子的颜色不一样，相当于有4个legend，但是事实上每个只有一个数据，这个按理说应该用饼图的更合理点。但是需求这样，求问下有没有实现过这样的。这个是自己实现的。

数据格式如下

NSC: {
    plan: 10, // 规划
    construction: 25, // 营建
    siteSelection: 20, // 选址
    opening: 18 // 开业
 }

按理说series配置应该下面这样，但是这种柱状图的颜色都一样。而且上面也没法搞成四个legend

series: [
    {
        type:'bar',
        barWidth: '60%',
        data:[10, 25, 20, 18]
    }
]

我强行改成了下面这样，这样确实差不多，问题就是下面的X轴文字因为每个地方变四个导致歪了。求问有没有其他方式实现的。

series: [
    {
        name: '规划'
        type: 'bar',
        barWidth: '60%'
        data: [10, 0, 0, 0]
    },
    {
        name: '开业'
        type: 'bar',
        barWidth: '60%'
        data: [0, 25, 0, 0]
    },
    ...
]

Answer 1

这种？
http://www.cnblogs.com/kang54...

Answer 2

单bar无legend，多bar无数据时也会占空间
比起解决多legend的问题配置间距明显要简单的多
重点在于barGap属性
http://www.echartsjs.com/opti...

 series : [
        {
            name:'规划',
            type:'bar',
            barGap:'-100%',
            data:[10, 0, 0, 0],
            itemStyle: {
                normal: {
                    color:'red'
                }
            },
        },
         {
            name:'营建',
            type:'bar',
            data:[0, 20, 0, 0],
            itemStyle: {
                normal: {
                    color:'blue'
                }
            },
        },
         {
            name:'选址',
            type:'bar',
            data:[0, 0, 30, 0],
            itemStyle: {
                normal: {
                    color:'yellow'
                }
            },
        },
        {
            name:'开业',
            type:'bar',
            data:[0, 0, 0, 40],
            itemStyle: {
                normal: {
                    color:'green'
                }
            },
        }
    ]

Answer 3

这种类型确实适合用饼图
但硬要用柱状图的话 为了不歪可以改成堆叠柱图 加个stack: 'xxx'
https://codepen.io/caocong/pe...