ThorUI文档

# tui-charts-pie 饼状图表

介绍

饼状图表，css版本

# 引入

# uni-app引入

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

import tuiChartsPie from "@/components/thorui/tui-charts-pie/tui-charts-pie.vue"
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调用方法绘制图表
onReady() {
	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调用方法绘制图表
onReady() {
	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示例小程序码

← tui-charts-area 面积图表 →