97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<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>
|