JCSS / yl_miniapp

<template>
	<view class="tui-charts__radar-box" :style="{width:radar_w+'px'}">
		<view class="tui-radar__legend" v-if="legend.show">
			<view class="tui-radar__legend-item" v-for="(item,index) in dataset" :key="index">
				<view class="tui-legend__circle" :style="{background:item.color}"></view>
				<text
					:style="{fontSize:(legend.size || 24)+'rpx',lineHeight:(legend.size || 24)+'rpx',color:legend.color || '#333'}">{{item.name}}</text>
			</view>
		</view>
		<view class="tui-charts-radar" :class="{'tui-radar__mrgin':label.show}"
			:style="{width:radar_w+'px',height:radar_w+'px'}">
			<view class="tui-radar__radius" v-for="(item,index) in indicators" :key="index"
				:style="{height:radar_w/2+'px',transform:`rotate(${item.angle}deg)`,background:axisLineColor,width:lineBold?'2px':'1px'}">
				<view class="tui-radar__name" v-if="label.show"
					:style="{color:label.color || '#bbb',fontSize:(label.size || 24) +'rpx'}">{{item.name}}</view>
			</view>
			<view class="tui-radar__center" :style="{width:lineBold?'2px':'1px',height:lineBold?'2px':'1px'}">
				<view class="tui-radar__hypotenuse" v-for="(l,idx) in hypotenuse" :key="l.id"
					:style="[{bottom: l.y+'px', left: l.x+'px',width: l.width+'px',transform: `rotate(${l.angle}deg)`,background:splitLineColor,height:lineBold?'2px':'1px'}]">
				</view>
				<view v-for="(item,index) in dataset" :key="index" @tap.stop="onDotTap(index)">
					<view class="tui-radar__dataset" v-for="(d,i) in item.lines" :key="d.id"
						:style="{bottom: d.y+'px', left: d.x+'px',width: d.width+'px',transform: `rotate(${d.angle}deg)`,background:item.color,height:lineBold?'2px':'1px'}">
						<view class="tui-radar__dot" :style="{background:item.color}"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="tui-radar__tooltip" v-if="tooltip" :class="{'tui-radar__tooltip-show':tooltipShow}">
			<view class="tui-tooltip__title">{{name}}</view>
			<view class="tui-radar__tooltip-item" v-for="(item,index) in tooltips" :key="index">
				<view class="tui-legend__circle" :style="{background:color}"></view>
				<text class="tui-tooltip__val">{{item.name}}</text>
				<text class="tui-tooltip__val tui-tooltip__val-ml">{{item.value}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tui-charts-radar",
		emits: ['click'],
		props: {
			//图例，说明
			legend: {
				type: Object,
				default () {
					return {
						show: true,
						size: 24,
						color: '#333'
					}
				}
			},
			tooltip: {
				type: Boolean,
				default: true
			},
			width: {
				type: [Number, String],
				default: 480
			},
			splitNumber: {
				type: [Number, String],
				default: 5
			},
			indicator: {
				type: Array,
				default () {
					return []
				}
			},
			label: {
				type: Object,
				default () {
					return {
						show: true,
						color: '#bbb',
						size: 24
					}
				}
			},
			axisLineColor: {
				type: String,
				default: '#ddd'
			},
			splitLineColor: {
				type: String,
				default: '#eee'
			},
			lineBold:{
				type: Boolean,
				default: false
			}
		},
		// #ifndef VUE3
		beforeDestroy() {
			this.clearTimer()
		},
		// #endif
		// #ifdef VUE3
		beforeUnmount() {
			this.clearTimer()
		},
		// #endif
		data() {
			return {
				radar_w: 200,
				dataset: [],
				indicators: [],
				hypotenuse: [],
				name: '',
				color: '',
				tooltips: [],
				tooltipShow: false,
				timer: null
			};
		},
		created() {
			this.radar_w = this.getPx(this.width)
			this.draw(this.dataset)
		},
		methods: {
			getPx(rpx) {
				let px = parseInt(uni.upx2px(Number(rpx)))
				return px % 2 === 0 ? px : px + 1
			},
			getDrawData(dots, idx, type = 'l') {
				let data = [];
				dots.map((dot, index) => {
					let obj = !dots[index + 1] ? dots[0] : dots[index + 1]
					const AB = {
						x: obj.x - dot.x,
						y: obj.y - dot.y,
						y1: dot.y - obj.y
					}
					const v = Math.sqrt(Math.pow(AB.x, 2) + Math.pow(AB.y, 2));
					const angle = Math.atan2(AB.y1, AB.x) * (180 / Math.PI);
					data.push({
						id: type + idx + '_' + index,
						x: dot.x + 1,
						y: dot.y,
						width: v,
						angle: AB.y1 > 0 ? Math.sqrt(Math.pow(angle, 2)) : -Math.sqrt(Math.pow(angle, 2))
					})
				})
				return data
			},
			initData(dataset, r, indicator, angle) {
				let total = this.radar_w
				dataset = JSON.parse(JSON.stringify(dataset))
				dataset.map((item, index) => {
					let lines = []
					item.source.map((val, idx) => {
						let dsR = val / indicator[idx].max * r
						lines.push({
							y: dsR * Math.cos(angle * idx * Math.PI / 180),
							x: dsR * Math.sin(angle * idx * Math.PI / 180)
						})
					})
					item.lines = this.getDrawData(lines, index, 'd')
				})
				this.dataset = dataset
			},
			draw(dataset) {
				if (!dataset || !dataset[0] || !this.indicator) return
				let len = this.indicator.length
				let angle = 360 / len
				let r = this.radar_w / 2
				let indicator = JSON.parse(JSON.stringify(this.indicator))
				indicator.map((item, i) => {
					item.angle = angle * i
				})
				this.indicators = indicator

				let dots = []
				let sn = Number(this.splitNumber)
				for (let i = 0; i < sn; i++) {
					let dotArr = []
					let dsDot = []
					let radius = r - i * (r / sn)
					for (let j = 0; j < len; j++) {
						dotArr.push({
							y: radius * Math.cos(angle * j * Math.PI / 180),
							x: radius * Math.sin(angle * j * Math.PI / 180)
						})
					}
					dots.push(dotArr)
				}

				let lineArr = [];
				dots.map((dotArr, idx) => {
					lineArr = lineArr.concat(this.getDrawData(dotArr, idx))
				})

				this.hypotenuse = lineArr

				this.initData(dataset, r, indicator, angle)
			},
			clearTimer() {
				clearTimeout(this.timer)
				this.timer = null;
			},
			tooltipHandle(index) {
				let data = this.dataset[index]
				let tooltips = []
				let indicator = JSON.parse(JSON.stringify(this.indicator))
				indicator.map((item, idx) => {
					item.value = data.source[idx]
				})
				this.name = data.name || ''
				this.color = data.color || '#333'
				this.tooltips = indicator;
				this.clearTimer()
				this.tooltipShow = true;
				this.timer = setTimeout(() => {
					this.tooltipShow = false
				}, 5000)
			},
			onDotTap(index) {
				this.tooltipHandle(index);
				this.$emit('click', {
					datasetIndex: index
				})
			}
		}
	}
