@alicloud/console-pie-chart v0.4.10-alpha.0

name: console-pie-chart

zhName: 饼图

饼图API

引入方式

import { ConsolePieChart } from '@alicloud/console-chart';

示例 Demo

基本使用

MDXInstruction:importDemo:Basic

带label指标

MDXInstruction:importDemo:Label

自定义tooltip

MDXInstruction:importDemo:Tooltip

复杂Tooltip

MDXInstruction:importDemo:ComplexTooltip

配置legend

MDXInstruction:importDemo:Legend

legend在右边

通过设置Chart的右Padding和Legend的offsetY属性来控制legend的位置。

Note: 右Padding是指圆形的右边界到渲染区域的右边界。offsetY是指圆形的右边界到legend的左边界。

MDXInstruction:importDemo:LegendRight

legend tip

配置legend的tip属性可开启legend悬浮提示。开启tip配置之后，可进一步配置tipFormatter属性来进行格式化tip显示内容（取值优先级：tipFormatter => itemFormatter => value）

Note: legend的tip属性是通过dom的title属性来进行简单实现的，只能满足简单场景。

MDXInstruction:importDemo:LegendTip

单色

MDXInstruction:importDemo:SingleColors

指定颜色

MDXInstruction:importDemo:MultiColors

基础环状图

MDXInstruction:importDemo:Circle

环间距

MDXInstruction:importDemo:CircleSlice

环状带Guide

MDXInstruction:importDemo:CircleGuide

选中状态

MDXInstruction:importDemo:Select

根据选中状态更新环内Guide

MDXInstruction:importDemo:SelectCircleGuide

配置 Config

数据列配置

通用配置

专属配置

autoSort: Boolean

是否需要按照从大到小的顺序排序

cycle: Boolean

是否将饼状图转变为环状图

innerRadius: Number

内圈半径，需要配合cycle使用

sliceGap: Number

需要配合cycle使用，环图情况下，可以使用该参数来调整每个环之间的间距，数值范围0-1

select: Boolean

是否支持选中态

selectData: String

选中的数据

colors: String|Array

自定义颜色