sailun-tbr-web/pages/Statistical-task/index.vue

<template>
	<view class="top">
		<view class="qiun-charts">
			<view v-for="(item,index) in datalist">
				<view class="content">
					<view class="qiun-charts-one">
					</view>
					<text class="qiun-charts-two">赛轮轮胎品牌任务统计</text>
					<view style="display: flex;justify-content: space-between;">
						
					
					<view class="qiun-charts-three">
						<view>
						</view>
						<view>
							10月10条任务统计
						</view>
					</view>
					<view class="qiun-charts-four">
						<view>
						</view>
						<view>
							10月10条任务统计
						</view>
					</view>
					</view>
					<view class="content-one">
						<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
						<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				datalist: [{},
					{},
					{},
					{},
					{},
				],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: ''
			}
		},
		onLoad() {
			_self = this;
			_self.cWidth = uni.upx2px(370);
			_self.cHeight = uni.upx2px(320);
			this.showRing('canvasRing')
			// this.getServerData();
		},
		methods: {
			// 这是官网给的调接口渲染数据的代码，我写的没有后台数据，自己写的固定的数据  就注销了
			// getServerData() {
			// 	uni.request({
			// 		url: 'https://www.ucharts.cn/data.json',
			// 		data: {},
			// 		success: function(res) {
			// 			console.log(res.data.data)
			// 			console.log("3333")
			// 			let Ring = {
			// 				series: []
			// 			};
			// 			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			// 			Ring.series = res.data.data.Ring.series;
			// 			//自定义文案示例，需设置format字段
			// 			for (let i = 0; i < Ring.series.length; i++) {
			// 				Ring.series[i].format = () => {
			// 					console.log(Ring.series[i].name + Ring.series[i].data)
			// 					return Ring.series[i].name + Ring.series[i].data
			// 				};
			// 			}
			// 			_self.textarea = JSON.stringify(res.data.data.Ring);
			// 			_self.showRing("canvasRing", Ring);
			// 		},
			// 		fail: () => {
			// 			_self.tips = "网络错误，小程序端请检查合法域名";
			// 		},
			// 	});
			// },

			showRing(canvasId, chartData) {
				var chartData = {
					series: [{
						"name": "已完成",
						"data": 50
					}, {
						"name": "待完成",
						"data": 30
					}]
				};
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position: 'bottom',
						float: 'center',
						itemGap: 10,
						padding: 2,
						lineHeight: 26,
						margin: 1,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					background: '#fff',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth,
					height: _self.cHeight,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						name: '70%',
						color: '#7cb5ec',
						fontSize: 12 * _self.pixelRatio,
					},
					title: {
						name: '已完成',
						color: '#666666',
						fontSize: 13 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: 0,
							ringWidth: 15 * _self.pixelRatio,
							labelWidth: 1
						}
					},
				});
			},
			// touchRing(e) {
			// 	canvaRing.touchLegend(e, {
			// 		animation: false
			// 	});
			// 	canvaRing.showToolTip(e, {
			// 		format: function(item) {
			// 			return item.name + ':' + item.data
			// 		}
			// 	});
			// },
			touchRing(e) {
				canvaRing.touchLegend(e, {
					animation: false
				});
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
			changeData() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaRing.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750rpx;
		height: 331rpx;
		background: url(../../static/sailun/background.png) no-repeat;
		background-size: 750rpx 331rpx;

	}

	.qiun-charts-one {
		width: 6rpx;
		height: 30rpx;
		background: #0292FD;
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}

	.qiun-charts-two {
		position: relative;
		top: -18rpx;
		left: 60rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.content {
		width: 702rpx;
		height: 410rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 40px 0px rgba(223, 223, 223, 0.91);
		border-radius: 18px;
		margin: 0 auto;
		position: relative;
		top: 20rpx;

		margin-bottom: 40rpx;

	}

	.content-one {
		display: flex;
		justify-content: space-between;
	}

	.charts {
		width: 380rpx;
		height: 450rpx;
		position: relative;
		top: -20rpx;
	}
	.qiun-charts-three>view:nth-child(1) {
		width: 24rpx;
		height: 24rpx;
		border: 6rpx solid #0094FE;
		transform:rotate(50deg);
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	.qiun-charts-three>view:nth-child(2) {
		width: 150rpx;
		height: 22rpx;
		background-color: #000000;
		color: #fff;
		font-size: 15rpx;
        opacity: 0.3;
		text-align: center;
		position: relative;
		top: -2rpx;
		left: 40rpx;
		border-top-right-radius: 12rpx;
	}
	.qiun-charts-four {
		position: relative;
		right: 200rpx;
	}
	.qiun-charts-four>view:nth-child(1) {
		width: 24rpx;
		height: 24rpx;
		border: 6rpx solid #0094FE;
		transform:rotate(50deg);
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	.qiun-charts-four>view:nth-child(2) {
		width: 150rpx;
		height: 22rpx;
		background-color: #000000;
		color: #fff;
		font-size: 15rpx;
	    opacity: 0.3;
		text-align: center;
		position: relative;
		top: -2rpx;
		left: 40rpx;
		border-top-right-radius: 12rpx;
	}
</style>