多Y轴刻度对齐新方案 -- EChart 5.3.1新增属性

6,490 阅读2分钟

需求:图表中存在两个Y轴、需要splitLine属性,坐标刻度间隔拉齐。

01 直觉:

使用 yAxis. splitNumber 让组件自动适配。

理想是美好的,看看官方解释:「需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。」

翻译一下:

  1. 局限一: type:category无效
  2. 局限二:没有稳定表现,有对不齐风险

那么思路很容易就转到 -- 手动计算interval,保证splitNumber的稳定效果。

02 思路1:

使用min | max | splitNumber|interval

既然涉及到手动计算,那肯定要观察样本数据的范围:

  1. 确定min
  2. 根据splitNumber和数据源最大值预估interval
  3. max = min + interval*splitNumber

*此思路同样适用于「数据源集中在某个范围内变化,需要放大变化趋势」场景。这种情况下,坐标轴标签与实际数据存在一个映射关系,同样通过上面四个属性以及配合坐标轴标签来实现这个映射。

局限:
  • 此方法属于手动接管坐标轴标签显示,需要考虑到所有数据源的可能波动范围,选一个合适的splitNumber
  • 固定的splitNumber可能促使某些数据源算出''有零有整''的坐标轴标签

03 思路2:

‼️ yAxis. alignTicks(注意要将ECharts版本升级到 5.3.1 以上),一句话能解决的事情,它不香吗?

笔者无意间发现新版本超实用配置项,激动到立马更新了项目中所有表格,真的很好用!

编辑文章时,除了官网,还未有文章提到思路2,遂有了这篇,希望广大ECharts工程师都能轻装上阵,享受一个成熟的插件带来的好处。

局限:
  • 只对'value''log'类型的轴有效
demo示意
 yAxis: [
         {
           type: "value",
           name: "(大卡)",
           nameLocation: "end",
           nameGap: 0,
           nameTextStyle: {
             color: "#999999",
             fontSize: 10,
             lineHeight: 14,
             padding: [0, 30, 15, 0],
           }, // 设置坐标轴名称
           show: true,
           axisLabel: {
             color: "#999999",
             fontSize: 10,
             lineHeight: 14,
           },
           splitLine: {
             show: true,
             lineStyle: {
               type: "dashed",
               color: "rgba(0, 0, 0, 0.15)",
               width: 1,
             },
           },
         },
         {
           type: "value",
           alignTicks: true, // !!配置多坐标轴标签对齐
           axisLabel: {
             show: true,
             color: "#999999",
             fontSize: 10,
             lineHeight: 14,
           },
           splitLine: { show: false },
         },
       ],

1.png

2.png