需求

业务需求横向对比柱状图，左边从左到右，右边从右到左。

效果图

代码

 var myChart = echarts.init(document.getElementById('chart-panel'));
 

let option = {
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
    },
    legend: {
        left: 'center',
        top: '6%',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        data: ['投资额（亿万）', '项目数（个）']
    },
    grid: [{              //右边的位置
        top: '18%',
        bottom: '0',
        left: '62%',
        width: '28%',
        height: '70%',
        containLabel: true
    }, {            //中间隐藏
        top: '18%',
        bottom: '0',
        left: '53%',
        width: '0%',
        height: '68%',
    }, {          //左边的位置
        top: '18%',
        bottom: '0',
        right: '%',
        width: '28%',
        height: '70%',
        containLabel: true
    }],
    xAxis: [{
        type: 'value',
        inverse: true,
        show:false 
    }, 
    {
        gridIndex: 1,
        show: false
    }, 
    {
        gridIndex: 2,
        type: 'value',
        show:false 
    }],
    yAxis: [
        {                         //右边的y坐标轴
            position: 'right',
            axisLabel: {
				position: 'right',
                show: true
            },
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['智慧水务','智慧酒店','智慧管网','智慧旅游','智慧城市']
        },
        {
            gridIndex: 1,
            position: 'center',
            axisLine: {
                show: false
            }, 
			axisLabel: {
				position: 'right',
                show: false
            },
            type: 'category',
            inverse: true,
            axisTick: {
                show: false
            },
            data: ['智慧水务','智慧酒店','智慧管网','智慧旅游','智慧城市']
        },
        {                                //右边的y坐标轴
            gridIndex: 2,
            position: 'left',
            axisLabel: {
                show: true
            },
            type: 'category',
            inverse: false,                //数据的顺序倒序
            axisTick: {
                show: false
            },
            data: ['智慧水务','智慧酒店','智慧管网','智慧旅游','智慧城市']
        }
    ],
    series: [
        {
            type: 'bar',
            barWidth: 11,
            name: '投资额（亿万）',
            itemStyle: {
                color: '#FE910A'
            },
            data: ['40','70','30','60','90']
        },
        {
            type: 'bar',
            barWidth: 11,
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '项目数（个）',
            itemStyle: {
                color: '#1890FF'
            },
            data: ['6','10','7','4','8']
        }
    ]
};



  
if(option){
myChart.setOption(option);
}

备注

在echarts官网维护期间，加上时间原因，只修改，为做具体操作，未做数据炫酷展示。仅供参考！
如有问题，私信！