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]
}
]
};
上一篇
下一篇
