tui-charts-radar 雷达图表 会员组件

介绍

雷达图表，css版本

引入

uni-app引入

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

import tuiChartsRadar from "@/components/thorui/tui-charts-radar/tui-charts-radar.vue"
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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		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'
 				}
 			]
 		}
 	}
 },
 onReady() {
 	this.$refs.radar && this.$refs.radar.draw(this.options.dataset)
 },
 methods: {
 
 }
}

.tui-charts--box {
	width: 100%;
	display: flex;
	justify-content: center;
}

<!--微信小程序-->	
<view class="tui-charts--box">
 <tui-charts-radar indicator="{{options.indicator}}" id="radar"></tui-charts-radar>
</view>

// data 数据 及 方法
Page({
  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'
    		}
    	]
    }
  },
  onReady: function () {
    let radar=this.selectComponent('#radar')
    radar && radar.draw(this.data.options.dataset)
  }
})

.tui-charts--box {
	width: 100%;
	display: flex;
	justify-content: center;
}

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

TIP

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

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
lineBold V2.0.0+	Boolean	图表线条是否加粗	false

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