kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

群发居民群

Browse Source
This commit is contained in:
shijingjing
2022-07-13 14:35:20 +08:00
parent 9eb1d579b0
commit 1a0d42890d
3 changed files with 229 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
View File

@@ -41,12 +41,17 @@
<div>200</div>
</div>
</div>
<div id="brokenEcharts"></div>
<div class="title">触达人次</div>
<div id="brokenEcharts1"></div>
<div class="title">宣发次数</div>
<div id="brokenEcharts2"></div>
<div class="title">宣发任务数</div>
<div id="brokenEcharts3"></div>
</div>
<div class="columnarEcharts">
<div class="broken_title">
<div class="broken_left">宣发明细</div>
<div class="broken_right"></div>
<div class="broken_right">筛选</div>
</div>
<div id="columnarEcharts"></div>
</div>
@@ -90,7 +95,9 @@ export default {
data() {
return {
isShow: false,
brokenEcharts: null,
brokenEcharts1: null,
brokenEcharts2: null,
brokenEcharts3: null,
columnarEcharts: null,
pieEcharts: null,
filterShow: false,
@@ -101,7 +108,9 @@ export default {
document.title = '宣发统计'
},
mounted() {
this.getBrokenEcharts()
this.getBrokenEcharts1()
this.getBrokenEcharts2()
this.getBrokenEcharts3()
this.getColumnarEcharts()
this.getPieEcharts()
},
@@ -112,18 +121,12 @@ export default {
uni.navigateTo({url: `./calendarInfo`})
},
// 折线图
getBrokenEcharts() {
this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
this.brokenEcharts.setOption({
getBrokenEcharts1() {
this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1'))
this.brokenEcharts1.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
selectedMode: false,
orient: 'horizontal',
padding: [25,0,0,0],
data: ['触达人次', '宣发次数', '宣发任务数']
},
grid: {
left: '2%',
right: '5%',
@@ -160,19 +163,122 @@ export default {
},
series: [
{
name: '触达人次',
type: 'line',
data: [120, 132, 101, 134, 90, 230]
data: [120, 132, 101, 134, 90, 230],
lineStyle: {
color: '#4B87FE',
},
itemStyle: {
color: '#4E8EEE'
}
},
]
})
},
getBrokenEcharts2() {
this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2'))
this.brokenEcharts2.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
dataZoom: [
{
name: '宣发次数',
type: 'line',
data: [220, 182, 191, 234, 290, 330]
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
],
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: ['2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
}
},
series: [
{
name: '宣发任务数',
type: 'line',
data: [1000, 232, 201, 154, 190, 330]
data: [220, 182, 191, 234, 290, 330],
lineStyle: {
color: '#32C5FF',
},
itemStyle: {
color: '#31C1FA'
}
},
]
})
},
getBrokenEcharts3() {
this.brokenEcharts3 = echarts.init(document.getElementById('brokenEcharts3'))
this.brokenEcharts3.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
],
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: ['2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
}
},
series: [
{
type: 'line',
data: [1000, 232, 201, 154, 190, 330],
lineStyle: {
color: '#FFAA44',
},
itemStyle: {
color: '#FFAA44'
}
},
]
})
@@ -348,6 +454,13 @@ export default {
}
}
}
.title {
padding: 30px 0;
box-sizing: border-box;
font-size: 32px;
font-weight: 600;
}
}
.brokenEcharts,
@@ -355,7 +468,9 @@ export default {
.pieEcharts {
background: #FFF;
#brokenEcharts,
#brokenEcharts1,
#brokenEcharts2,
#brokenEcharts3,
#columnarEcharts,
#pieEcharts {
width: 100%;