工作266:uni--考情页面

<template>
	<view >

		<view style="margin-top: 24rpx;display: flex;justify-content: center;">
			<u-icon name="arrow-left" style="margin-right: 24rpx;"></u-icon>
			<text>2020.10.12</text>
			<u-icon name="arrow-right" style="margin-left: 24rpx;"></u-icon>
		</view>

		<view id="main" style="width: 260rpx;height: 260rpx;margin:38rpx 0 0 245rpx">

		</view>
		<view style="display: flex;justify-content: space-between;text-align: center;padding: 0 64rpx;">
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 36rpx;
color: #222222;">9999</text>
				<text style="color:
color: #757676;font-size: 26rpx;">应到</text>
			</view>
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 36rpx;
			color: #222222;">9999</text>
				<text style="color:
			color: #757676;font-size: 26rpx;">实到</text>
			</view>
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 36rpx;
						color: #222222;">9999</text>
				<text style="color:
						color: #757676;font-size: 26rpx;">缺勤</text>
			</view>
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 36rpx;
									color: #222222;">9999</text>
				<text style="color:
									color: #757676;font-size: 26rpx;">迟到</text>
			</view>
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 36rpx;
												color: #222222;">9999</text>
				<text style="color:
												color: #757676;font-size: 26rpx;">早退</text>
			</view>
		</view>
		<view style="
background: #F7F7F7;">
		<view>
			<navigator url="../machine_score_score/machine_score_score">
			<view  style="background: #FFFFFF;line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;padding: 30rpx 0 0 24rpx;">
						
							<text style="font-size: 32rpx;margin: 37rpx 0 0 30rpx;">正常出勤</text>
							<u-icon name="arrow-right" style="font-size:32rpx;margin: 37rpx 0 0 485rpx;;
			color: #D8D8D8;"></u-icon>
						</view>
						</navigator>
			<navigator url="../machine_score_delay/machine_score_delay">
			<view  style="background: #FFFFFF;line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;padding: 30rpx 0 0 24rpx;">
						
							<text style="font-size: 32rpx;margin: 37rpx 0 0 30rpx;">缺勤</text>
							<u-icon name="arrow-right" style="font-size:32rpx;margin: 37rpx 0 0 551rpx;;
			color: #D8D8D8;"></u-icon>
						</view>
			</navigator>
			<view  style="background: #FFFFFF;line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;padding: 30rpx 0 0 24rpx;">
						
							<text style="font-size: 32rpx;margin: 37rpx 0 0 30rpx;">迟到</text>
							<u-icon name="arrow-right" style="font-size:32rpx;margin: 37rpx 0 0 551rpx;;
			color: #D8D8D8;"></u-icon>
						</view>
			<view  style="background: #FFFFFF;line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;padding: 30rpx 0 0 24rpx;">
						
							<text style="font-size: 32rpx;margin: 37rpx 0 0 30rpx;">早退</text>
							<u-icon name="arrow-right" style="font-size:32rpx;margin: 37rpx 0 0 551rpx;;
			color: #D8D8D8;"></u-icon>
						</view>

		</view>
			
		</view>
	</view>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		mounted() {
			let myChart = echarts.init(document.getElementById("main"));
			let option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				/* legend: {
				     orient: 'vertical',
				     left: 10,
				     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
				 }, */
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: 335,
							name: '直接访问'
						},
						{
							value: 310,
							name: '邮件营销'
						},
						{
							value: 234,
							name: '联盟广告'
						},
						{
							value: 135,
							name: '视频广告'
						},
						{
							value: 1548,
							name: '搜索引擎'
						}
					]
				}]
			};
			myChart.setOption(option);
		}
	}
</script>

<style>

</style>