柱形图对比echarts 柱状配置项内容和展示

两个标签对比

      var myData = [ '北京', '上海','天津', '湖北']

var cost = ["30", "20", "80", "110"];
var totalCost = ["100", "100", "100", "100"];

var data = {
    cost: cost,
    totalCost: totalCost,
};

var option = {
    baseOption: {
        backgroundColor: 'rgba(1, 36, 65, 0.8)',
        legend: {
                data:["1111","2222"]
            },
        timeline: {
            show: false,
        },
        legend: {
            show: false
        },
        tooltip: {
            show: false,
        },
        grid: [{
                show: false,
                left: '9%',
                top: 20,
                bottom: 0,
                containLabel: true,
                width: '31%'
            },
            {
                show: false,
                left: '52.5%',
                top: 20,
                bottom: 0,
                width: '0%'
            },
            {
                show: false,
                right: '9%',
                top: 20,
                bottom: 0,
                containLabel: true,
                width: '31%'
            }
        ],

        xAxis: [{
                show:true,
                name:"标签1",
                type: 'value',
                   position: 'top',
                nameLocation:"center",
                 nameTextStyle:{
                   color:'#68DBD0',
                   fontSize:16
                 },
                offset:[-40],
                show:true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            {
                gridIndex: 1,
                show: false
            },
            {
                nameLocation:"center",
                offset:[-40],
                 show:true,
                 name:"标签2",
                 nameTextStyle:{
                   color:'#68DBD0',
                   fontSize:16
                 },
                gridIndex: 2,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'top',
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis: [{
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: myData
            },
            {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#50afff',
                        fontSize: 14
                    }
                },
                data: myData.map(function(value) {
                    return {
                        value: value,
                        textStyle: {
                            align: 'center'
                        }
                    }
                })
            },
            {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: myData
            }
        ],
        series: []
    },

    options: [{
        series: [{
               name:'1111',
                type: 'bar',
                barGap: '-100%',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        position: 'left',
                        borderColor: '#214B66',
                        borderWidth: 2,
                        barBorderRadius: 15,
                        color: '#214B66'
                    },
                },
                z: 1,
                data: data.totalCost,
            }, {
                   name:'1111',
                type: 'bar',
                barGap: '-98%',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 12,
                        color: {
                            type: 'linear',
                            x: 0,
                            x1: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#27C6FE'
                            }, {
                                offset: 1,
                                color: '#00feff'
                            }]
                        }
                    },
                },
                label: {
                    normal: {
                        formatter: function(params) {
                            let str = params.data + "%";
                            return str
                        },
                        show: true,
                        position: 'top',
                        color: '#377AC0',
                        fontSize: 14,
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: data.cost,
            },
            { name:'2222',
                type: 'bar',
                barGap: '-100%',
                xAxisIndex: 2,
                yAxisIndex: 2,
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        borderColor: '#214B66',
                        borderWidth: 2,
                        barBorderRadius: 15,
                        color: '#214B66'
                    },
                },
                z: 1,
                data: data.totalCost,
            }, {
                 name:'2222',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                barGap: '-98%',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 12,
                        color: {
                            type: 'linear',
                            x: 0,
                            x1: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#27C6FE'
                            }, {
                                offset: 1,
                                color: '#00feff'
                            }]
                        }
                    },
                },
                max: 1,
                label: {
                    normal: {
                        formatter: function(params) {
                            let str = params.data + "%";
                            return str
                        },
                        show: true,
                        position: 'top',
                        color: '#377AC0',
                        fontSize: 14,
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: data.cost,
            }
        ]
    }]
}