diff --git a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue b/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
index ab4417c2..bc46d630 100644
--- a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
+++ b/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
@@ -1,5 +1,6 @@
@@ -24,6 +28,7 @@ export default {
selected: [{date: '2022-07-08',}],
brokenEcharts: null,
columnarEcharts: null,
+ pieEcharts: null,
}
},
components: {
@@ -36,11 +41,13 @@ export default {
mounted() {
this.getBrokenEcharts()
this.getColumnarEcharts()
+ this.getPieEcharts()
},
methods: {
change(val) {
this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
},
+ // 折线图
getBrokenEcharts() {
this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
this.brokenEcharts.setOption({
@@ -86,6 +93,7 @@ export default {
]
})
},
+ // 柱状图
getColumnarEcharts() {
this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
this.columnarEcharts.setOption({
@@ -111,6 +119,45 @@ export default {
}
]
})
+ },
+ // 带百分比饼图
+ getPieEcharts() {
+ this.pieEcharts = echarts.init(document.getElementById('pieEcharts'))
+ this.pieEcharts.setOption( {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b}: {c} ({d}%)'
+ },
+ color:['#1684fc','#ccc'],
+ series: [
+ {
+ name: '群发送达率',
+ type: 'pie',
+ radius: ['60', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ normal: {
+ show: false,
+ position: 'center'
+ },
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 5, name: '群发送达率',label:{
+ normal:{
+ show:true,
+ formatter: '{d}%',
+ textStyle: {
+ fontSize: 16,
+ },
+ }}},
+ {value: 120, name: '邮件营销'}
+ ]
+ }
+ ]
+ })
}
}
}
@@ -135,11 +182,13 @@ export default {
}
.brokenEcharts,
- .columnarEcharts {
+ .columnarEcharts,
+ .pieEcharts {
background: #FFF;
#brokenEcharts,
- #columnarEcharts {
+ #columnarEcharts,
+ #pieEcharts {
width: 100%;
height: 400px;
}