fix:去除console 优化代码

This commit is contained in:
zhangyu
2020-09-29 10:25:24 +08:00
parent 03e5937565
commit e14eb8b9b6
2 changed files with 154 additions and 85 deletions

View File

@@ -75,11 +75,9 @@
}) })
}); });
this.total=index; this.total=index;
console.log(this.expressionsData);
}, },
methods:{ methods:{
dataFormat(unit,value){ dataFormat(unit,value){
console.log(value);
if(value.value){ if(value.value){
value=value.value[1] value=value.value[1]
}else{ }else{
@@ -101,7 +99,6 @@
}); });
if(Object.keys(metric).length>0){ if(Object.keys(metric).length>0){
let arr=labelValue.split(' '); let arr=labelValue.split(' ');
console.log(arr);
labelValue=''; labelValue='';
arr.forEach((item)=>{ arr.forEach((item)=>{
if(metric[item]){ if(metric[item]){

View File

@@ -63,7 +63,7 @@
</el-dropdown> </el-dropdown>
</div> </div>
<!--<div v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>--> <!--<div v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;height: calc( 100% - 60px )"></div> <div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="height:calc(100% - 60px)"></div>
<div class="chart-no-data" v-show="noData">No Data</div> <div class="chart-no-data" v-show="noData">No Data</div>
<div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend> <div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index"> <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -138,6 +138,7 @@
import {randomcolor} from '@/components/common/js/radomcolor/randomcolor.js' import {randomcolor} from '@/components/common/js/radomcolor/randomcolor.js'
import timePicker from '@/components/common/timePicker' import timePicker from '@/components/common/timePicker'
import chartConfig from "@/components/page/dashboard/overview/chartConfig"; import chartConfig from "@/components/page/dashboard/overview/chartConfig";
import {getChart, setChart,lineChartMove,getMousePoint} from "@/components/common/js/common";
export default { export default {
name: 'lineChartBlock', name: 'lineChartBlock',
components: { components: {
@@ -239,8 +240,8 @@
}, },
mouseEnterChart(){ mouseEnterChart(){
this.caretShow=true; this.caretShow=true;
if (this.echartStore) { if (getChart(this.chartIndex)) {
this.echartStore.setOption({ getChart(this.chartIndex).setOption({
toolbox: { toolbox: {
show:true, show:true,
} }
@@ -249,8 +250,8 @@
}, },
mouseLeaveChart(){ mouseLeaveChart(){
this.caretShow=false; this.caretShow=false;
if (this.echartStore) { if (getChart(this.chartIndex)) {
this.echartStore.setOption({ getChart(this.chartIndex).setOption({
toolbox: { toolbox: {
show:false, show:false,
} }
@@ -278,28 +279,28 @@
clickLegend(legendName,index){ clickLegend(legendName,index){
//点击图表某一个legend图表只显示当前点击的曲线或柱状图其它隐藏再次点击已选中的legend ,显示全部 //点击图表某一个legend图表只显示当前点击的曲线或柱状图其它隐藏再次点击已选中的legend ,显示全部
let curIsGrey=this.isGrey[index]; let curIsGrey=this.isGrey[index];
if(this.echartStore){ if(getChart(this.chartIndex)){
this.legendList.forEach((item,i)=>{ this.legendListMore.forEach((item,i)=>{
let isGrey = this.isGrey[i]; let isGrey = this.isGrey[i];
if(index != i){ if(index != i){
if(!curIsGrey && !isGrey){ if(!curIsGrey && !isGrey){
this.echartStore.dispatchAction({ getChart(this.chartIndex).dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
name: item.name name: item.name
}); });
}else if(!curIsGrey && isGrey){ }else if(!curIsGrey && isGrey){
this.echartStore.dispatchAction({ getChart(this.chartIndex).dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name name: item.name
}); });
}else{ }else{
this.echartStore.dispatchAction({ getChart(this.chartIndex).dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
name: item.name name: item.name
}); });
} }
}else { }else {
this.echartStore.dispatchAction({ getChart(this.chartIndex).dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name name: item.name
}); });
@@ -370,8 +371,9 @@
} }
}, },
clearData(){ clearData(){
if(this.echartStore){ if(getChart(this.chartIndex)){
this.echartStore.clear(); getChart(this.chartIndex).clear();
// getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
} }
}, },
formatLegend(chartWidth,name){ formatLegend(chartWidth,name){
@@ -420,13 +422,18 @@
maxTime = dataArg[0].data[len][0]; maxTime = dataArg[0].data[len][0];
} }
if (chartSite === 'local') { if (chartSite === 'local') {
this.echartStore = echarts.init(ele); this.$nextTick(()=>{
setChart(this.chartIndex, echarts.init(ele));
console.log(123);
})
//chartId='lineChartArea'; //chartId='lineChartArea';
}else if (chartSite === 'screen') { }else if (chartSite === 'screen') {
this.echartModalStore = echarts.init(ele); this.echartModalStore = echarts.init(ele);
//chartId='screenShowArea'; //chartId='screenShowArea';
} }
var chartWidth = ele.clientWidth; var chartWidth = ele.clientWidth;
var chartHeight = ele.clientHeight;
console.log(ele.offsetHeight);
var title = { var title = {
show:false, show:false,
text: chartInfo.title || null, text: chartInfo.title || null,
@@ -443,44 +450,20 @@
}; };
let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e'); let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb'); let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
let maxValue=0;
let minValue=0;
if(chartInfo.unit &&dataArg.length>0){ if(chartInfo.unit &&dataArg.length>0){
maxValue=dataArg[0].data[0][1]; maxValue=dataArg[0].data[0][1];
minValue=dataArg[0].data[0][1]; minValue=dataArg[0].data[0][1];
for(let j = 0; j < dataArg.length ; j++){ for(let j = 0; j < dataArg.length ; j++){
for (let i = 0; i < dataArg[j].data.length - 1; i++) { dataArg[j].showAllSymbol=false;
maxValue = (maxValue < Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : maxValue);
minValue = (minValue > Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : minValue);
}
} }
} }
let chartUnit=chartInfo.unit?chartInfo.unit:2; let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
let unit=chartDataFormat.getUnit(chartUnit); let maxValue=maxValueCopies.maxValue;
maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil',unit.ascii); let minValue=maxValueCopies.minValue;
minValue=chartDataFormat.formatDatas(minValue,unit.type,'floor',unit.ascii); let dot=maxValueCopies.dot;
let oldValue=maxValue; let copies=maxValueCopies.copies;
let dot=0; let unit=maxValueCopies.unit;
if(maxValue==1){ let oldDot=maxValueCopies.oldDot;
dot++;
}
if(oldValue>10){
while(oldValue>10){
oldValue=oldValue/10;
}
}else if(oldValue<1&&maxValue!==0){
while(oldValue<1&&oldValue>0){
oldValue=oldValue*10;
dot++;
}
maxValue=Math.ceil(oldValue)/Math.pow(10,dot);
dot++;
}
let copies=chartDataFormat.copies(oldValue,unit.type);
let oldDot=2;
if(maxValue<=1){
oldDot=dot>6?6:dot;
}
var option = { var option = {
title:{ title:{
show:false, show:false,
@@ -523,6 +506,9 @@
/*enterable:true, 导致tooltip不消失显示多个tooltip*/ /*enterable:true, 导致tooltip不消失显示多个tooltip*/
position:function(point,params,dom,rect,size){ position:function(point,params,dom,rect,size){
dom.style.transform = "translateZ(0)"; dom.style.transform = "translateZ(0)";
var windowWidth=window.innerWidth;//窗口宽度
var windowHeight=window.innerHeight;//窗口高度
var windowMouse=getMousePoint();
//提示框位置 //提示框位置
var x=0; var x=0;
var y=0; var y=0;
@@ -550,22 +536,23 @@
}else{ }else{
x = pointX - boxWidth; x = pointX - boxWidth;
} }
if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框 if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
y = pointY+10; y = pointY + 15;
}else { }else {
y = pointY-boxHeight; y = pointY - boxHeight - 10;
} }
return [x,y]; return [x,y];
}else {//preview page }else {//preview page
if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
x=pointX+10; if(windowMouse.x<(windowWidth/2)){//说明鼠标在左边放不下提示框
x=pointX + 15;
}else{ }else{
x = pointX - boxWidth; x = pointX - boxWidth - 15;
} }
if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框 if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
y = pointY+10; y = pointY + 15;
}else { }else {
y = pointY-boxHeight; y = pointY - boxHeight - 10;
} }
return [x,y]; return [x,y];
} }
@@ -575,25 +562,22 @@
}else{ }else{
x = pointX - boxWidth; x = pointX - boxWidth;
} }
if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框 if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
y = pointY+10; y = pointY + 15;
}else { }else {
y = pointY-boxHeight; y = pointY - boxHeight - 10;
} }
return [x,y]; return [x,y];
} }
}, },
formatter:function(params){ formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`; let str = `<div>`;
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
let sum = 0; let sum = 0;
params.forEach((item, i) => { params.forEach((item, i) => {
let tip=legend[item.seriesIndex]; let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex]; let color = self.bgColorList[item.seriesIndex];
if(i===0){ if(i===0){
let value=bus.computeTimezone(item.data[0]); let value=item.data[0];
let t_date = new Date(value); let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
@@ -604,10 +588,10 @@
val = Number(item.data[1]); val = Number(item.data[1]);
} }
sum +=val; sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 200px; line-height: 18px; font-size: 12px;">`; str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`; str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`; str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,-1,oldDot);
str += `</div>`; str += `</div>`;
str += `</div>`; str += `</div>`;
}); });
@@ -789,21 +773,21 @@
this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength); this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(function () { setTimeout(function () {
let divHeight = 111; let divHeight = self.$refs.legendArea.offsetHeight;
if(!chartInfo.height){ if(!chartInfo.height){
self.echartStore.resize({height:228}); getChart(self.chartIndex).resize({height:(318-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
}else { }else {
self.echartStore.resize({height:(chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)}); getChart(self.chartIndex).resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
} }
if(dataArg&&dataArg.length>0){ if(dataArg&&dataArg.length>0){
self.echartStore.clear(); getChart(self.chartIndex).clear();
self.echartStore.setOption(option);//创建图表 getChart(self.chartIndex).setOption(option);//创建图表
self.noData=false; self.noData=false;
}else{ }else{
self.noData=true; self.noData=true;
option=chartConfig.getOption('noData') option=chartConfig.getOption('noData')
self.echartStore.clear(); getChart(self.chartIndex).clear();
self.echartStore.setOption(option);//创建图表 getChart(self.chartIndex).setOption(option);//创建图表
} }
self.$refs['localLoading'+self.chartIndex].endLoading(); self.$refs['localLoading'+self.chartIndex].endLoading();
@@ -811,9 +795,9 @@
}, 100); }, 100);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
self.echartStore.resize(); getChart(self.chartIndex).resize();
}); });
this.echartStore.on('magictypechanged', function (params) { getChart(this.chartIndex).on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea; self.isStackArea = !self.isStackArea;
if(self.isStackArea){ if(self.isStackArea){
this.setOption({ this.setOption({
@@ -847,7 +831,7 @@
params.forEach((item, i) => {let tip=legend[item.seriesIndex]; params.forEach((item, i) => {let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex]; let color = self.bgColorList[item.seriesIndex];
if(i===0){ if(i===0){
let value=bus.computeTimezone(item.data[0]); let value=item.data[0];
let t_date = new Date(value); let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
@@ -1111,8 +1095,8 @@
chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`; chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
}, },
clearChart(){ clearChart(){
if(this.echartStore){ if(getChart(this.chartIndex)){
this.echartStore.clear(); getChart(this.chartIndex).clear();
} }
if(this.echartModalStore){ if(this.echartModalStore){
this.echartModalStore.clear(); this.echartModalStore.clear();
@@ -1465,15 +1449,31 @@
loadMore(){ loadMore(){
this.seriesItemArr=this.seriesItem; this.seriesItemArr=this.seriesItem;
this.legendListMore=this.legendList; this.legendListMore=this.legendList;
this.echartStore.setOption({ let chartInfo=this.data;
series:this.seriesItem let dataArg=this.seriesItem;
let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
let maxValue=maxValueCopies.maxValue;
let minValue=maxValueCopies.minValue;
let dot=maxValueCopies.dot;
let copies=maxValueCopies.copies;
let unit=maxValueCopies.unit;
let oldDot=maxValueCopies.oldDot;
getChart(this.chartIndex).setOption({
series:this.seriesItem,
yAxis:{
minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max'),
}
}); });
if(this.hasLegendOptions){
this.computeLegendData(this.legendListMore,this.seriesItemArr,'local')
}
this.$nextTick(()=>{ this.$nextTick(()=>{
let divHeight = this.$refs.legendArea.offsetHeight; let divHeight = this.$refs.legendArea.offsetHeight;
if(!this.chartInfo.height){ if(!this.chartInfo.height){
this.echartStore.resize({height:228}); getChart(this.chartIndex).resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
}else { }else {
this.echartStore.resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)}); getChart(this.chartIndex).resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
} }
}) })
}, },
@@ -1481,9 +1481,26 @@
loadScreenMore(){ loadScreenMore(){
this.seriesItemArrScreen=this.seriesItemScreen; this.seriesItemArrScreen=this.seriesItemScreen;
this.screenLegendListMore=this.screenLegendList; this.screenLegendListMore=this.screenLegendList;
let chartInfo=this.data;
let dataArg=this.seriesItem;
let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
let maxValue=maxValueCopies.maxValue;
let minValue=maxValueCopies.minValue;
let dot=maxValueCopies.dot;
let copies=maxValueCopies.copies;
let unit=maxValueCopies.unit;
let oldDot=maxValueCopies.oldDot;
this.echartModalStore.setOption({ this.echartModalStore.setOption({
series:this.seriesItemScreen series:this.seriesItemScreen,
yAxis:{
minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max'),
}
}); });
if(this.hasLegendOptions){
this.computeLegendData(this.screenLegendListMore,this.seriesItemArrScreen,'screen')
}
this.$nextTick(()=>{ this.$nextTick(()=>{
let legendDiv = document.getElementById('screenLegendArea'+this.chartIndex); let legendDiv = document.getElementById('screenLegendArea'+this.chartIndex);
let divHeight = legendDiv.offsetHeight; let divHeight = legendDiv.offsetHeight;
@@ -1492,13 +1509,68 @@
this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`; this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度 this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
}) })
} },
getMaxValue(dataArg,chartInfo){
let maxValue=0;
let minValue=0;
if(chartInfo.unit &&dataArg.length>0){
maxValue=dataArg[0].data[0][1];
minValue=dataArg[0].data[0][1];
for(let j = 0; j < dataArg.length ; j++){
for (let i = 0; i < dataArg[j].data.length - 1; i++) {
maxValue = (maxValue < Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : maxValue);
minValue = (minValue > Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : minValue);
}
}
}
let chartUnit=chartInfo.unit?chartInfo.unit:2;
let unit=chartDataFormat.getUnit(chartUnit);
maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil',unit.ascii);
minValue=chartDataFormat.formatDatas(minValue,unit.type,'floor',unit.ascii);
let oldValue=maxValue;
let dot=0;
if(maxValue==1){
dot++;
}
if(oldValue>10){
while(oldValue>10){
oldValue=oldValue/10;
}
}else if(oldValue<1&&maxValue!==0){
while(oldValue<1&&oldValue>0){
oldValue=oldValue*10;
dot++;
}
maxValue=Math.floor(oldValue)/Math.pow(10,dot);
dot++;
}
let copies=chartDataFormat.copies(oldValue,unit.type);
let oldDot=2;
if(maxValue<=1){
oldDot=dot>6?6:dot;
}
return {
maxValue,
dot,
copies,
minValue,
unit,
oldDot
}
},
}, },
mounted() { mounted() {
this.firstLoad = false; this.firstLoad = false;
if(!document.onmousemove){// 添加鼠标移动事件监听
document.onmousemove=lineChartMove
}
}, },
beforeDestroy() { beforeDestroy() {
this.clearChart(); this.clearChart();
getChart(this.chartIndex).dispose();
if(!document.onmousemove){// 移除鼠标移动事件监听
document.onmousemove=null;
}
}, },
}; };