# tui-charts-funnel 漏斗图表

介绍

漏斗图表,css版本

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiChartsFunnel from "@/components/thorui/tui-charts-funnel/tui-charts-funnel"
export default {
	components:{
		tuiChartsFunnel
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-charts-funnel": "/components/thorui/tui-charts-funnel/tui-charts-funnel"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用
<!--uni-app-->
<view class="tui-charts--box">
	<tui-charts-funnel ref="funnel"></tui-charts-funnel>
</view>

<!--微信小程序-->	
<view class="tui-charts--box">
	<tui-charts-funnel id="funnel"></tui-charts-funnel>
</view>
		
.tui-charts--box{
	width: 100%;
	display: flex;
	justify-content: center;
}
//data数据
dataset: [{
		value: 60,
		name: 'Visit',
		color: '#EE6666'
	},
	{
		value: 40,
		name: 'Inquiry',
		color: '#91CC75'
	},
	{
		value: 20,
		name: 'Order',
		color: '#FAC858'
	},
	{
		value: 80,
		name: 'Click',
		color: '#73C0DE'
	},
	{
		value: 100,
		name: 'Show',
		color: '#5470C6'
	}
]

//uni-app调用方法绘制图表
onReady() {
	this.$refs.funnel && this.$refs.funnel.draw(this.dataset)
}

//微信小程序调用方法绘制图表
onReady: function () {
  let funnel=this.selectComponent('#funnel')
  funnel && funnel.draw(this.data.dataset)
}

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
title String 统计名称 -
width Number, String 图表宽度,单位rpx 400
height Number, String 图表高度,单位rpx 480
gap Number, String 图表项之间间距,单位rpx 4
legend Object 图例,说明 {show: true,size: 24,color: '#333',direction:'horizontal'}
tooltip Boolean 点击时是否显示提示信息 true
sort String 展示排序,可选值:asc(升序),desc(降序) desc
//legend 图例参数说明
{
	//是否显示
	show: true,
	//字体大小,单位rpx
	size: 24,
	//字体颜色
	color: '#333',
	//排列方式,可选值horizontal(横向)、vertical(纵向)
	direction: 'horizontal'
}

# Events

事件名 说明 回调参数
click 点击图表项时触发 返回该项对应的数据对象与索引值

# Methods

事件名 说明 传入参数
draw 绘制图表 dataset
/*
 dataset:漏斗图表数据
 
 [{
	//数值
 	value: 100,
	//显示名称
 	name: 'Show',
	//颜色
 	color: '#5470C6'
 }]
*/

//uni-app调用方法绘制图表
onReady() {
	this.$refs.funnel && this.$refs.funnel.draw(this.dataset)
}

//微信小程序调用方法绘制图表
onReady: function () {
   let funnel=this.selectComponent('#funnel')
   funnel && funnel.draw(this.data.dataset)
}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码