uni-zhks-app/pages/p-i-704/p-i-704.vue

<template>
	<view>
		<!-- top -->
		<p-i-704-section-1></p-i-704-section-1>
		<!-- 今日产量 -->
		<p-i-704-section-2>
			<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing" id="canvasRing" @touchstart="touchRing"></canvas>
		</p-i-704-section-2>
		<!-- 安全检测 -->
		<p-i-704-section-3></p-i-704-section-3>
		<!-- 工业电视 -->
		<p-i-704-section-4></p-i-704-section-4>
		
		<!-- 机器 -->
		<p-i-704-section-5></p-i-704-section-5>
	</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": 10000
					}, {
						"name": "中班",
						"data": 3000
					}, {
						"name": "早班",
						"data": 1000
					}, ]
				}
				_self.showRing("canvasRing", Ring);

			},
			
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					// 图裂配置
					// legend: true,
					legend: {
						position: "right",
						lineHeight: 30,
					},
					title: {
						name: '今日产量',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name: '14000吨',
						color: '#666666',
						fontSize: 20 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 20
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: false,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data + '吨'
					}
				});
			},


		}
	}
</script>



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