frontend-app/pages/rwa_package/dongjian/finance.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header :isMid="true" borderWidth="1rpx"  >
			<template v-slot:mid>
				<view class="top-view">
					<view class="top-box-view flex-c" :style="{
						background:topSelect == index ? '#7934F6' : 'rgba(0,0,0,0)'
					}"
					v-for="(item,index) in topList" :key="index" @click="onTop(index)">
						<text class="text-28 " :style="{
							color:topSelect == index ? '#fff' : '#333'
						}">{{item}}</text>
					</view>
				</view>
			</template>
		</Header>
		<view class="contract-view">
			<view class="tu-view" v-if="topSelect == 0">
				<qiun-data-charts
				type="ring" 
				canvasId="four_b"
				:canvas2d="isCanvas2d" 
				:resshow="delayload"
				:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}" 
				:chartData="dataSeries"/>
			</view>
			
			<view class="bottom-panel" v-if="topSelect == 0">
				<view class="flex-col mt-24" style="width:50%"  v-for="(item,index) in data" :key="item">
					<view class="flex-r">
						<view class="yuan" :style="{background:dataColor[index]}"></view>
						<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
					</view>
					<text class="text-24 text-fu" style="margin-top:12rpx">
						总营收分红占比:
						<text :style="{color:dataColor[index]}">{{item.value}}%</text>
						
					</text>
				</view>
				
			</view>
			<view class="tu-view"  v-if="topSelect == 1">
				<qiun-data-charts
				type="ring" 
				canvasId="four_b"
				:canvas2d="isCanvas2d" 
				:resshow="delayload"
				:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}" 
				:chartData="dataSeriesTwo"/>
			</view>
			<view class="bottom-panel" v-if="topSelect == 1">
				<view class="flex-col mt-24"  style="width:50%" v-for="(item,index) in dataTwo" :key="item">
					<view class="flex-r">
						<view class="yuan" :style="{background:dataTwoColor[index]}"></view>
						<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
					</view>
					<text class="text-24 text-fu" style="margin-top:12rpx">
						占比:
						<text :style="{color:dataTwoColor[index]}">{{item.value}}%</text>
						
					</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import * as echarts from 'echarts'
import func from '@/utils/func.js';

