升级后优点,默认样式更好看,动效体验更好。
缺点,容错率降低,需要处理新版不支持的代码
1.y周label的纵向位置调整 负值padding不生效
- 旧:
axisLabel: {
padding:[-13,0,0,0],
}
- 新:
axisLabel: {
padding:[-13,0,0,0],
verticalAlign: 'top',
}
2.自定义y轴最大值max与最小值min
- 旧:min/max写反也能正常使用
- 新:无法正常使用
3.饼图label位置调整到引导线上方
- 旧:padding左右双边设为负值
label: {
normal: {
textStyle: {
lineHeight: 14,
fontSize: 12,
padding: [0, -43]
}
}
},
labelLine: {
show: true,
length: 10,
length2: 45
},
- 新:第二段结束点需自行计算
label: {
normal: {
textStyle: {
lineHeight: 14,
fontSize: 12,
}
}
},
labelLine: {
show: true,
length: 10,
length2: 0
},
labelLayout: (params)=> {
const isLeft = params.labelRect.x < canvas.getWidth() / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
4.饼图引导线指向中间
- 旧:labelLine的length设为负值
labelLine: {
show: true,
length: -35,
length2: -35,
},
- 新:第二段结束点需自行计算
label: {
padding: [0, -35],
},
labelLine: {
show: true,
length: -35,
length2: 0,
},
labelLayout: function (params) {
let center = position[0]//饼图中心x位置
const points = params.labelLinePoints;
//points line的三个点的x,y位置
const isLeft = points[1][0] <= center;
points[2][0] = isLeft ? points[1][0] + 35 : points[1][0] - 35
return {
labelLinePoints: points,
};
},