项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

折线图 line ​

看指标随时间(或有序类目)的走势,多系列叠在一张图上做趋势对比——最常用的图表类型。

何时使用 ​

  • 关注趋势走向而非单点数值;
  • 需要多组指标在同一时间轴上对比(新增 vs 留存等);
  • 时间点连续且有序;数据点稀疏(< 10 个)且强调单独数值时柱状图更合适。

示例 ​

labels 是 x 轴类目(通常是时间),series 每项一条线;多系列自动出现图例,点击图例可显隐对应系列,悬浮出现 tooltip。

趋势类数据想要柔和的观感时,给系列加 smooth: true:单调三次插值平滑,曲线仍过每个数据点且不过冲。

叙述注解 ​

注解是数据的旁白:交代峰谷原因、圈出关注区间、给出结论数字——读图的人不用悬浮就能拿到叙事。单图注解控制在三处以内,旁白才有重点。

  • region 圈出关注区间,callout 旁注配虚线引线指向数据点,delta 给涨跌结论(涨跌色与 K 线同一套约定);
  • 聚焦某一个系列、弱化其余,用 emphasis;字段速查见 API 参考。

分幕编排 ​

同一张图按幕揭示,先看走势、再给旁白、最后聚焦结论——适合汇报与长文里的逐步叙事。每幕是一个 options 补丁,nextScene() / prevScene() 手动推进,autoplay: true 按幕定时自动播。

第 1 / 3 幕

配置要点 ​

  • 系列颜色可逐项指定:series 项传 color;
  • 需要强调量的填充改用面积图;
  • 对比两组图时固定量纲:yAxis: { min, max };
  • 数据点密集时开 dataZoom 缩放,见交互与联动;
  • 折线默认只画线条不画数据点(云监控式纯线条);点位稀疏、需要强调单点读数时给系列加 showSymbol: true;
  • 线宽由 lineWidth 控制(默认 1.5),监控类小图可压到 1.25;
  • 数值统一格式化:valueFormat: { decimals, thousandSeparator }。

相关 ​