Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
aixianling
@@ -18,16 +18,222 @@
|
|||||||
<!-- 特殊人群 -->
|
<!-- 特殊人群 -->
|
||||||
<div class="specialPeople">
|
<div class="specialPeople">
|
||||||
<h3>特殊人群</h3>
|
<h3>特殊人群</h3>
|
||||||
<div>
|
<div class="specialBox">
|
||||||
|
<div id="specialEcharts"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 年龄分布 -->
|
||||||
|
<div class="ageDistribution">
|
||||||
|
<h3>年龄分布</h3>
|
||||||
|
<div class="ageBox">
|
||||||
|
<div id="ageEcharts"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 男女比例 -->
|
||||||
|
<div class="ageProportion">
|
||||||
|
<h3>男女比例</h3>
|
||||||
|
<div class="proportionBox">
|
||||||
|
<div id="proportionEcharts"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
export default {
|
export default {
|
||||||
|
name: "resident",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getSpecialEcharts()
|
||||||
|
this.getAgeEcherts()
|
||||||
|
this.getAgeProportion()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 特殊人群
|
||||||
|
getSpecialEcharts() {
|
||||||
|
let specialDom = document.getElementById('specialEcharts');
|
||||||
|
let myChart = echarts.init(specialDom);
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
zlevel: 0,
|
||||||
|
text: ['{name|特殊人群}'],
|
||||||
|
top: 'center',
|
||||||
|
left: '48%',
|
||||||
|
textAlign: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#999999',
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 15
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#4980CB','#F3A963','#6B79BB','#97D1B3'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '特殊人群',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['30%', '60%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
emphasis: {
|
||||||
|
disabled: false,
|
||||||
|
scale: false,
|
||||||
|
scaleSize: 0,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
alignTo: 'labelLine',
|
||||||
|
formatter: '{name|{b}}\n{value|{c}}',
|
||||||
|
padding: [0, -70],
|
||||||
|
minMargin: 5,
|
||||||
|
edgeDistance: 10,
|
||||||
|
lineHeight: 15,
|
||||||
|
rich: {
|
||||||
|
time: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
length: 15,
|
||||||
|
length2: 70,
|
||||||
|
maxSurfaceAngle: 80
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '退伍军人' },
|
||||||
|
{ value: 735, name: '吸毒人员' },
|
||||||
|
{ value: 580, name: '刑满释放人员' },
|
||||||
|
{ value: 484, name: '高龄老人' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
// 年龄分布
|
||||||
|
getAgeEcherts() {
|
||||||
|
let ageDom = document.getElementById('ageEcharts');
|
||||||
|
let myChart = echarts.init(ageDom);
|
||||||
|
let option;
|
||||||
|
option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['10以下', '10-18', '18-65', '65-80', '80以上']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [136, 195, 162, 138, {
|
||||||
|
value: 98,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F3A963'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#3975C6",
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: '#4980CB'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 22,
|
||||||
|
barGap: '20%',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
// 男女比例
|
||||||
|
getAgeProportion() {
|
||||||
|
let proportionDom = document.getElementById('proportionEcharts');
|
||||||
|
let myChart = echarts.init(proportionDom);
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
zlevel: 0,
|
||||||
|
text: ['{name|男女比例}'],
|
||||||
|
top: 'center',
|
||||||
|
left: '48%',
|
||||||
|
textAlign: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#999999',
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 15
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '特殊人群',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['30%', '60%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
emphasis: {
|
||||||
|
disabled: false,
|
||||||
|
scale: false,
|
||||||
|
scaleSize: 0,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
alignTo: 'labelLine',
|
||||||
|
formatter: '{name|{b}}{value|{c}}\n',
|
||||||
|
padding: [0, -50],
|
||||||
|
minMargin: 5,
|
||||||
|
edgeDistance: 10,
|
||||||
|
lineHeight: 15,
|
||||||
|
rich: {
|
||||||
|
time: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
length: 20,
|
||||||
|
length2: 50,
|
||||||
|
maxSurfaceAngle: 80
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '男',itemStyle: { color: '#3975C6'}},
|
||||||
|
{ value: 735, name: '女' ,itemStyle: { color: '#F3A963'}},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -61,9 +267,26 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.specialPeople {
|
.specialPeople,
|
||||||
|
.ageDistribution,
|
||||||
|
.ageProportion {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
.specialBox,
|
||||||
|
.ageBox,
|
||||||
|
.proportionBox {
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
#specialEcharts,
|
||||||
|
#ageEcharts,
|
||||||
|
#proportionEcharts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user