tui-charts-funnel 漏斗图表 会员组件

介绍

漏斗图表，css版本

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiChartsFunnel from "@/components/thorui/tui-charts-funnel/tui-charts-funnel.vue"
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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		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'
 			}
 		]
 	}
 },
 onReady() {
 	this.$refs.funnel && this.$refs.funnel.draw(this.dataset)
 },
 methods: {
 	
 }
}

.tui-charts--box{
	width: 100%;
	display: flex;
	justify-content: center;
}

<!--微信小程序-->	
<view class="tui-charts--box">
 <tui-charts-funnel id="funnel"></tui-charts-funnel>
</view>

// data 数据 及 方法
Page({
  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'
    	}
    ]
  },
  onReady: function () {
    let funnel=this.selectComponent('#funnel')
    funnel && funnel.draw(this.data.dataset)
  }
})

.tui-charts--box{
	width: 100%;
	display: flex;
	justify-content: center;
}

// Make sure to add code blocks to your code group

TIP

• 需等组件初始化完成后才能调用方法进行绘制
• 数据变化时需重新调用 draw 方法进行绘制才能生效

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

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
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示例小程序码