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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		dataset: [{
 			value: 1048,
 			color: '#03ABBE',
 			name: '搜索引擎'
 		},
 		{
 			value: 735,
 			color: '#C0CB33',
 			name: '直接访问'
 		},
 		{
 			value: 580,
 			color: '#FFD54F',
 			name: '邮件营销'
 		},
 		{
 			value: 484,
 			color: '#FF7145',
 			name: '联盟广告'
 		}]
 	}
 },
 onReady() {
 	this.$refs.tui_pie_1.draw(this.dataset)
 },
 methods: {
 	onClick: function (e) {
 	   console.log(e)
 	}
 }
}

<script setup lang="ts">
//uni-app vue3 组合式API 使用方式
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
//引入确保路径正确
// import tuiChartsPie from './tui-charts-pie/tui-charts-pie.vue'
// const tui_pie_1 = ref<InstanceType<typeof tuiChartsPie> | null>(null)
const tui_pie_1:any = ref()

const dataset = [{
		value: 1048,
		color: '#03ABBE',
		name: '搜索引擎'
	},
	{
		value: 735,
		color: '#C0CB33',
		name: '直接访问'
	},
	{
		value: 580,
		color: '#FFD54F',
		name: '邮件营销'
	},
	{
		value: 484,
		color: '#FF7145',
		name: '联盟广告'
	}
];

function onClick(e:any){
	console.log(e)
}

// 注意：初始化调用方法，尽量放置 onReady 内执行，确保tui_pie_1.value 有值
onReady(() => 
    /*
	  如果使用 ts 提示没有draw方法,可使用如下步骤解决：
	   1、将 tui_pie_1 设为any 类型
	   2、获取ref实例结合ts的InstanceType，请看上方注释内容
	*/
	tui_pie_1?.value.draw(dataset)
})
</script>

<!--微信小程序-->	
<tui-charts-pie title="访问来源" id="tui_pie_1" bindclick="onClick"></tui-charts-pie>	

// data 数据 及 方法
Page({
  data: {
    dataset: [{
    	value: 1048,
    	color: '#03ABBE',
    	name: '搜索引擎'
    },
    {
    	value: 735,
    	color: '#C0CB33',
    	name: '直接访问'
    },
    {
    	value: 580,
    	color: '#FFD54F',
    	name: '邮件营销'
    },
    {
    	value: 484,
    	color: '#FF7145',
    	name: '联盟广告'
    }]
  },
  onReady: function () {
    this.selectComponent("#tui_pie_1").draw(this.data.dataset)
  },
  onClick: function (e) {
     console.log(e)
  }
})

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

TIP

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

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

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

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