echarts柱状图自定义样式（二）

后补柱状图样式设置，效果：

 代码呈上：

<div class="columnstyle" id="deviceRepair"></div>

JavaScript：

var deviceRepair = echarts.init(document.getElementById('deviceRepair'));
var deviceRepair1 = [100,120,200,300,210];
var deviceRepair2 = [132,120,200,300,210];
var yTMax1 = 600;
var yTMax2 = 600;
var maxDate1 = [];
var maxDate2 = [];
for (var i = 0; i < deviceRepair1.length; i++) {
    maxDate1.push(yTMax1);
}
for (var i = 0; i < deviceRepair2.length; i++) {
    maxDate2.push(yTMax2);
}
deviceRepair.setOption(option = {
    title: {
        left: 'center',
        top: 0
    },
    tooltip: {
        showContent :false, //不显示提示框浮层
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: [
        {x: '12%', y: '4%', width: '34%', height: '85%'},
        {x2: '7%', y: '4%', width: '34%', height: '85%'}
    ],
    xAxis: [{
        show:false,
        gridIndex: 0,
        type: 'value',
        splitLine:{show: false}
    },{
        show:false,
        gridIndex: 1,
        type: 'value',
        splitLine:{show: false}
    }
    ],
    yAxis: [
        {
            gridIndex: 0,
            type:'category',
            axisLine: {show: false},//去除坐标线
            axisTick: {show: false},//去除刻度线
            data: ['婴儿培养箱', '医用电子血压计', '除颤仪', '彩超','呼吸机'],
        },
        {
            gridIndex: 1,
            type:'category',
            axisLine: {show: false},//去除坐标线
            axisTick: {show: false},//去除刻度线
            data:['呼吸机', '除颤仪', '单道注射泵', '恒速注射泵','彩超']
        }
    ],
    series: [{
            type: 'bar',
            itemStyle: {
                color: '#fff',
                borderWidth:1,
                borderColor:'#dcdcdc',
                barBorderRadius: 10,
            },
            barWidth: 12,
            barGap: '-100%',
            barCategoryGap: '40%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            animation: false,
            data: maxDate1
        },{ 
            type: 'bar',
            itemStyle: {
                color: '#fff',
                borderWidth:1,
                borderColor:'#dcdcdc',
                barBorderRadius: 10
            },
            barWidth: 12,
            barGap: '-100%',
            barCategoryGap: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1,
            animation: false,
            data: maxDate2

        },{
            name: 'I',
            type: 'bar',
            barWidth: 12,
            itemStyle:{
                color:'#32ccc2',
                barBorderRadius: 10,
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                show:true,
                position: ['80%', '21'],
                formatter:'{c}'+'次'
            },
            data: deviceRepair1
        },
        {
            name: 'II',
            type: 'bar',
            barWidth: 12,
            itemStyle:{
                color:'#32ccc2',
                barBorderRadius: 10,
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            label: {
                show:true,
                position: ['80%', '21'],
                formatter:'{c}'+'次'
            },
            data: deviceRepair2
        }
    ]
});