消息回复率

This commit is contained in:
shijingjing
2022-12-21 10:25:39 +08:00
parent f638305b49
commit b033a8c21b

View File

@@ -4,7 +4,11 @@
<span>消息回复率</span>
</div>
<div class="echarts_list">
<div id="echarts1"></div>
<div id="echarts2"></div>
<div id="echarts3"></div>
</div>
<div class="head">
<span>单聊统计</span>
@@ -61,10 +65,157 @@ export default {
}
},
mounted() {
this.getEcharts1()
this.getEcharts2()
this.getEcharts3()
this.getPrivateChat()
this.getGroupChat()
},
methods: {
getEcharts1() {
let echarts1 = document.getElementById('echarts1');
let myChart = echarts.init(echarts1);
let option = {
tooltip: {
trigger: 'item',
},
title: {
zlevel: 0,
text: ['{name|昨日}\n{value|12}'],
top: 'center',
left: '46%',
textAlign: 'center',
textStyle: {
rich: {
name: {
color: '#999999',
fontSize: 13,
lineHeight: 15
},
value: {
color: '#333333',
fontSize: 13,
lineHeight: 16
}
},
},
},
color: ['#3975C6','#F0F2F5'],
series: [
{
name: '昨天',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false,
labelLine: {
show: false,
},
data: [
{ value: 580, name: '男' },
{ value: 484, name: '女' },
]
}
]
};
option && myChart.setOption(option);
},
getEcharts2() {
let echarts2 = document.getElementById('echarts2');
let myChart = echarts.init(echarts2);
let option = {
tooltip: {
trigger: "item",
},
title: {
zlevel: 0,
text: ['{name|近7天}\n{value|12}'],
top: 'center',
left: '46%',
textAlign: 'center',
textStyle: {
rich: {
name: {
color: '#999999',
fontSize: 13,
lineHeight: 15
},
value: {
color: '#333333',
fontSize: 13,
lineHeight: 16
}
},
},
},
color: ['#3975C6','#F0F2F5'],
series: [
{
name: '近7天',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false,
labelLine: {
show: false,
},
data: [
{ value: 580, name: '男' },
{ value: 484, name: '女' },
]
}
]
};
option && myChart.setOption(option);
},
getEcharts3() {
let echarts3 = document.getElementById('echarts3');
let myChart = echarts.init(echarts3);
let option = {
tooltip: {
trigger: "item",
},
title: {
zlevel: 0,
text: ['{name|近30天}\n{value|12}'],
top: 'center',
left: '46%',
textAlign: 'center',
textStyle: {
rich: {
name: {
color: '#999999',
fontSize: 13,
lineHeight: 15
},
value: {
color: '#333333',
fontSize: 13,
lineHeight: 16
}
},
},
},
color: ['#3975C6','#F0F2F5'],
series: [
{
name: '近30天',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false,
labelLine: {
show: false,
},
data: [
{ value: 580, name: '男' },
{ value: 484, name: '女' },
]
}
]
};
option && myChart.setOption(option);
},
getPrivateChat() {
let privateDom = document.getElementById('privateChat');
let myChart = echarts.init(privateDom);
@@ -241,5 +392,22 @@ export default {
height: 100%;
}
}
.echarts_list {
width: 100%;
height: 256px;
background: #FFF;
border-radius: 8px;
margin-top: 24px;
display: flex;
#echarts1,
#echarts2,
#echarts3 {
flex: 1;
width: 100%;
height: 100%;
}
}
}
</style>