折线图 line
看指标随时间(或有序类目)的走势,多系列叠在一张图上做趋势对比——最常用的图表类型。
何时使用
- 关注趋势走向而非单点数值;
- 需要多组指标在同一时间轴上对比(新增 vs 留存等);
- 时间点连续且有序;数据点稀疏(< 10 个)且强调单独数值时柱状图更合适。
示例
labels 是 x 轴类目(通常是时间),series 每项一条线;多系列自动出现图例,点击图例可显隐对应系列,悬浮出现 tooltip。
趋势类数据想要柔和的观感时,给系列加 smooth: true:单调三次插值平滑,曲线仍过每个数据点且不过冲。
配置要点
- 系列颜色可逐项指定:
series项传color; - 需要强调量的填充改用面积图;
- 对比两组图时固定量纲:
yAxis: { min, max }; - 数据点密集时开
dataZoom缩放,见交互与联动; - 折线默认只画线条不画数据点(云监控式纯线条);点位稀疏、需要强调单点读数时给系列加
showSymbol: true; - 线宽由
lineWidth控制(默认 1.5),监控类小图可压到 1.25; - 数值统一格式化:
valueFormat: { decimals, thousandSeparator }。