居民统计
This commit is contained in:
liuye
@@ -40,7 +40,7 @@ export default {
|
||||
component: Message
|
||||
},
|
||||
],
|
||||
tabIndex: 0,
|
||||
tabIndex: 2,
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
}
|
||||
|
||||
@@ -33,58 +33,113 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
name: '特殊人群',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
radius: ['30%', '60%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
{ 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)'
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataSpecial.setOption(option)
|
||||
this.echartDataSex.setOption(option)
|
||||
|
||||
var option2 = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
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: [
|
||||
120,
|
||||
136, 195, 162, 138,
|
||||
{
|
||||
value: 200,
|
||||
value: 98,
|
||||
itemStyle: {
|
||||
color: '#a90000'
|
||||
color: '#F09535'
|
||||
}
|
||||
},
|
||||
150,
|
||||
80,
|
||||
70,
|
||||
110,
|
||||
130
|
||||
],
|
||||
type: 'bar'
|
||||
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() {
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="Message">
|
||||
<div class="title">消息回复率</div>
|
||||
<div class="msg-type">
|
||||
<div class="type-list">
|
||||
<div :class="type == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="tabClick(index)">{{ item }}</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartDay"></div>
|
||||
</div>
|
||||
<div class="title">单聊统计</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||
@@ -51,8 +57,11 @@ export default {
|
||||
value: '255,625'
|
||||
},
|
||||
],
|
||||
typeList: ['昨日', '近7天', '近30天'],
|
||||
type: 0,
|
||||
echartDataFriend: null,
|
||||
echartDataGroup: null
|
||||
echartDataGroup: null,
|
||||
echartDataDay: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
@@ -60,6 +69,7 @@ export default {
|
||||
chartInit() {
|
||||
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||
this.echartDataDay = echarts.init(document.getElementById('chartDay'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
@@ -137,8 +147,55 @@ export default {
|
||||
]
|
||||
};
|
||||
this.echartDataFriend.setOption(option)
|
||||
this.echartDataGroup.setOption(option)
|
||||
this.echartDataGroup.setOption(option)
|
||||
|
||||
var option2 = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#1890FF', '#F0F2F5'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataDay.setOption(option2)
|
||||
},
|
||||
tabClick(index) {
|
||||
this.type = index
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
@@ -195,5 +252,35 @@ export default {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.msg-type {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 8px;
|
||||
padding-top: 44px;
|
||||
.type-list {
|
||||
width: 430px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #E9E9E9;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
margin: 0 auto 48px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
.active {
|
||||
font-weight: 500;
|
||||
color: #080808;
|
||||
background: #D8D8D8;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.23);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user