bar图中可以看出有新增和全部用户2种数据,但是新增用户占比例太小看不出来效果,如果我想把新增用户显示出来,问问各位大神有没有办法在y轴中间设置一段过度带,让y轴过渡带下方数据刻度间距的值较小,过渡带y轴刻度间距的值较大,这样新增数据也能显示出来
配置项如下
app.title = '坐标轴刻度与标签对齐';
var data1=[
592,
91,
63,
160,
96,
60,
71,
171,
85,
45
]
var data2 = [
168510,
74147,
56809,
56405,
53744,
50312,
31705,
18043,
15691,
15265
]
function chanArray(data1,data2){
var maxData1 = Math.max.apply(null, data1)
var maxData2 = Math.max.apply(null, data2)
var multiple = Math.floor(maxData2/maxData1)/2
var data = [];
for(var i in data1){
data.push(-data1[i]*multiple);
}
return [data,multiple];
}
option = {
backgroundColor: '#404a59',
"color": [
"#00ccff",
"#0000cc",
"#0033ff",
"#000099",
"#ffffff",
"#3366ff",
"#00cccc",
"#66ffff"
],
"title": {
"text": "地市用户量",
"show": false
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
formatter:function(obj){
var str = "";
str += obj[0].name+"<br>";
str += "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+obj[1].color+"'></span>"+obj[1].seriesName+":"+obj[1].value+"<br>"
str += "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+obj[0].color+"'></span>"+obj[0].seriesName+":"+Math.abs(obj[0].value/(chanArray(data1,data2)[1]))+"<br>"
return str;
}
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "15%",
"top": "10%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": [
"成都市",
"乐山市",
"德阳市",
"广元市",
"绵阳市",
"自贡市",
"遂宁市",
"泸州市",
"攀枝花市",
"内江市"
],
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"axisLabel": {
"interval": 0
},
"axisTick": {
"alignWithLabel": true
}
}
],
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#ffffff"
}
},
"splitLine": {
"lineStyle": {
"color": "#000099"
}
},
axisLabel:{
formatter:function(value, index){
if(value<0){
var al = Math.floor(Math.abs(value/(chanArray(data1,data2)[1]))).toString()
var al1 = al.charAt(0);
for(var i = 0 ;i< al.length-1;i++){
al1 += 0
}
return al1
}
else{
return value
}
}
}
}
],
"series": [
{
"name": "新增",
"data": chanArray(data1,data2)[0],
"stack": "total",
"type": "bar"
},
{
"name": "全部",
"data": data2,
"stack": "total",
"type": "bar"
}
],
"legend": {
"data": [
"新增",
"全部"
],
"textStyle": {
"color": [
"#ffffff"
]
},
"top": "bottom",
"left": "right"
}
};