171 lines
4.4 KiB
Vue
171 lines
4.4 KiB
Vue
<template>
|
|
<div class="Files">
|
|
<div class="title">特殊人群</div>
|
|
<div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
|
|
<div class="title">年龄分布</div>
|
|
<div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
|
|
<div class="title">男女比例</div>
|
|
<div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import echarts from 'echarts'
|
|
export default {
|
|
name: "Files",
|
|
data() {
|
|
return {
|
|
echartDataSpecial: null,
|
|
echartDataAge: null,
|
|
echartDataSex: null
|
|
}
|
|
},
|
|
computed: { ...mapState(['user']) },
|
|
methods: {
|
|
chartInit() {
|
|
this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
|
|
this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
|
|
this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '特殊人群',
|
|
type: 'pie',
|
|
radius: ['30%', '60%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (colors) {
|
|
var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
},
|
|
},
|
|
data: [
|
|
{ value: 100, name: '吸毒人员100' },
|
|
{ value: 150, name: '高龄老人150' },
|
|
{ value: 80, name: '刑满释放人员80' },
|
|
{ value: 84, name: '退伍军人84' },
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.echartDataSpecial.setOption(option)
|
|
|
|
var option2 = {
|
|
grid: {
|
|
top: '10%',
|
|
left: '4%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['10岁以下', '10-18岁', '18-65岁', '65-80岁', '80岁以上']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
itemStyle: {
|
|
normal: {
|
|
color: ['#0072FF'],
|
|
label: {
|
|
show: true, //开启显示数值
|
|
position: 'top', //数值在上方显示
|
|
textStyle: { //数值样式
|
|
color: '#919191', //字体颜色
|
|
fontSize: 14 //字体大小
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
136, 195, 162, 138,
|
|
{
|
|
value: 98,
|
|
itemStyle: {
|
|
color: '#F09535'
|
|
}
|
|
},
|
|
],
|
|
type: 'bar',
|
|
barWidth : 20,
|
|
}
|
|
]
|
|
};
|
|
this.echartDataAge.setOption(option2)
|
|
|
|
var option3 = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '男女比例',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (colors) {
|
|
var colorList = ['#2891FF', '#FF8700'];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
},
|
|
},
|
|
data: [
|
|
{ value: 100, name: '男100' },
|
|
{ value: 100, name: '女100' },
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.echartDataSex.setOption(option3)
|
|
},
|
|
},
|
|
created() {
|
|
this.$nextTick(() => {
|
|
this.chartInit()
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Files {
|
|
padding: 0 32px;
|
|
.title {
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 44px;
|
|
padding: 40px 0 24px 0;
|
|
}
|
|
.chart-content{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
</style>
|