uni-zhks-app/pages/p-i-orientation/old.vue

<template>
	<view>
		<!-- 搜索井下人员 -->
		<p-i-o-navbar></p-i-o-navbar>
		
		<view class="content">
			<!-- 当前井下人员 -->
			<p-i-o-section-1>
				<!-- 圆环图 -->
				<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing" id="canvasRing" @touchstart="touchRing"></canvas>
				
			</p-i-o-section-1>
			<!-- 井下人员（区域分布） -->
			<p-i-o-section-2></p-i-o-section-2>
			<!-- 井下人员（部门分布） -->
			<p-i-o-section-3></p-i-o-section-3>
			<!-- 各科室下井人数 -->
			<p-i-o-section-4></p-i-o-section-4>
		</view>
	</view>
</template>


<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRing = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {

				let Ring = {
					series: [
						{
							"name": "一班",
							"data": 50
						}, {
							"name": "二班",
							"data": 30
						}, {
							"name": "三班",
							"data": 20
						}, {
							"name": "四班",
							"data": 18
						}, {
							"name": "五班",
							"data": 8
						},
					]
				}
				_self.showRing("canvasRing", Ring);

			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					title: {
						name: '70%',
						color: '#7cb5ec',
						fontSize: 25 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name: '收益率',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 40 * _self.pixelRatio,
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>


<style lang="scss">
	page{
		background-color: #f3f3f3;
	}
	.content{
		box-sizing: border-box;
		padding: 0 15rpx;
		background-color: #f3f3f3;
	}
</style>