Feat/axis break

[kkxxkk2019]

背景

图表中的轴截断（Axis truncation）是指在图表的坐标轴上，部分数据范围被省略或不显示，以便更好地突出显示特定的数据区间。这种技术通常用于处理数据中存在极端值（离群值）或数据分布不均匀的情况，从而使得图表更易于理解和分析。
如下图所示，当图表中存在数值相差较大的场景时，我们通常会通过轴截断/轴中断（scale 分段）手段来缩小特别大的部分，增强较小部分的可读性。

轴截断前	轴截断后

前提

目前只对 CartesianLinear 坐标轴生效。

实现思路

轴截断的核心思路是对数据对应的 scale 进行分段映射的配置(scale 本身具备这个能力)，比如:

const data = [441, 443, 580, 665, 711, 984, 1114, 1122, 1322, 1809, 1882, 23725 ]; // 原始数据
const breakpoints = [2100, 22900]; // 截断范围

// step 1：根据端点范围对数据进行分段处理，得到分段后的数据范围以及分布的范围（归一化）
const { domain, scope } = breakData(data, breakpoints);

// domain: [  [441, 2100], [2100, 22900], [22900, 23725]  ]
// scope: [  [0, 0.92], [0.92, 0.92], [0.92, 1]  ]


// �step2: 得到分段后的值域和归一化的范围之后，将其设置到 scale 中
// 原先的 scale：
scale.domain([0, 23725]).range([330, 0])
// 分段后的 scale: 
scale.domain([0, 2100, 22900, 25000]).range([336, 26.879999999999995, 26.879999999999995, 0])

涉及到的修改点：

1. scale domain 和 range 的赋值&取值逻辑修改（只在用户设置了 breaks 的场景），以及这两个属性的取值，之前都默认他们的长度都为 2，所以原先去 domain[1] 的地方修改为 last(domain)
2. tick-data/continuous.ts 中 ticks 生成以及抽样逻辑修改：由于截断后ticks 的分布是不均匀的，所以生成 ticks 的逻辑这里，默认给每一段的范围都赋予原先的 count 个数，没有根据分段比例进行分配，有可能造成 count 变多的情况。另外由于 tick interval 不是均分的，抽样这里不能采用 parity，使用了目前的 greedy

关于系列上的截断图形

考虑到系列上的截断图形样式没有通用化的方案，不同的业务可能需求不同，另外不是所有的系列都适用，所以就没有作为默认的功能在 vchart 中实现，图表助手中是通过自定义组件实现的，所以 VCHart 这里考虑直接在 demo 中提供方案。

🤔 This is a ...

• New feature
• Bug fix
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Refactoring
• Update dependency
• Code style optimization
• Test Case
• Branch merge
• Release
• Site / documentation update
• Demo update
• Workflow
• Other (about what?)

🔗 Related issue link

Close #2102

🔗 Related PR link

@visactor/vrender-component: VisActor/VRender#1394

Axis component support render breaks, as follows:

🐞 Bugserver case id

66d683dc71a15300f7f1fb51
66d6845871a15300f7f1fb52
66d6849671a15300f7f1fb59
66d685f471a15300f7f1fb5a
66d6864771a15300f7f1fb5c

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

🚀 Summary

copilot:summary

🔍 Walkthrough

copilot:walkthrough