请问这种柱形图该如何实现？

Question

如图，堆叠柱形图是能实现，但是具体设置某个柱的宽度，看了echarts好像实现不了（不能用表格边框实现！）。

http://demo.finebi.com/ 帆软Bi里是能实现的，不知道他用什么技术，我们公司在借鉴他们（/狗头）

Answer 1

hack出一个，思路为底下那个圆柱画2个，一个用于堆叠不显示（所以颜色设置为背景色，tooltip干掉），一个用于显示(通过barGap移位到堆叠位置),同时legend需要单独设置，不要显示出不显示的辅助柱子。
因为是hack的，所以需要对照业务看看值不值得使用这种方法。

var xAxisData = [];
var data3 = [2,2,3,4,5,6,7,8,9,10];
var data4 = [2,2,3,4,2,3,2,2,2,2];

option = {
    legend: {
        data: ['bar3', 'bar4'],
        left: '10%'
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        name: 'X Axis',
        axisLine: {onZero: true},
        splitLine: {show: false},
        splitArea: {show: false}
    },
    yAxis: {},
    grid: {
        bottom: 100
    },
    series: [
         {
            name: '辅助柱子',
            type: 'bar',
            stack: 'two',
            data: data4,
            itemStyle:{
                borderWidth:50,
                borderRadius: 15,
                color:'#fff'
            },
            zlevel:-1,
            tooltip:{
                formatter:function(){return false}
            }
        },
        {
            name: 'bar3',
            type: 'bar',
            stack: 'two',
            data: data3,
            barWidth:30,
            barMinWidth:30
        },
        {
            name: 'bar4',
            type: 'bar',
            data: data4,
            barWidth:15,
            itemStyle:{
                borderWidth:50,
                borderRadius: 15,
                
            },
            barGap:'-75%'
        }
    ]
};

Answer 2

echarts支持堆叠柱状图 ，不过这个可能涉及了单独定义某个堆叠的样式。
echarts的一个类似效果

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // Use axis to trigger tooltip
            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
        }
    },
    legend: {
        data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
        {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            
            label: {
                show: true
            },
            itemStyle:{
                    borderRadius: 20,
                    borderWidth:5,
                    borderColor:'#FFF'
                },
            emphasis: {
                focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            barWidth:70,
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: 'Search Engine',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};