export default {
	components: { Header,TopSafe },
	data() {
		return {
			topSelect:0,
			topList:[
				'股权架构','营收数据'
			],
			delayload: false,
			myChart:null,
			myChartTwo:null,
			data: [
				{ value: '51', name: '用户股东' },
				{ value: '10', name: '推广奖励' },
				{ value: '10', name: '运营团队' },
				{ value: '10', name: '活动激励' },
				{ value: '9', name: '投资机构' },
				{ value: '10', name: '基金会' },
								
			],
			dataSeries:{
				series:[
					{
						"name": "用户股东",
						"data": 51,
						"color":"#FC5E05"
					}, 
					{
						"name": "推广奖励",
						"data": 10,
						"color":"#BC52FD"
					}, 
					{
						"name": "运营团队",
						"data": 10,
						"color":"#FCC139"
					},
					{
						"name": "投资机构",
						"data": 10,
						"color":"#0474E0"
					},
					{
						"name": "活动激励",
						"data": 9,
						"color":"#1890ff"
					},
					{
						"name": "基金会",
						"data": 10,
						"color":"#91cb74"
					}
				]
			}, 
			dataSeriesTwo:{
				series:[
					{
						"name": "成本",
						"data": 25,
						"color":"#FF8400"
					}, 
					{
						"name": "分红",
						"data": 15,
						"color":"#6136FF"
					}, 
					{
						"name": "销售增值税",
						"data": 13,
						"color":"#19CEB3"
					},
					{
						"name": "市场激励",
						"data": 12,
						"color":"#F1B900"
					},
					{
						"name": "次年发展资金",
						"data": 10.5,
						"color":"#AE9BF5"
					},
					{
						"name": "RWA市值管理",
						"data": 10,
						"color":"#94F7A1"
					},
					{
						"name": "股标护盘",
						"data": 5,
						"color":"#006EFF"
					},
					{
						"name": "交易激励",
						"data": 5,
						"color":"#FF2440"
					},
					{
						"name": "年终分红",
						"data": 4.5,
						"color":"#00A776"
					}
				]
			}, 
			dataColor:['#FC5E05', '#BC52FD', '#FCC139', '#0474E0','#1890ff','#91cb74'],
			dataTwo:[
				{ value: '25', name: '成本' },
				{ value: '15', name: '消费贡献共享计划' },
				{ value: '13', name: '销售增值税' },
				{ value: '12', name: '市场激励' },
				{ value: '10.5', name: '次年发展资金' },
				{ value: '10', name: 'RWA市值管理' },
				{ value: '5', name: '股标护盘' },
				{ value: '5', name: '交易激励' },
				{ value: '4.5', name: '年终共享' },
			],
			dataTwoColor:['#FF8400','#6136FF', '#19CEB3', '#F1B900', '#AE9BF5'
			,'#94F7A1','#006EFF','#FF2440','#00A776'],
			
		
		};
	},
	onReady(){
		
		
		// this.initTwo();
	},
	onLoad() {
		// setTimeout(()=>{
		// 	this.init()
		// },500)
	},
	methods: {
		onTop(index){
			if(this.topSelect !== index){
				this.topSelect = index;
				// if(index == 0){
				// 	setTimeout(()=>{
				// 		this.init()
				// 	},500)
				// }else{
				// 	setTimeout(()=>{
				// 		this.initTwo()
				// 	},500)
				// }
				
				
			}
		},
		async init(){
			// let chartDom = document.getElementById('chart');
			let chartDom = await uni.createSelectorQuery().select('#chart');
			console.log('chartDom',chartDom)
			this.myChart = echarts.init(chartDom);
			const option = {
			color: this.dataColor,
			  tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			  },
			 //  legend: {
				// top: '5%',
				// left: 'center'
			 //  },
			 label:{
				formatter: ' {d}%  ' 
			 },
			  series: [
				{
				  name: '股权架构',
				  type: 'pie',
				  radius: '50%',
				 //  avoidLabelOverlap: false,
				 //  label: {
					// show: false,
					// position: 'center'
				 //  },
				 //  emphasis: {
					// label: {
					//   show: true,
					//   fontSize: 24,
					//   fontWeight: 'bold'
					// }
				 //  },
				 //  labelLine: {
					// show: false
				 //  },
				  data: this.data
				}
			  ]
			};
			this.myChart.setOption(option);
		},
		initTwo(){
			let chartDomTwo = document.getElementById('chartTwo');
			this.myChartTwo = echarts.init(chartDomTwo);
			const option = {
			color: this.dataTwoColor,
			  tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			  },
			 //  legend: {
				// top: '0',
				// left: 'center'
			 //  },
			 label:{
			 	formatter: '{d}%' 
			 },
			  series: [
				{
				  name: '营收数据',
				  type: 'pie',
				  radius: '50%',
				  // avoidLabelOverlap: false,
				 //  selectedMode: 'single',
				 //  label: {
					// show: false,
					// position: 'center'
				 //  },
				 //  emphasis: {
					// label: {
					//   show: true,
					//   fontSize: 24,
					//   fontWeight: 'bold'
					// }
				 //  },
				 //  labelLine: {
					// show: false
				 //  },
				  data: this.dataTwo
				}
			  ]
			};
			this.myChartTwo.setOption(option);
		}
		
	}
}
</script>

<style lang="scss" scoped>
	.top-view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:72rpx;
		background-color: #eee;
		border-radius: 36rpx;
		.top-box-view{
			padding: 0 32rpx;
			box-sizing: border-box;
			height:100%;
			border-radius: 36rpx;
			
		}
	}
.contract-view{
	width:100%;
	height:calc(100% - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	background-color: #fff;
	position: relative;
	.tu-view{
		margin:32rpx 0;
		display: flex;
		width:100%;
		min-height:calc(100vw - 64rpx);
	}
	.bottom-panel{
		display: flex;
		width:100%;
		border-radius: 24rpx;
		box-shadow: 0rpx 0rpx 29rpx 0rpx #E5E5E5;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		.yuan{
			border-radius: 50%;
			width:28rpx;
			min-height:28rpx;
		}
	}
	
}
</style>