Charts 图表组件

Figma Resource


Light Mode亮色模式/Dark Mode暗黑模式

包含图表:

Line Chart 折线图

  • 基础折线图
  • 平滑折线图
  • 累计折线图
  • 累计平滑折线图
  • 堆叠折线图
  • 堆叠平滑折线图
  • 堆叠平滑累计折线图
  • 折线图带缩略轴
  • 折线图带警示线
  • 折线图带警示背景

Step Line Chart 阶梯图

  • 基础阶梯图
  • 多阶梯图

Area Chart 面积图

  • 基础面积图
  • 堆叠面积图
  • 平滑面积图
  • 堆叠平滑面积图
  • 累计面积图
  • 堆叠累计面积图
  • 累计平滑面积图
  • 堆叠平滑累计面积图
  • 百分比堆叠面积图
  • 基础面积图带负值
  • 区间面积图
  • 面积图带缩略轴

Column Chart 柱形图

  • 基础柱形图
  • 基础柱形图带数值
  • 双柱形图
  • 多柱形图
  • 堆叠柱形图
  • 百分比堆叠柱形图
  • 区间柱形图
  • 基础柱形图带倒角
  • 倒转柱形图
  • 柱形图带缩略轴
  • 柱形图带负值
  • 极坐标下的柱形图
  • 极坐标下的分组柱形图
  • 极坐标下的堆叠柱形图

Histogram 直方图

  • 基础直方图
  • 层叠直方图


Waterfall Chart 瀑布图


Mixed Chart 折柱混合图


Dual Axes 双轴图

  • 双轴折线图
  • 双轴折线图自定义样式
  • 双轴阶梯折线图
  • 双轴折柱图
  • 双轴折柱图多折线
  • 双轴折线区间柱形图
  • 双轴堆叠折柱图
  • 双轴堆叠折柱图多折线
  • 双轴百分比堆叠折柱图
  • 双轴分组折柱图
  • 双轴分组折柱图多折线
  • 双轴堆叠分组折柱图


Bar Chart 条形图

  • 基础条形图
  • 双条形图
  • 多条形图
  • 堆叠条形图
  • 百分比堆叠条形图
  • 自定义条形图
  • 条形图坐标转换
  • 区间条形图
  • 蝶向条形图
  • 蝶向条形图左侧标签

Donut Chart 环形图


Pie Chart 饼图


Rose Chart 玫瑰图


Radial Bar Chart 玉珏图


Liquid Chart 水波图


Radar Chart 雷达图

  • 线条型带背景网格
  • 面型带背景网格
  • 线条型带背景底色
  • 面型带背景底色


Bullet Chart 子弹图


Scatter Chart 散点图

  • 基础散点图
  • 多散点图
  • 多形状散点图

Bubble Chart 气泡图

  • 基础气泡图
  • 多气泡图
  • 基础气泡图带文字
  • 多气泡图带文字

Funnel Chart 漏斗图

  • 基础漏斗图
  • 尖底漏斗图
  • 对比漏斗图
  • 对称漏斗图

Sankey Chart 桑基图

  • 基础桑基图
  • 垂直桑基图
  • 多层级桑基图
  • 垂直多层级桑基图

K Chart K线图


Box Chart 箱型图

  • 基础箱型图
  • 多组箱型图
  • 垂直箱型图


Gauge 仪表盘

  • 基础仪表盘
  • 多色仪表盘
  • 多色仪表盘带圆角


Color Block 色块图

  • 基础色块图
  • 水平日历色块图

Tree Graph 树图

  • 基础生态树
  • 由上至下的生态树
  • 辐射树

Lollipop Chart 棒棒糖图

  • 基础棒棒糖图
  • 横向棒棒糖图



Dumbbell Chart

哑铃图

  • 基础哑铃图
  • 垂直哑铃图

Area Chart Components 面积图组件

Column Chart Components 柱形图组件

Donut Chart Components 环形图组件

Bullet Chart Components 子弹图组件

Index Card Components 指标卡组件