Skip to content

Funnel 漏斗图

漏斗图示例,使用 <g-funnel> 组件。

基础用法

直接使用 <g-funnel> 标签,并传入图表数据即可。

转化漏斗

通过设置chartType值为transfer,可以实现转化漏斗图,在transOptions中配置数据,可以显示转化率等信息。

dataUrl 接口数据

直接使用 <g-funnel> 标签,并传入图表数据即可。

API

名称说明类型默认值
description空数据描述string暂无数据
options全部属性(参考 Echarts Funnel 配置项object
db-options自定义属性object
chartType漏斗图类型,可选值为normaltransfernormal为普通漏斗图, transfer为转化漏斗图stringnormal
transOptions转化率等信息的配置array

db-options API

名称说明类型默认值
dataField数据指向字段string
axisField指标指向字段string / function
columnstitle 名称,field 指向字段,unit 单位array
data图表数据配置object/array/string

transOptions API

名称说明类型默认值
title名称string
value数值string / number
startIndex线开始的位置number
endIndex线结束的位置number
position线相对于漏斗图的位置,可选值为leftrightstring

data API

data 可以接受dataUrl(object & string)或者DataSource(object & array),对象中可以配置以下属性:

名称说明类型默认值
pathip地址,开发环境配置代理地址,接口地址string
method方法stringget
paramsparamsdata 参数object
resPath接口响应数据 格式如 : 'data/obj/list'string'data'
ContentTypecontent-typestringapplication/json;charset=UTF-8
headers请求头object-
transformResponse格式化数据function-

data 可以接受静态数据

事件

名称说明类型默认值
chart-clickchart图形点击事件function