条形图 horizontal-bar
柱状图的横向变体:柱子横过来,类目轴在纵向。类目名很长(渠道名、组织名、接口名)或类目多时,比竖柱易读得多。
何时使用
- 类目标签长、竖排会互相挤压;
- 类目多(10-30 个)需要纵向滚动浏览;
- 关注数值排序时,先按数值排序再传入效果最好。
示例
数据模型与柱状图完全一致,type 换成 horizontal-bar,类目自下而上排——第一个 label 在最下方。
年度报销排行
行政与财务的年度对账图:谁报销最多一目了然,长部门名横向摆放不挤压——排序传入后就是一张现成的「花钱排行榜」。
持仓收益排行
基金持仓的体检图:每只基金今年赚了多少、亏了多少,按收益排序横向铺开——正负着色一眼分清哪些该拿哪些该换。
配置要点
- 建议传入前按数值排序,读图成本最低;排行榜想要最大值在最上面,按升序传入即可(类目自下而上排);
- 多系列分组、堆叠语义与竖向柱状图一致(数据多组自动分组);
- 长列表配合
dataZoom做窗口浏览,见交互与联动。