饼图

介绍

饼图是一种常见的数据可视化图表，主要用于展示各类别占总量的比例关系。通过每个扇形的大小，可以直观地看出各类别在总量中的占比。饼图适用于对比少量类别的占比数据，例如市场份额、人口结构等。

API

Props

参数	说明	类型	默认值
默认状态	支持变量绑定	默认 / 隐藏	默认
南丁格尔图	是否开启南丁格尔图样式	Boolean	false
模式	南丁格尔图模式	半径 / 区域	区域
内径	饼图内径	string	0%
外径	饼图外径	string	75%
数据源	支持变量绑定	DataSource	-
维度	类目的数据字段编码	string	indicator
数值	数值系列的数据字段编码	string	value
宽	图表画布宽度	string	500px
高	图表画布高度	string	300px
圆心左边距	圆心距离画布左侧边距	string	50%
圆心上边距	圆心距离画布上侧边距	string	50%
配置项参数		code
标题	图表标题配置	标题	-
饼图	饼图配置	饼图	-
图例	图表图例配置	图例	-
提示框	图表提示框配置	提示框	-
唯一标识	组件唯一标识	string	组件 key 值

Props 标题

参数	说明	类型	默认值
显示标题	图表标题是否显示	boolean	false
主标题	图表主标题	string	主标题
副标题	图表副标题	string	副标题
自定义参数（title）		code

Props 饼图

参数	说明	类型	默认值
顺时针排布	饼图数据项排布方向	boolean	true
起始角度	排布起始角度	string	90
百分比数值精度	数值精度	string	2
显示标签	图表是否显示标签	boolean	false
字号	标签字号	string	12
颜色	标签文字颜色	string	-
自定义参数（pie）		code

Props 图例

参数	说明	类型	默认值
显示图例	图表图例是否显示	boolean	true
图例位置	图例显示位置	自动 / 顶部居左 / 顶部居中 / 顶部居右 / 底部居左 / 底部居中 / 底部居右 / 左侧顶部 / 左侧居中 / 左侧底部 / 右侧顶部 / 右侧居中 / 右侧底部	自动
布局方向	图例排列方向	水平 / 竖直	水平
宽	图例区域宽度	string	auto
高	图例区域高度	string	auto
支持滚动	图例超出宽高后是否支持滚动	boolean	false
自定义参数（legend）		code

Props 提示框

参数	说明	类型	默认值
显示提示框	图表提示框是否显示	boolean	true
触发类型	提示框触发类型	数据项/坐标轴	数据项
背景颜色	提示框背景颜色	string	rgba(50,50,50,0.7)
边框颜色	提示框边框颜色	string	#333333
文字颜色	提示框文字颜色	string	#FFFFFF
字号	提示框文字字号	string	14
自定义参数（tooltip）		code

Type

DataSource

[
  {
    indicator: "维度A",
    value: "500",
  },
  {
    indicator: "维度B",
    value: "900",
  },
  {
    indicator: "维度C",
    value: "1200",
  },
  {
    indicator: "维度D",
    value: "2000",
  },
  {
    indicator: "维度E",
    value: "1800",
  },
  {
    indicator: "维度F",
    value: "200",
  },
];