echarts4升级echarts5升级记录

本文介绍了图表库升级后的一些变化,包括默认样式的改进、动效体验的提升,以及一些因版本更新而需要调整的设置方法。例如y轴label纵向位置调整、自定义y轴最大最小值、饼图label位置及引导线的调整等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

升级后优点,默认样式更好看,动效体验更好。
缺点,容错率降低,需要处理新版不支持的代码

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,
   };
 },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜雨风亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值