# tui-charts-pie 饼状图表

介绍

饼状图表,css版本

# 引入

# uni-app引入

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

import tuiChartsPie from "@/components/thorui/tui-charts-pie/tui-charts-pie"
export default {
	components:{
		tuiChartsPie
	}
}

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

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

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

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

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

# 代码演示

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

基础布局
<!--uni-app-->
<tui-charts-pie title="访问来源" ref="tui_pie_1" @click="onClick"></tui-charts-pie>

<!--微信小程序-->	
<tui-charts-pie title="访问来源" id="tui_pie_1" bindclick="onClick"></tui-charts-pie>	
		
dataset: [{
	value: 1048,
	color: '#03ABBE',
	name: '搜索引擎'
},
{
	value: 735,
	color: '#C0CB33',
	name: '直接访问'
},
{
	value: 580,
	color: '#FFD54F',
	name: '邮件营销'
},
{
	value: 484,
	color: '#FF7145',
	name: '联盟广告'
}]

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

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

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
title String 统计名称 -
diam Number 饼状图直径,单位rpx 400
backgroundColor String 饼状图背景色 transparent
legend Object 图例,说明 {show: true,size: 24,color: '#333',direction: 'horizontal'}
tooltip Boolean 提示信息 true
type Number 展示类型:1-饼状 2-环状 1
annular Object 环形中间圆圈样式 {width: 200,backgroundColor: '#f8f8f8'}

# Events

事件名 说明 回调参数
click 点击对应的扇形区域时触发 返回该扇形区对应的数据对象

# Methods

事件名 说明 传入参数
draw 绘制图表 dataset
/*
 dataset:饼状图表数据
*/

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

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

# 预览

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

# 线上程序扫码预览

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