先上效果圖：

雙向條形圖

代碼如下：

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: ['完成率', '走訪(fǎng)數(shù)'],

? ? ? ? ? left: 'right'

? ? },

? ? tooltip: {

? ? ? ? trigger: 'axis',

? ? ? ? axisPointer: { // 坐標(biāo)軸指示器来氧，坐標(biāo)軸觸發(fā)有效

? ? ? ? ? ? type: 'shadow' // 默認(rèn)為直線(xiàn)，可選為：'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, //開(kāi)啟顯示

? ? ? ? ? ? ? ? interval: 0,

? ? ? ? ? ? ? ? formatter:function(value){?

? ? ? ? ? ? ? ? ? ? var str = "";

? ? ? ? ? ? ? ? ? ? var num = 4; //每行顯示字?jǐn)?shù)

? ? ? ? ? ? ? ? ? ? var valLength = value.length; //該項(xiàng)x軸字?jǐn)?shù)?

? ? ? ? ? ? ? ? ? ? var rowNum = Math.ceil(valLength / num); // 行數(shù)?

? ? ? ? ? ? ? ? ? ? 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: '走訪(fǎng)數(shù)',

? ? ? ? ? ? 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]

? ? ? ? }

? ? ]

};