hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-10 11:26:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

运营数据概览折线图图例动态变化

Browse Source
This commit is contained in:
weixiaobo@boe.com.cn
2023-08-28 16:22:26 +08:00
parent 1644672c97
commit df6abbd53d
1 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/report/Operational.vue
View File

@@ -155,19 +155,19 @@
<div class="start" /> <div class="start" />
<div class="radio" /> <div class="radio" />
<div class="end" /> <div class="end" />
<div class="text">总学习人数</div> <div class="text">{{chartLabel.one}}</div>
</div>
<div class="item1">
<div class="start" />
<div class="radio" />
<div class="end" />
<div class="text">人均学习时长</div>
</div> </div>
<div class="item2"> <div class="item2">
<div class="start" /> <div class="start" />
<div class="radio" /> <div class="radio" />
<div class="end" /> <div class="end" />
<div class="text">总学习时长</div> <div class="text">{{chartLabel.two}}</div>
</div>
<div class="item1">
<div class="start" />
<div class="radio" />
<div class="end" />
<div class="text">{{chartLabel.three}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -345,6 +345,11 @@ export default {
checkedList: ['学习人数', '总学习时长'], checkedList: ['学习人数', '总学习时长'],
limitCheckedList: [], limitCheckedList: [],
plainOptions: ['学习人数', '总学习时长', '人均学习时长'], plainOptions: ['学习人数', '总学习时长', '人均学习时长'],
chartLabel: {
one: "学习人数",
two: "总学习时长",
three: "人均学习时长",
}
}); });
const surfaceRef = ref(null); const surfaceRef = ref(null);
const surface1Ref = ref(null); const surface1Ref = ref(null);
@@ -597,6 +602,29 @@ export default {
} else if (state.towParmasn.dateType == 1) { } else if (state.towParmasn.dateType == 1) {
twoDatChange(state.towParmasn.day); twoDatChange(state.towParmasn.day);
} }
console.log("modalChange type:",state.towParmasn.type);
if(state.towParmasn.type==2 || state.towParmasn.type==3){
state.chartLabel.one = "总阅读人数";
state.chartLabel.two = "总阅读时长";
state.chartLabel.three = "人均阅读时长";
state.plainOptions = ["总阅读人数","总阅读时长","人均阅读时长"];
state.checkedList = ["总阅读人数","总阅读时长"];
}else if(state.towParmasn.type==4){
state.chartLabel.one = "总查看人数";
state.chartLabel.two = "总提问人数";
state.chartLabel.three = "总回答人数";
state.plainOptions = ["总查看人数","总提问人数","总回答人数"];
state.checkedList = ["总查看人数","总提问人数"];
}else {
state.chartLabel.one = "学习人数";
state.chartLabel.two = "总学习时长";
state.chartLabel.three = "人均学习时长";
state.plainOptions = ["学习人数","总学习时长","人均学习时长"];
state.checkedList = ["学习人数","总学习时长"];
}
option.value.series[0].name = state.chartLabel.one;
option.value.series[1].name = state.chartLabel.two;
option.value.series[2].name = state.chartLabel.two;
}; };
const onCalendarChange = (val) => { const onCalendarChange = (val) => {
dates.value = val; dates.value = val;
@@ -686,16 +714,19 @@ export default {
option.value.series[2].data = []; option.value.series[2].data = [];
console.log("checkedList:",state.checkedList); console.log("checkedList:",state.checkedList);
for(let i=0;i<state.checkedList.length;i++){ for(let i=0;i<state.checkedList.length;i++){
if(state.checkedList[i]=="学习人数"){ if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
option.value.series[0].data = count; option.value.series[0].data = count;
option.value.series[0].name = state.checkedList[i];
} }
if(state.checkedList[i]=="人均学习时长"){ if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
option.value.series[1].data = avgDuration; option.value.series[1].data = avgDuration;
option.value.series[1].yAxisIndex = i; option.value.series[1].yAxisIndex = i;
option.value.series[1].name = state.checkedList[i];
} }
if(state.checkedList[i]=="总学习时长"){ if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
option.value.series[2].data = duration; option.value.series[2].data = duration;
option.value.series[2].yAxisIndex = i; option.value.series[2].yAxisIndex = i;
option.value.series[2].name = state.checkedList[i];
} }
} }
createEcharts2(); createEcharts2();
@@ -720,19 +751,24 @@ export default {
option.value.series[1].data = []; option.value.series[1].data = [];
option.value.series[2].data = []; option.value.series[2].data = [];
console.log("checkedList:",state.checkedList); console.log("checkedList:",state.checkedList);
console.log("666 duration:",duration);
for(let i=0;i<state.checkedList.length;i++){ for(let i=0;i<state.checkedList.length;i++){
if(state.checkedList[i]=="学习人数"){ if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
option.value.series[0].data = count; option.value.series[0].data = count;
option.value.series[0].name = state.checkedList[i];
} }
if(state.checkedList[i]=="人均学习时长"){ if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
option.value.series[1].data = avgDuration; option.value.series[1].data = avgDuration;
option.value.series[1].yAxisIndex = i; option.value.series[1].yAxisIndex = i;
option.value.series[1].name = state.checkedList[i];
} }
if(state.checkedList[i]=="总学习时长"){ if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
option.value.series[2].data = duration; option.value.series[2].data = duration;
option.value.series[2].yAxisIndex = i; option.value.series[2].yAxisIndex = i;
option.value.series[2].name = state.checkedList[i];
} }
} }
console.log("123:",option.value.series)
createEcharts2(); createEcharts2();
} }
} }
@@ -777,16 +813,19 @@ export default {
option.value.series[2].data = []; option.value.series[2].data = [];
console.log("checkedList:",state.checkedList); console.log("checkedList:",state.checkedList);
for(let i=0;i<state.checkedList.length;i++){ for(let i=0;i<state.checkedList.length;i++){
if(state.checkedList[i]=="学习人数"){ if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
option.value.series[0].data = count; option.value.series[0].data = count;
option.value.series[0].name = state.checkedList[i];
} }
if(state.checkedList[i]=="人均学习时长"){ if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
option.value.series[1].data = avgDuration; option.value.series[1].data = avgDuration;
option.value.series[1].yAxisIndex = i; option.value.series[1].yAxisIndex = i;
option.value.series[1].name = state.checkedList[i];
} }
if(state.checkedList[i]=="总学习时长"){ if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
option.value.series[2].data = duration; option.value.series[2].data = duration;
option.value.series[2].yAxisIndex = i; option.value.series[2].yAxisIndex = i;
option.value.series[2].name = state.checkedList[i];
} }
} }
createEcharts2(); createEcharts2();
@@ -812,16 +851,19 @@ export default {
option.value.series[2].data = []; option.value.series[2].data = [];
console.log("checkedList:",state.checkedList); console.log("checkedList:",state.checkedList);
for(let i=0;i<state.checkedList.length;i++){ for(let i=0;i<state.checkedList.length;i++){
if(state.checkedList[i]=="学习人数"){ if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
option.value.series[0].data = count; option.value.series[0].data = count;
option.value.series[0].name = state.checkedList[i];
} }
if(state.checkedList[i]=="人均学习时长"){ if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
option.value.series[1].data = avgDuration; option.value.series[1].data = avgDuration;
option.value.series[1].yAxisIndex = i; option.value.series[1].yAxisIndex = i;
option.value.series[1].name = state.checkedList[i];
} }
if(state.checkedList[i]=="总学习时长"){ if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
option.value.series[2].data = duration; option.value.series[2].data = duration;
option.value.series[2].yAxisIndex = i; option.value.series[2].yAxisIndex = i;
option.value.series[2].name = state.checkedList[i];
} }
} }
createEcharts2(); createEcharts2();
@@ -1630,7 +1672,7 @@ export default {
} }
} }
.item1 { .item1 {
margin-right: 15px; // margin-right: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
.start, .start,
@@ -1651,6 +1693,7 @@ export default {
} }
} }
.item2 { .item2 {
margin-right: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
.start, .start,