</script>

<style scoped>
	.tui-charts__radar-box {
		position: relative;
	}

	.tui-charts-radar {
		border-radius: 50%;
		position: relative;
		transform: rotate(0deg);
	}

	.tui-radar__mrgin {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.tui-radar__radius {
		/* width: 1px; */
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		transform-origin: 50% 100%;
	}

	.tui-radar__name {
		min-width: 120rpx;
		font-size: 24rpx;
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translate(-50%, -100%);
		text-align: center;
	}

	.tui-radar__center {
		position: absolute;
		/* width: 2px;
		height: 2px; */
		left: 50%;
		top: 50%;
		transform: translate(0, -50%);
	}

	.tui-radar__hypotenuse,
	.tui-radar__dataset {
		/* height: 1px; */
		position: absolute;
		transform-origin: 0 50%;
		z-index: 2;
	}

	.tui-radar__dataset {
		z-index: 3;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.tui-radar__dot {
		height: 6px;
		width: 6px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 5;
		transform: translate(-50%, -50%) rotate(0);
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.tui-radar__legend {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 24rpx;
	}

	.tui-radar__legend-item {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-bottom: 30rpx;
	}

	.tui-legend__circle {
		height: 20rpx;
		width: 20rpx;
		border-radius: 50%;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.tui-radar__tooltip {
		padding: 30rpx;
		border-radius: 12rpx;
		background-color: rgba(0, 0, 0, .6);
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 20;
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s;
	}

	.tui-tooltip__title {
		font-size: 30rpx;
		color: #fff;
		line-height: 30rpx;
	}

	.tui-radar__tooltip-show {
		visibility: visible;
		opacity: 1;
	}


	.tui-radar__tooltip-item {
		display: flex;
		align-items: center;
		padding-top: 24rpx;
		white-space: nowrap;
	}

	.tui-tooltip__val {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #fff;
		margin-left: 6rpx;
	}

	.tui-tooltip__val-ml {
		margin-left: 20rpx;
	}
</style>