其他分享
首页 > 其他分享> > echarts 实现同轴双向柱图

echarts 实现同轴双向柱图

作者:互联网

一、效果:

 

 

 二、实现option:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    legend: {
        data: ['入职', '离职']
    },
    axisPointer: {
        link: {xAxisIndex: 'all'}
    },
    grid: [{
        left: 50,
        right: 50,
        height: '35%'
    }, {
        left: 50,
        right: 50,
        top: '50%',
        height: '35%'
    }],
    xAxis: [
        {
            type: 'category',
            axisTick:{show:false},
            data: ['4月','5月','6月','7月','8月']
        },
        {
            gridIndex: 1,
            type: 'category',
            data: ['4月','5月','6月','7月','8月'],
            position: 'top',
            axisLabel:{show:false},
            axisTick:{show:false}
        }
    ],
    yAxis: [
        {
            name: '入职',
            type: 'value',
            axisTick:{show:false}
        },
        {
            gridIndex: 1,
            name: '离职',
            type: 'value',
            axisTick:{show:false},
            inverse: true
        }
    ],
    series: [
        {
            name: '入职',
            type: 'bar',
            // hoverAnimation: false,
            data: [
                0.97,0.96,0.96,0.95,0.95
            ]
        },
        {
            name: '离职',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // hoverAnimation: false,
            data: [
                0.077,0.091,0.126,0.69,0.182
            ]
        }
    ]
};

 

标签:false,name,show,data,柱图,axisTick,同轴,type,echarts
来源: https://www.cnblogs.com/art-poet/p/14413936.html