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
					}]
				};
				_self.showPie("canvasPie", Pie);
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						position: 'right',
						lineHeight: 20,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ' : ' + item.data + ' 吨'
					}
				});
			},
		}
	}
</script>

<style>

</style>