“08a816fc2d77ddb4dbc34520296b0119b8d45cee”上不存在“source/libs/parser/inc/parserInt.h”
提交 94d15a0b 编写于 作者: X xiayifan

UI fixed the coordinate axis text is not clearly displayed

上级 60203207
...@@ -173,11 +173,12 @@ export default { ...@@ -173,11 +173,12 @@ export default {
); );
const fullScreenFun = this.toggleFullScreen; const fullScreenFun = this.toggleFullScreen;
const axisName = this.axisName; const axisName = this.axisName;
const that = this;
const option = { const option = {
grid: { grid: {
left: 24, left: 24,
top: 60, top: 60,
right: 50, right: 80,
bottom: 60, bottom: 60,
}, },
xAxis: { xAxis: {
...@@ -187,11 +188,7 @@ export default { ...@@ -187,11 +188,7 @@ export default {
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) { formatter: function(value) {
if (value.toString().length >= 6) { return that.formateNUmber(value);
return value.toExponential(3);
} else {
return Math.round(value * 1000) / 1000;
}
}, },
}, },
splitLine: {show: false}, splitLine: {show: false},
...@@ -204,6 +201,9 @@ export default { ...@@ -204,6 +201,9 @@ export default {
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) {
return that.formateNUmber(value);
},
}, },
}, },
toolbox: { toolbox: {
...@@ -276,7 +276,6 @@ export default { ...@@ -276,7 +276,6 @@ export default {
option.grid.right = 140; option.grid.right = 140;
} }
option.yAxis.inverse = true; option.yAxis.inverse = true;
const that = this;
option.yAxis.axisLabel.formatter = function(value) { option.yAxis.axisLabel.formatter = function(value) {
return that.yAxisFormatter(value); return that.yAxisFormatter(value);
}; };
...@@ -303,14 +302,12 @@ export default { ...@@ -303,14 +302,12 @@ export default {
this.removeTooltip(); this.removeTooltip();
if (!this.fullScreen) { if (!this.fullScreen) {
if (this.axisName === 2) { if (this.axisName === 2) {
// this.charObj.setOption({grid: {right: 140}});
this.charOption.grid.right = 140; this.charOption.grid.right = 140;
} }
this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#3E98C5'; '#3E98C5';
} else { } else {
// this.charObj.setOption({grid: {right: 40}}); this.charOption.grid.right = 80;
this.charOption.grid.right = 40;
this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#6D7278'; '#6D7278';
} }
...@@ -388,16 +385,31 @@ export default { ...@@ -388,16 +385,31 @@ export default {
) )
: []; : [];
} else if (this.axisName === 1) { } else if (this.axisName === 1) {
data = `${(filter[0].relative_time / 3600).toFixed(3)}h`; data = `${this.formateNUmber(
(filter[0].relative_time / 3600).toFixed(3),
)}h`;
} else { } else {
data = filter[0].step; data = this.formateNUmber(filter[0].step);
} }
} }
return data; return data;
}, },
/** /**
* Formate time display * Formate time display
* @param {Onject} time * @param {Number} value
* @return {Number} Formatted number
*/
formateNUmber(value) {
value = Number(value);
if (value.toString().length > 6) {
return value.toExponential(3);
} else {
return Math.round(value * 1000) / 1000;
}
},
/**
* Formate time display
* @param {Object} time
* @return {String} Formatted time * @return {String} Formatted time
*/ */
dealrelativeTime(time) { dealrelativeTime(time) {
...@@ -510,9 +522,11 @@ export default { ...@@ -510,9 +522,11 @@ export default {
hoveredAxis.toString().length >= 6 hoveredAxis.toString().length >= 6
? yValueFormat(hoveredAxis) ? yValueFormat(hoveredAxis)
: hoveredAxis : hoveredAxis
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${( }</td><td style="text-align:center;">${this.formateNUmber(
hoveredItem.relative_time / 1000 hoveredItem.step,
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime( )}</td><td>${this.formateNUmber(
(hoveredItem.relative_time / 1000).toFixed(3),
)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time * 1000).toString(), new Date(hoveredItem.wall_time * 1000).toString(),
)}</td>`; )}</td>`;
const dom = document.querySelector('#tipTr'); const dom = document.querySelector('#tipTr');
...@@ -563,7 +577,8 @@ export default { ...@@ -563,7 +577,8 @@ export default {
20 - 20 -
offsetTop}px`; offsetTop}px`;
} }
if (width + e.event.x + 50 > screenWidth && screenWidth > width) { // Blank area on the right of the chart is 80
if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
document.querySelector('#echartTip').style.left = `${e.event.x - document.querySelector('#echartTip').style.left = `${e.event.x -
width - width -
20}px`; 20}px`;
......
...@@ -770,9 +770,11 @@ export default { ...@@ -770,9 +770,11 @@ export default {
hoveredAxis.toString().length >= 6 hoveredAxis.toString().length >= 6
? yValueFormat(hoveredAxis) ? yValueFormat(hoveredAxis)
: hoveredAxis : hoveredAxis
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${( }</td><td style="text-align:center;">${this.formateNUmber(
hoveredItem.relative_time / 1000 hoveredItem.step,
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime( )}</td><td>${this.formateNUmber(
(hoveredItem.relative_time / 1000).toFixed(3),
)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time * 1000).toString(), new Date(hoveredItem.wall_time * 1000).toString(),
)}</td>`; )}</td>`;
const dom = document.querySelector('#tipTr'); const dom = document.querySelector('#tipTr');
...@@ -816,7 +818,8 @@ export default { ...@@ -816,7 +818,8 @@ export default {
20 - 20 -
offsetTop}px`; offsetTop}px`;
} }
if (width + e.event.x + 50 > screenWidth && screenWidth > width) { // Blank area on the right of the chart is 80
if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
document.querySelector('#echartTip').style.left = `${e.event.x - document.querySelector('#echartTip').style.left = `${e.event.x -
width - width -
20}px`; 20}px`;
...@@ -1118,11 +1121,12 @@ export default { ...@@ -1118,11 +1121,12 @@ export default {
); );
const fullScreenFun = this.toggleFullScreen; const fullScreenFun = this.toggleFullScreen;
const curAxisName = this.curAxisName; const curAxisName = this.curAxisName;
const that = this;
const option = { const option = {
grid: { grid: {
left: 24, left: 24,
top: 60, top: 60,
right: 50, right: 80,
bottom: 60, bottom: 60,
}, },
xAxis: { xAxis: {
...@@ -1132,11 +1136,7 @@ export default { ...@@ -1132,11 +1136,7 @@ export default {
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) { formatter: function(value) {
if (value.toString().length >= 6) { return that.formateNUmber(value);
return value.toExponential(3);
} else {
return Math.round(value * 1000) / 1000;
}
}, },
}, },
splitLine: {show: false}, splitLine: {show: false},
...@@ -1149,6 +1149,9 @@ export default { ...@@ -1149,6 +1149,9 @@ export default {
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) {
return that.formateNUmber(value);
},
}, },
}, },
toolbox: { toolbox: {
...@@ -1222,7 +1225,6 @@ export default { ...@@ -1222,7 +1225,6 @@ export default {
option.grid.right = 140; option.grid.right = 140;
} }
option.yAxis.inverse = true; option.yAxis.inverse = true;
const that = this;
option.yAxis.axisLabel.formatter = function(value) { option.yAxis.axisLabel.formatter = function(value) {
return that.yAxisFormatter(sampleObject, value); return that.yAxisFormatter(sampleObject, value);
}; };
...@@ -1248,16 +1250,33 @@ export default { ...@@ -1248,16 +1250,33 @@ export default {
if (filter.length) { if (filter.length) {
if (this.curAxisName === 2) { if (this.curAxisName === 2) {
data = sampleObject.fullScreen data = sampleObject.fullScreen
? this.dealrelativeTime(new Date(filter[0].wall_time * 1000).toString()) ? this.dealrelativeTime(
new Date(filter[0].wall_time * 1000).toString(),
)
: []; : [];
} else if (this.curAxisName === 1) { } else if (this.curAxisName === 1) {
data = `${(filter[0].relative_time / 3600).toFixed(3)}h`; data = `${this.formateNUmber(
(filter[0].relative_time / 3600).toFixed(3),
)}h`;
} else { } else {
data = filter[0].step; data = this.formateNUmber(filter[0].step);
} }
} }
return data; return data;
}, },
/**
* Formate time display
* @param {Number} value
* @return {Number} Formatted number
*/
formateNUmber(value) {
value = Number(value);
if (value.toString().length > 6) {
return value.toExponential(3);
} else {
return Math.round(value * 1000) / 1000;
}
},
formatColor(str) { formatColor(str) {
if (!str) { if (!str) {
return; return;
...@@ -1331,7 +1350,7 @@ export default { ...@@ -1331,7 +1350,7 @@ export default {
sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#3E98C5'; '#3E98C5';
} else { } else {
sampleObject.charOption.grid.right = 40; sampleObject.charOption.grid.right = 80;
sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#6D7278'; '#6D7278';
} }
......
...@@ -98,7 +98,7 @@ limitations under the License. ...@@ -98,7 +98,7 @@ limitations under the License.
</div> </div>
<div class="sample-content" <div class="sample-content"
v-for="sampleItem in originDataArr" v-for="sampleItem in originDataArr"
:key="sampleItem.domId" :key="sampleItem.ref"
:class="sampleItem.fullScreen ? 'char-full-screen' : ''" :class="sampleItem.fullScreen ? 'char-full-screen' : ''"
v-show="sampleItem.show"> v-show="sampleItem.show">
<div class="chars-container"> <div class="chars-container">
...@@ -416,6 +416,7 @@ export default { ...@@ -416,6 +416,7 @@ export default {
*/ */
filterChange(data, sampleItem) { filterChange(data, sampleItem) {
sampleItem.filterStr = `[${data.toString()}]`; sampleItem.filterStr = `[${data.toString()}]`;
sampleItem.newDataFlag = true;
this.freshtMartixData(sampleItem); this.freshtMartixData(sampleItem);
}, },
/** /**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册