echarts实现两个y轴

前几天有朋友问我，echarts怎么实现两个y轴，我告诉他了，他说不行，看到他的设计图我也是醉了，后来给解决了，我觉得这个我得和兄弟们分享分享。

上面这个就是他要实现的，但是如果他把柱状图改成横向的，两个y轴就会重合在一起如下

大家看到了吧，正常我们的图表都是竖直的，如下

<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: 'demo'
        },
        tooltip: {
            show:true,
            trigger:'item'
        },
        legend: {},
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: [{},{}],
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    myChart.setOption(option);

这个是官网给的例子，我就加了两行代码，因为一般我们项目的时候就差不多是这样的，但是一旦写成上面的那样，就出错。
后来我把官网的实例改了之后最终还是可以了加了一个属性，onZero: false,这个属性的意思就是x轴或者y轴是否显示在另一个轴的0刻度处。默认是true，然后这个问题就这样解决了

<div id="main"></div>

function indexmain2(id,numb1,numb2,numb3,numb4,numb5)
    {
        var myChartqj2 = echarts.init(document.getElementById(id));  
            optionqj2 =
            {  
                tooltip:
                {  
                    trigger: 'axis',  
                    axisPointer:
                    {  
                        type: 'line',  
                    }  
                },  
                legend: {},  
                grid:
                { 
                    top:'32px',
                    left: '15px',  
                    right: '13px',  
                    bottom: '50px',  
                    containLabel: true,
                },  
                xAxis:
                { 
                    type: 'value',
                    // data:["","",""],
                    min:0,
                    max:100,
                    splitNumber:10,
                    splitLine: {
                        show: false
                    },
                    axisTick:
                    {
                        show:false//不显示X轴的刻度
                    },
                    axisLine:
                    { // X轴线...颜色
                        lineStyle:
                        {
                            color:'#c490bf'
                        },  
                    },
                    name:'( % )',
                    nameLocation:'start',
                    nameTextStyle:
                    {
                        color:'#666',
                        padding:[0,0,0,0],
                    },
                    axisLabel:
                    { // Y轴的0 5 10...颜色
                        textStyle:
                        {
                            color:'#666',
                        }
                    },

                },  
                yAxis:
                [
                    {  

                        type: 'category',
                        boundaryGap: true, 
                        axisTick:
                        {
                            show:false//不显示Y轴的刻度
                        },
                        axisLine:
                        { // Y轴线...颜色
                            onZero: false,
                            lineStyle:
                            {
                                color:'#c490bf'
                            },  
                        },
                        axisLabel:
                        { // Y轴的0 5 10...颜色
                            textStyle:
                            {
                                color:'#666',
                            }
                        },
                        data: ['OAWEB01','OAWEB02', 'OADB01', 'OADB02', 'OALOG'],
                        position:'left',
                        name:'主机名称',
                        nameLocation:'end',
                        nameTextStyle:
                        {
                            color:'#30ad3a',

                            // padding:[0,80,0,0],
                        },


                    },
                    {  
                        type: 'category',  
                        // boundaryGap: true,
                        axisTick:
                        {
                            show:false//不显示Y轴的刻度
                        },
                        axisLine:
                        { // Y轴线...颜色
                            onZero: false,
                            lineStyle:
                            {
                                color:'#c490bf'
                            },  
                        },
                        axisLabel:
                        { // Y轴的0 5 10...颜色
                            textStyle:
                            {
                                color:'#666',
                            }
                        },
                        data: ['192.168.66.102', '192.168.66.103', '192.168.66.104', '192.168.66.105', '192.168.66.102'],
                        position:'right',
                        name:'Ip地址',
                        nameLocation:'end',

                        nameTextStyle:
                        {
                            color:'#30ad3a',
                            fontWeight:'normal',

                            padding:[0,0,0,200],

                        },
                        // position:'right',


                    },
                ],

                series:
                [{  
                        name: '',  
                        type: 'bar',  
                        itemStyle:
                        {  
                            normal:
                            {  
                                color: function(params)
                                {  
                                        console.log("adfadf" + params);  
                                        // build a color map as your need.  
                                        var colorList =
                                        [  
                                            '#30ad3a','#30ad3a','#30ad3a','#30ad3a','#30ad3a'   // 6条颜色
                                        ];  
                                        return colorList[params.dataIndex]   
                                }  
                            }  
                        },  
                        data: [numb1,numb2,numb3,numb4,numb5],
                        barWidth:'10px',  

                },]
            };  
            // 使用刚指定的配置项和数据显示图表。  
            myChartqj2.setOption(optionqj2);
    };
    indexmain2('main',40,38,37,36,38);