gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: legend高亮逻辑变更

Browse Source
This commit is contained in:
陈劲松
2020-12-23 19:05:09 +08:00
committed by chenjinsong
parent 935c2d700f
commit 74af760db7
3 changed files with 243 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -606,8 +606,48 @@
}
},
clickScreenLegend(legendName,index){
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.isGreyScreen.forEach(g => {
if (!g) {
highlightNum++;
}
});
let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
let echart = this.echartModalStore;
if (echart) {
if (!hasGrey) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
});
this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendAllSelect'
});
this.isGreyScreen = this.isGreyScreen.map(() => false);
} else {
let type = curIsGrey ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
});
this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
}
}
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGreyScreen[index];
/*let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore){
this.screenLegendList.forEach((item,i)=>{
let isGrey = this.isGreyScreen[i];
@@ -650,7 +690,7 @@
}
}
})
}
}*/
},
formatLegend(chartWidth,name){
if(!name){

91
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -178,6 +178,7 @@
</div>
</div>
</template>
<script>
import axios from 'axios';
import echarts from 'echarts';
@@ -345,22 +346,46 @@
})
}
},
clickLegend(legendName,index){
let curIsGrey=this.isGrey[index];
let echart=getChart(this.chartIndex)
if(echart) {
if(curIsGrey){
clickLegend(legendName, index){
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.isGrey.forEach(g => {
if (!g) {
highlightNum++;
}
});
let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
let curIsGrey = this.isGrey[index]; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
let echart = getChart(this.chartIndex)
if (echart) {
if (!hasGrey) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
})
}else{
});
this.isGrey = this.isGrey.map((g, i) => i !== index);
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendUnSelect',
type: 'legendAllSelect'
});
this.isGrey = this.isGrey.map(() => false);
} else {
let type = curIsGrey ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
})
});
this.$set(this.isGrey, index, !this.isGrey[index]);
}
this.$set(this.isGrey,index,!curIsGrey)
}
},
clickLegend2(legendName,index){
@@ -411,20 +436,45 @@
}
},
clickScreenLegend(legendName,index){
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore) {
if(curIsGrey){
this.echartModalStore.dispatchAction({
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.isGreyScreen.forEach(g => {
if (!g) {
highlightNum++;
}
});
let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
let echart = this.echartModalStore;
if (echart) {
if (!hasGrey) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
})
}else{
this.echartModalStore.dispatchAction({
type: 'legendUnSelect',
});
this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendAllSelect'
});
this.isGreyScreen = this.isGreyScreen.map(() => false);
} else {
let type = curIsGrey ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
})
});
this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
}
this.$set(this.isGreyScreen,index,!curIsGrey)
}
},
clickScreenLegend2(legendName,index){
@@ -879,7 +929,6 @@
getChart(this.chartIndex).on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
if(self.isStackArea){
console.log(123123);
getChart(self.chartIndex).setOption({
toolbox:{
feature:{

54
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -249,8 +249,58 @@
return color;
},
clickLegend(legendName,index){
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.legend.forEach(g => {
if (!g.isGray) {
highlightNum++;
}
});
let hasGray = highlightNum < this.legend.length; //是否有置灰的
let curIsGray = this.legend[index].isGray; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1; //当前legend是否是目前唯一高亮的
let curIsGrey=this.legend[index].isGray;
let echart = this.chart;
if (echart) {
if (!hasGray) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
});
this.legend = this.legend.map((g, i) => {
if (i === index) {
g.isGray = false;
} else {
g.isGray = true;
}
return g;
});
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendAllSelect'
});
this.legend = this.legend.map(g => {
g.isGray = false;
return g;
});
} else {
let type = curIsGray ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
});
let vm = this;
this.$set(this.legend, index, function(){let legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend;}());
}
}
/*let curIsGrey=this.legend[index].isGray;
if(this.chart){
if(curIsGrey){
this.chart.dispatchAction({
@@ -264,7 +314,7 @@
});
}
this.$set(this.legend[index],'isGray',!curIsGrey)
}
}*/
},
clickLegend2(legendName,index){
let curIsGrey=this.legend[index].isGray;