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

条形图 horizontal-bar ​

柱状图的横向变体:柱子横过来,类目轴在纵向。类目名很长(渠道名、组织名、接口名)或类目多时,比竖柱易读得多。

何时使用 ​

  • 类目标签长、竖排会互相挤压;
  • 类目多(10-30 个)需要纵向滚动浏览;
  • 关注数值排序时,先按数值排序再传入效果最好。

示例 ​

数据模型与柱状图完全一致,type 换成 horizontal-bar,类目自下而上排——第一个 label 在最下方。

年度报销排行 ​

行政与财务的年度对账图:谁报销最多一目了然,长部门名横向摆放不挤压——排序传入后就是一张现成的「花钱排行榜」。

持仓收益排行 ​

基金持仓的体检图:每只基金今年赚了多少、亏了多少,按收益排序横向铺开——正负着色一眼分清哪些该拿哪些该换。

配置要点 ​

  • 建议传入前按数值排序,读图成本最低;排行榜想要最大值在最上面,按升序传入即可(类目自下而上排);
  • 多系列分组、堆叠语义与竖向柱状图一致(数据多组自动分组);
  • 长列表配合 dataZoom 做窗口浏览,见交互与联动。

相关 ​