uni-zhihuikuangshan/components/p-production-statistics-section-2/p-production-statistics-section-2.vue

<template>
	<view>
		<canvas canvas-id="canvasPie" id="canvasPie" @touchstart="touchPie" style="width: 700upx; height:700upx;"></canvas>
	</view>
</template>

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

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
			}
		},
		mounted() {
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(700);
			this.getServerData();
		},
		methods: {
			getServerData() {
				// let Pie = {
				// 	"series": [{
				// 		"name": "梅花井矿 0%",
				// 		"data": 0
				// 	}, {
				// 		"name": "枣泉矿 15.3%",
				// 		"data": 10493.3
				// 	}, {
				// 		"name": "红柳矿 11.21%",
				// 		"data": 7837
				// 	}, {
				// 		"name": "麦垛山矿 13.91%",
				// 		"data": 9711.1
				// 	}, {
				// 		"name": "金凤矿 5.27%",
				// 		"data": 3683.7
				// 	}, {
				// 		"name": "双马矿 4.29%",
				// 		"data": 2999.2
				// 	}, {
				// 		"name": "石槽村矿 7.35%",
				// 		"data": 5138.5
				// 	}, {
				// 		"name": "灵新矿 5.72%",
				// 		"data": 3994.7
				// 	}, {
				// 		"name": "任家庄矿 2.22%",
				// 		"data": 1556.5
				// 	}, {
				// 		"name": "红石湾矿 0%",
				// 		"data": 0
				// 	}, {
				// 		"name": "羊二矿 1.55%",
				// 		"data": 1085.6
				// 	}, {
				// 		"name": "羊一矿 28.79%",
				// 		"data": 20104
				// 	}, {
				// 		"name": "白芨沟井 4.59%",
				// 		"data": 3207.9
				// 	}, {
				// 		"name": "大峰矿 0%",
				// 		"data": 0
				// 	}]
				// };
				
				this.$p_api.coalmine_ratio({
					
				}).then((res)=>{
					console.log(res.data.data)
					
					let Pie = {
						"series": [{
							"name": "",
							"data": 0
						}]
					};
					
						
					res.data.data.forEach((item,index)=>{
						var sevm = {}
						
						sevm.name = item.name_s
						sevm.data = item.n1+item.n2+item.n3
						
						Pie.series[index] = sevm
					})
					
					console.log(Pie)
					
					
					_self.showPie("canvasPie", Pie);
					
				})
				
				
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						position: 'bottom',
						lineHeight: 20,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
					
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ' : ' + item.data + ' 吨'
					}
				});
			},
		}
	}
</script>

<style>

</style>