****TL;DR **G2Plot 是一个注重于细节体验的通用统计图表库。
折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式：是上升还是下降，是否存在周期性的循环？因此，相对于独立的数据点，折线图关注的是全局趋势。
在折线图中，一般水平轴（X 轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y 轴）代表不同时刻的数据的大小。
折线图适合的数据类型为一个连续字段（时间）和一个离散字段（数值）。在下面这个例子中，time为连续数据字段，value为离散数据字段。
在业务上，通常使用折线图来展现一个指标在时间上的趋势情况。譬如：
上图展示的是某电商平台上，最近 30 天的订单数量趋势。
G2Plot 对于折线图的细节体验打磨，以下面的几个例子加以说明和对比：
数据标签是对数据点的具体数据的描述，信息价值很高。在多条数据接近的时候，容易数据标签的互相遮挡，形成无效信息，且不美观。
| echarts |  |
❌直接遮挡显示 |
|---|---|---|
| highcharts |  |
❌部分情况出现遮挡 |
| G2Plot |  |
✅自动躲避、隐藏 |
 |
✅超过三条折线，优先显示最大、最小数据的标签 |
| echarts |  |
❌轴标题和轴标签遮挡 |
|---|---|---|
| G2Plot |  |
✅不会出现信息遮挡 |
通过改造组件布局，永久解决轴标题和轴 tick 的重叠问题。
对于数据较多的情况，我们会使用缩略轴组件，即可以看到局部数据，也可以看到全局的趋势。
| echarts |  |
❌缩略轴标签被裁剪，无法看清数据范围 |
|---|---|---|
| G2Plot |  |
✅不会出现信息遮挡 ✅缩略轴移动到边缘，自动将标签显示到内部 |
在拆分数据较多的情况下，会出现图例项非常多的情况。
| echarts |  |
❌图例和图形遮挡，信息混杂无效 |
|---|---|---|
| G2Plot |  |
✅限制图例的最大画布区域，防止极限情况下，信息遮挡 |
 |
✅增加图例分页，让图例占用少量空间，让用户精力聚焦在图形和数据上 |
在 x 轴标签过多的情况下，会出现标签遮挡，不仅不美观，也会导致信息无效。（点击看大图）
| 原始 | autoHideLabel: true | autoRotateLabel: true |
|---|---|---|
 |
 |
 |
折线图主要用于做指标趋势，所以其 X 轴绝大多是情况都是时间类型。G2Plot 对 X 轴是时间情况下，做一个轴标签显示的优化，既可以降低冗余信息的展示，又可以节约画布空间。
敬请期待：通过事件轴标签的分层，可以让信息展示更加清晰明了。
在多折线情况下，使用跟随图例的形式，去标识出折线所属于的维值信息，直观有效。
使用缩略轴的方式去缩放和显示数据，并且缩略轴的标签文本在边缘处会自动切换到内部显示，防止被遮挡。
✅使用缩略轴组件
✅使用滚动条组件
敬请期待：可以标记出特殊的时间区间，比如周末，节假日等，另外也可以对一些数据点进行数据标签标记说明。
 |
 |
|---|
敬请期待：对一些特殊的重点事件时间进行标记，让用户更加清晰的感知到数据趋势变化的原因。
 |
 |
|---|
敬请期待：对于实时监控类的数据，通过预警线、预警区间的辅助元素，让超阈值数据明显的标记出来。
将数据的分类，直接标记在 Area 面积中间，并且文字大小直接适配面积大小，让用户更加直观的看到不同区块对应的数据类型。
上述对于折线图的优化点，都沉淀在** G2Plot **中，并且完全开源。G2Plot 是基于 G2 图形语法基础上，形成的一套注重图表细节体验、易用性的上统计图表库，从中提炼的 AntV 设计原则是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读，如色彩、字体的指引。
我们经过大量的项目实践和经验总结，总结了以下四条核心原则，并以重要等级进行排序，四条原则相辅相成且呈递进关系，希望你在设计时也可以采纳：
- 准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。
- 有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息
- 清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息。
- 美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。
最后，非常欢迎参入 issue 讨论或者代码 PR：https://github.com/antvis/G2Plot。