<template>
	<view class="content">
		<view class="title">总管理规模</view>
		<view class="info">共有项目8个，合计投资人有443人，分布如下：</view>
		<view class="info">10w~30w投资人数:176人</view>
		<view class="info">30w~50w投资人数:156人</view>
		<view class="info">50w~100w投资人数:85人</view>
		<view class="info">100w~500w投资人数:20人</view>
		<view class="info">500w~1000w投资人数:3人</view>
		<view class="info">大于1000w投资人数:3人</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData"/>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'investors',
		data() {
			return {
				chartData: {},
				opts: {
					dataLabel:false,
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType:'dash',
						showTitle:true,
						data: [{
							min: 0,
							max:90,
							title:'人数/人',
							titleOffsetY:-4
						}]
					},
					legend:{
						position:'top',
						padding:6
					},
					extra: {
						column: {
							type: "straight"
						}
					}
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ['2019年','2020年','2021年','2022年'],
						series: [{
								name: '10万-30万',
								data: [84,86,6]
							},
							{
								name: '30万-50万',
								data: [88,68,0]
							},
							{
								name: '50万-100万',
								data: [48,36,1]
							},
							{
								name: '100万-500万',
								data: [8,11,1]
							},
							{
								name: '500万-1000万',
								data: [0,3,0]
							},
							{
								name: '大于1000万',
								data: [0,3,0]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	.info{
		padding: 7rpx 0;
	}
</style>
