wit-uniapp/pages/my/Mytask/Mytask.vue

<template>
	<view class="OutermostLayer">
		<view style="width: 100%; height:350rpx">
			<l-echart ref="mychart"></l-echart>
		</view>
		<h4>任务列表</h4>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>

		<u-cell-group v-for="(item,index) in taskList" :key="index">
			<u-cell :title="item.tiname" :label="item.tilable" center :isLink="true"  @click="taskdetal(item)">
				<u-icon slot="icon" :color="item.completecolor" size="45" :name="item.completeicon"></u-icon>
			</u-cell>

		</u-cell-group>

	</view>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		data() {
			return {
				teskdata: [150, 230, 224, 218, 135, 147, 260],
				list: ['所有任务', '已完成', '未完成'],
				curNow: 0,
				taskList: [{
						tiname: '水表维修',
						tilable: 'A栋1304卫生间水表漏水',
						complete: true,
						completecolor: '#4CC417',
						completeicon: 'thumb-up-fill'
					},
					{
						tiname: '电表监测',
						tilable: 'B栋13层电表监测',
						complete: true,
						completecolor: '#4CC417',
						completeicon: 'thumb-up-fill'
					},
					{
						tiname: '水表维修',
						tilable: 'B栋305卫生间水表停转',
						complete: false,
						completecolor: '#E41B17',
						completeicon: 'thumb-down'
					},
					{
						tiname: '灯泡监测',
						tilable: 'B栋13层灯泡监测',
						complete: true,
						completecolor: '#4CC417',
						completeicon: 'thumb-up-fill'
					},
					{
						tiname: '水表监测',
						tilable: 'B栋13层监测',
						complete: false,
						completecolor: '#E41B17',
						completeicon: 'thumb-down'
					},

				],


			};
		},

		mounted() {
			this.getdata()

		},

		methods: {
			sectionChange(index) {
				this.curNow = index;

			},
			taskdetal(e){
				  console.log('111111111111111111',e)
				uni.navigateTo({
					url: 'Taskdetails/Taskdetails'
				})
			},
			
			getdata() {
				let option = {
					color:['#4CC417','#E41B17'],
					tooltip: {
						trigger: 'item'
					},
					 legend: {
					    top: '1',
					    left: 'center'
					  },
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [
							{
								value: 35,
								name: '已完成'
							},
							{
								value: 10,
								name: '未完成'
							},
						
						],
						  label: {
						          formatter: '{b}: ({d}%)'
						        },
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				this.$refs.mychart.init(echarts, chart => {
					chart.setOption(option);
				});
			},


		}
	}
</script>

<style>
	.OutermostLayer h4 {
		padding-bottom: 30rpx;
	}
</style>