# tui-charts-radar 雷达图表

介绍

雷达图表,css版本

# 引入

# uni-app引入

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

import tuiChartsRadar from "@/components/thorui/tui-charts-radar/tui-charts-radar"
export default {
	components:{
		tuiChartsRadar
	}
}

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

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

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

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

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

# 代码演示

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

基础使用
<!--uni-app-->
<view class="tui-charts--box">
	<tui-charts-radar :indicator="options.indicator" ref="radar"></tui-charts-radar>
</view>

<!--微信小程序-->	
<view class="tui-charts--box">
	<tui-charts-radar indicator="{{options.indicator}}" id="radar"></tui-charts-radar>
</view>
		
.tui-charts--box {
	width: 100%;
	display: flex;
	justify-content: center;
}
//data数据
options: {
	indicator: [{
			name: 'Sales',
			max: 6500
		},
		{
			name: 'Administration',
			max: 16000
		},
		{
			name: 'Information Technology',
			max: 30000
		},
		{
			name: 'Customer Support',
			max: 38000
		},
		{
			name: 'Development',
			max: 52000
		},
		{
			name: 'Marketing',
			max: 25000
		}
	],
	dataset: [{
			source: [4200, 3000, 20000, 35000, 50000, 18000],
			name: 'Allocated Budget',
			color: '#5677fc'
		},
		{
			source: [5000, 14000, 28000, 26000, 42000, 21000],
			name: 'Actual Spending',
			color: '#07c160'
		}
	]
}

//uni-app调用方法绘制图表
onReady() {
	this.$refs.radar && this.$refs.radar.draw(this.options.dataset)
}

//微信小程序调用方法绘制图表
onReady: function () {
  let radar=this.selectComponent('#radar')
  radar && radar.draw(this.data.options.dataset)
}

# Slots

名称 说明
- -

# Props

注:对象中属性为约定属性,不可自行修改

参数 类型 说明 默认值
legend Object 图例,说明 {show: true,size: 24,color: '#333'}
tooltip Boolean 点击时是否显示提示信息 true
width Number, String 图表宽度,单位rpx 480
splitNumber Number, String 指示器轴的分割段数 5
indicator Array 雷达图的指示器,用来指定雷达图中的多个变量(维度) [ ]
label Object 指示器名称样式 {show: true,size: 24,color: '#bbb'}
axisLineColor String 指示器线条颜色 #ddd
splitLineColor String 分割线条颜色 #eee
//indicator 指示器属性说明,indicator为必传属性
 indicator: [{
	  //名称
	  name: 'Sales',
	  //最大数值
	  max: 6500
	},
	{
	  //名称
	  name: 'Administration',
	  //最大数值
	  max: 16000
	}]

# Events

注意:uni-app绑定事件使用@,如@click;微信小程序使用bind,如 bindclick。

事件名 说明 回调参数
click 点击图表时触发 {datasetIndex:数据集合索引}

# Methods

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

//uni-app调用方法绘制图表
onReady() {
	this.$refs.radar && this.$refs.radar.draw(this.options.dataset)
}

//微信小程序调用方法绘制图表
onReady: function () {
   let radar=this.selectComponent('#radar')
   radar && radar.draw(this.data.options.dataset)
}

# 预览

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

# 线上程序扫码预览

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