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; }