--- name: console-funnel-chart zhName: 漏斗图 ---
npm install @alicloud/console-funnel-chart---
name: console-funnel-chart
zhName: 漏斗图
---
javascript
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 | 配置自定义样式 |
专属配置
$3
控制漏斗的方向, 可选值: vertical 、 horizontal $3
漏斗图的对齐方式。
当 direction = vertical 时,可选对齐方式为: left 、 center 、 right
当 direction = horizontal 时,可选对齐方式为: top 、 center 、 bottom`