yichael_zhongchuang_front_2/components/user/radar.vue

<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<!-- <view class="qiun-title-dot-light">雷达图2</view> -->
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
			<!-- <uCharts canvas-id="canvasRadar" id="canvasRadar" class="charts"></uCharts> -->
		</view>
	</view>
</template>
<script>
	// import uCharts from 'https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js';
	import uCharts from '@../../js_sdk/u-charts/u-charts/u-charts.js';
	// import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.vue';
	var _self;
	var canvaRadar = null;
	export default {
		components:{
			// uCharts
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(500);
			this.cHeight = uni.upx2px(500);
			this.setData();
		},
		methods: {
			getServerData() {
				uni.request({
					url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						let Radar = {
							categories: [],
							series: []
						};
						Radar.categories = res.data.data.Radar.categories;
						Radar.series = res.data.data.Radar.series;
						_self.showRadar("canvasRadar", Radar);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			setData() {
				let Radar = {
					categories: ['维度1', '维度2', '维度3', '维度4', '维度5'],
					series: [{
						name: '成交量1',
						data: [90, 110, 165, 195, 187]
					}, {
						name: '成交量2',
						data: [190, 210, 105, 35, 27]
					}, {
						name: '成交量3',
						data: [290, 310, 205, 135, 127]
					}]
				};
				_self.showRadar("canvasRadar", Radar);
			},
			showRadar(canvasId, chartData) {
				canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 200 //雷达数值的最大值
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.qiun-columns{
		width: 100%;
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 500upx;
		// width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.showborder {
		border: solid 1px #007AFF;
	}
</style>