具体图形就是条形图,柱状图,折线图等图形了,想要实现类似下面图片一样的效果。目前也只是实现一部分效果,还没有达到自己想要的要求。工作中遇到的问题,涉及的东西比较多,不能贴出全部内容,具体的需要细聊,欢迎交流。
1.调节多轴间距(实现不等轴间距)
因为每个轴与轴之间的距离是固定的,对于长短不同的刻度名看起来不美观。因此尝试过刻度名最大长度适应,即轴上最长的刻度名有多长,轴间距就多长,要避免覆盖到另一条轴上,但是开发过程中表达式未解决全部情况,只适用一部分。最终暂时这么改了,限定刻度名长度为3,超过显示...;
y轴axisLabel:
formatter:function(value){
if(value.length > 3){
value = value.substring(0,3) + '...';
}
return value;
}
2.分组:
边框——axisLine,axisTick中length
数据——如果没有数据赋值,否则找已经插入的数据,如果没有找到直接插入,找到就进行比较。判断当前轴是否是最后一个维度,然后进行比较,最后一个元素和下一个插入的相等,则加前缀,否则直接加入。因为有前缀,下次比较会受干扰,正则判断是否含有前缀并截取。
var dimension_length = all_dimensionality.length <= 0 ? 1 : all_dimensionality.length;
for(var k = 0;k < dimension_length;k++){
if(!dimensionality_show_data[k]){
dimensionality_show_data[k] = [aData[all_dimensionality[k]]];
}else{
var index = dimensionality_show_data[k].indexOf(aData[all_dimensionality[k]]);
if(index == -1){
dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
}else if(index != -1){
if(all_dimensionality[dimensionality_show_data.length - 1] != all_dimensionality[k]){
var lastVal = dimensionality_show_data[k][dimensionality_show_data[k].length-1];
if(/YZYPD/.test(lastVal)){
lastVal = lastVal.split("YZYPD")[1];
}
if(lastVal == aData[all_dimensionality[k]]){
dimensionality_show_data[k].push("YZYPD"+ aData[all_dimensionality[k]]);
}else{
dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
}
}else{
dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
}
}
}
}
3.interval---通过回调函数实现间隔显示以及过滤数据
var len = opp.xAxis[j].data.length;
var len = opp.xAxis[j].data.length;
opp.xAxis[j].axisTick.interval = function(index,value){
if(index % 2 == 0 && len > 10) {
return !/^YZYPD/.test(value)
}else if(len < 10){
return value;
}else{
return '';
}
};
opp.xAxis[j].axisLabel.interval = function(index,value){
if(index % 2 == 0 && len > 10) {
return !/^YZYPD/.test(value)
}else if(len < 10){
return value;
}else{
return '';
}
};