# 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示例小程序码 |