echarts双向条形图之双x双y条形图改造篇

先上效果图：

代码如下：

var data = [163, 666, 1467];

var max = Math.max.apply(null, data);

max = (Number(max.toString()[0]) + 1) * Math.pow(10, max.toString().length - 1)

option = {

    legend: {

          data: ['完成率', '走访数'],

          left: 'right'

    },

    tooltip: {

        trigger: 'axis',

        axisPointer: { // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

        }

    },

    grid: [{

        top: 50,

        bottom: 50,

        left: '45%',

        width: '35%'

    }, {

        top: 50,

        bottom: 50,

        width: '35%'

    }],

    xAxis: [{

            position: 'top',

            type: 'value',

            min: 0,

            max: max,

            splitNumber: 2

            //max :600

        },

        {

            gridIndex: 1,

            position: 'top',

            type: 'value',

            inverse: true,

            min: 0,

            max: 100,

            splitNumber: 2

        }

    ],

    yAxis: [{

            type: 'category',

            position: 'right',

            axisTick: {

                show: true,

            },

        },

        {

            gridIndex: 1,

            type: 'category',

            axisTick: {

                show: true,

            },

            axisLabel: {

                show: true, //开启显示

                interval: 0,

                formatter:function(value){ 

                    var str = "";

                    var num = 4; //每行显示字数

                    var valLength = value.length; //该项x轴字数 

                    var rowNum = Math.ceil(valLength / num); // 行数 

                    if(rowNum > 1) {

                        for(var i = 0; i < rowNum; i++) {

                            var temp = "";

                            var start = i * num;

                            var end = start + num;

                            temp = value.substring(start, end) + "\n";

                            str += temp;

                        }

                        return str;

                    } else {

                        return value;

                    }

                }

            },

            data: ['苏州银行史蒂夫史蒂夫史蒂夫', '去玩儿额', '人头涌涌'],

        }

    ],

    series: [{

            name: '走访数',

            type: 'bar',

            label: {

                normal: {

                    show: true,

                    position: 'inside'

                }

            },

            data: data

        },

        {

            name: '完成率',

            type: 'bar',

            xAxisIndex: 1,

            yAxisIndex: 1,

            // stack: '总量',

            label: {

                normal: {

                    show: true

                }

            },

            data: [12, 45, 20]

        }

    ]

};