h5-elab-open-ownerUnion/components/charts/custRadarChart.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" ref="chartId" :id="chartId" class="echarts"></view>
		<view class="chengjiaoLab">
			<view class="name">
				{{dataInfo.dealRate}}
			</view>
			<view class="valueDes">成交几率</view>
		</view>
		<view class="yixiangLab" @click="desClickAction('left')">
			<view class="name" style="min-height: 70rpx;">
				{{dataInfo.yxLevel}}
			</view>
			<view class="valueDes">意向度</view>
			<view class="icon" v-if="isShowIcon">
				?
			</view>
		</view>
		<view class="bakongLab" @click="desClickAction('right')">
			<view class="name"  style="min-height: 70rpx;">
				{{bakongNum}}
			</view>
			<view class="valueDes">把控值</view>
			<view class="icon" v-if="isShowIcon">
				?
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import echarts from '../../static/echarts.js'
	export default {
		props: {
			chartId: String,
			dataInfo: null,
			isShowIcon: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				chengjiaoNum: 0,
				yixiangNum: 0,
				bakongNum: 0,
				option: {
					radar: [{
						indicator: [{
								name: '成交几率',
								max: 100,
								min: 0
							},
							{
								name: '意向度',
								max: 100,
								min: 0
							},
							{
								name: '把控值',
								max: 100,
								min: 0
							}
						],
						center: ['50%', '55%'],
						radius: 110,
						startAngle: 90,
						splitNumber: 4,
						shape: 'circle',
						// name: {
						// 	formatter: '{value}',
						// 	textStyle: {
						// 		color: '#606060',
						// 		opacity: 0.7
						// 	}
						// },
						splitArea: {
							areaStyle: {
								// color: ['rgba(114, 172, 209, 0.2)',
								//     'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
								//     'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
								color: [
									'rgba(254,195,80,0.5)',
									'rgba(254,195,80,0.4)',
									'rgba(254,195,80,0.3)',
									'rgba(254,195,80,0.2)',
									'rgba(254,195,80,0.1)'
								],
								shadowColor: 'rgba(0, 0, 0, 0)',
								// shadowBlur: 10
							}
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.5)'
							}
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.5)'
							}
						}
					}],
					series: [{
						name: '雷达图',
						type: 'radar',
						emphasis: {
							lineStyle: {
								width: 4
							}
						},
						data: [{
							value: [],
							name: '图一',
							symbol: 'circle',
							symbolSize: 6,
							itemStyle: {
								color: '#fff',
								borderWidth: 2,
								borderColor: '#202638'
							},
							lineStyle: {
								type: 'solid',
								color: '#202638'
							},
							areaStyle: {
								color: 'rgba(255, 255, 255, 0.7)'
							}
						}]
					}]
				}
			}
		},

		methods: {
			getDataAction() {
				this.chengjiaoNum = this.dataInfo.dealRateScore
				this.yixiangNum = this.dataInfo.yxScore
				this.bakongNum = this.dataInfo.bkScore
				// this.chengjiaoNum = Math.ceil(Math.random() * 100)
				// this.yixiangNum = Math.ceil(Math.random() * 100)
				// this.bakongNum = Math.ceil(Math.random() * 100)
				this.option.series[0].data[0].value = [this.chengjiaoNum, this.yixiangNum, this.bakongNum]
				// // console.log('数据刷新', this.option.series[0].data[0].value)
			},
			
			desClickAction(e) {
				this.$emit('desClickAction', e)
			},
			
			onViewClick(options) {
				// console.log(options)
			}
		},
		watch: {
			chartId: {
				handler(e) {
					// // console.log('走没走！！！！', e)
					this.getDataAction()
				},
				immediate: true
			},
			dataInfo: {
				handler(e) {
					this.getDataAction()
				},
				deep: true
			}
			
			
		}

	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			this.initAction()
		},
		methods: {
			initAction() {
				if (typeof window.echarts === 'function') {
					this.initEcharts()
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script')
					// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
					script.src = 'static/echarts.js'
					script.onload = this.initEcharts.bind(this)
					document.head.appendChild(script)
				}
			},
			initEcharts() {
				// console.log("initEcharts -> this.$refs", this.$refs.chartId.$el.id)
				myChart = echarts.init(document.getElementById(this.$refs.chartId.$el.id))
				// 观测更新的数据在 view 层可以直接访问到
				if (myChart) {
					myChart.setOption(this.option)
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart) {
					myChart.setOption(newValue)
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 60rpx;
		font-family: DIN Alternate;
		font-weight: bold;

		.chengjiaoLab {
			position: absolute;
			top: 30rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: #FFA74E;
		}

		.yixiangLab {
			position: absolute;
			color: #546074;
			left: 60rpx;
			top: 435rpx;
			width: 80rpx;
			text-align: center;
		}

		.bakongLab {
			position: absolute;
			color: #546074;
			right: 60rpx;
			top: 435rpx;
			width: 80rpx;
			text-align: center;
		}
		
		.valueDes {
			color: rgba($color: #606060, $alpha: 0.7);
			font-size: 20rpx;
			text-align: center;
		}
		
		.icon {
			margin-left: 27rpx;
			margin-top: 35rpx;
			width: 26rpx;
			height: 26rpx;
			border-radius: 13rpx;
			font-size: 10rpx;
			text-align: center;
			line-height: 26rpx;
			background-color: #FEC350;
			color: #FFFFFF;
		}

		.echarts {
			width: 100%;
			margin-top: 0rpx;
			height: 100%;
		}
	}
</style>