<template>
	<view class="qiun-columns">

		<view class="qiun-charts">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/js_sdk/u-charts/u-charts.js'
	var _self;
	var canvaRadar = null;
	export default {
		props: {
			series: {
				type: Array,
				default: function() {
					return []
				}
			},
			categories: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			}
		},

		methods: {

			open() {
				console.log('open')
			},
			showRadar(canvasId, categories, series) {
				canvaRadar = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: categories,
					series: series,
					width: 300,
					height: 350,
					legend: {
						show: false,
					},
					// extra: {
					//   radar: {

					//         }
					// }
				});
			}
		}
	}
</script>
<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 350px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;

	}

	.charts {
		transform: scale(1.18);
		
		width: 100%;
		height: 350px;
    margin-left: 15rpx;

		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>