@alicloud/console-funnel-chart
v0.4.10-alpha.0
Published
--- name: console-funnel-chart zhName: 漏斗图 ---
Downloads
44
Keywords
Readme
name: console-funnel-chart zhName: 漏斗图
漏斗图API
引用方式
import { ConsoleFunnelChart } from '@alicloud/console-chart';示例 Demo
基本使用
MDXInstruction:importDemo:Basic
居左
MDXInstruction:importDemo:Left
横向居中
MDXInstruction:importDemo:Horizontal
金字塔
金字塔图和漏斗图的主要区别在于图形顶部是否有“尖角”
MDXInstruction:importDemo:Pyramid
横向金字塔
MDXInstruction:importDemo:PyramidHor
配置 Config
数据列配置
| 属性 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 数据列名称 | String | - | - |
| data | 数据 | - | - | - |
| color | 自定义当前数据列颜色 | String | 主题color_24 | - |
通用配置
| 属性 | 说明 | | --- | --- | | padding | 配置绘图内边距 | | ~~xAxis~~ | ~~配置x轴~~ | | ~~yAxis~~ | ~~配置y轴~~ | | ~~legend~~ | ~~配置图例~~ | | guide | 配置辅助元素 | | tooltip | 配置提示信息 | | label | 配置图形文本 | | size | 配置自定义大小 | | style | 配置自定义样式 |
专属配置
direction: String
控制漏斗的方向， 可选值： vertical 、 horizontal
align: String
漏斗图的对齐方式。当 direction = vertical 时，可选对齐方式为： left 、 center 、 right 当 direction = horizontal 时，可选对齐方式为： top 、 center 、 bottom
pyramid: Boolean
是否显示金字塔尖角。