mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 03:46:45 +08:00
运营数据概览折线图图例动态变化
This commit is contained in:
weixiaobo@boe.com.cn
@@ -155,19 +155,19 @@
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">总学习人数</div>
|
||||
</div>
|
||||
<div class="item1">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">人均学习时长</div>
|
||||
<div class="text">{{chartLabel.one}}</div>
|
||||
</div>
|
||||
<div class="item2">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<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>
|
||||
@@ -345,6 +345,11 @@ export default {
|
||||
checkedList: ['学习人数', '总学习时长'],
|
||||
limitCheckedList: [],
|
||||
plainOptions: ['学习人数', '总学习时长', '人均学习时长'],
|
||||
chartLabel: {
|
||||
one: "学习人数",
|
||||
two: "总学习时长",
|
||||
three: "人均学习时长",
|
||||
}
|
||||
});
|
||||
const surfaceRef = ref(null);
|
||||
const surface1Ref = ref(null);
|
||||
@@ -597,6 +602,29 @@ export default {
|
||||
} else if (state.towParmasn.dateType == 1) {
|
||||
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) => {
|
||||
dates.value = val;
|
||||
@@ -686,16 +714,19 @@ export default {
|
||||
option.value.series[2].data = [];
|
||||
console.log("checkedList:",state.checkedList);
|
||||
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].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].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].yAxisIndex = i;
|
||||
option.value.series[2].name = state.checkedList[i];
|
||||
}
|
||||
}
|
||||
createEcharts2();
|
||||
@@ -720,19 +751,24 @@ export default {
|
||||
option.value.series[1].data = [];
|
||||
option.value.series[2].data = [];
|
||||
console.log("checkedList:",state.checkedList);
|
||||
console.log("666 duration:",duration);
|
||||
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].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].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].yAxisIndex = i;
|
||||
option.value.series[2].name = state.checkedList[i];
|
||||
}
|
||||
}
|
||||
console.log("123:",option.value.series)
|
||||
createEcharts2();
|
||||
}
|
||||
}
|
||||
@@ -777,16 +813,19 @@ export default {
|
||||
option.value.series[2].data = [];
|
||||
console.log("checkedList:",state.checkedList);
|
||||
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].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].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].yAxisIndex = i;
|
||||
option.value.series[2].name = state.checkedList[i];
|
||||
}
|
||||
}
|
||||
createEcharts2();
|
||||
@@ -812,16 +851,19 @@ export default {
|
||||
option.value.series[2].data = [];
|
||||
console.log("checkedList:",state.checkedList);
|
||||
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].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].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].yAxisIndex = i;
|
||||
option.value.series[2].name = state.checkedList[i];
|
||||
}
|
||||
}
|
||||
createEcharts2();
|
||||
@@ -1630,7 +1672,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.item1 {
|
||||
margin-right: 15px;
|
||||
// margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.start,
|
||||
@@ -1651,6 +1693,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.start,
|
||||
|
||||
Reference in New Issue
Block a user