Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 3
Fork 2
M
mindinsight
提交 2ced5421 编写于 作者: P ph
浏览文件
操作

update

上级 fc88c356
隐藏空白更改
内联 并排
Showing with 447 addition and 487 deletion
mindinsight/ui/src/views/train-manage/data-map.vue
浏览文件 @ 2ced5421
...@@ -511,6 +511,7 @@ export default { ...@@ -511,6 +511,7 @@ export default {
cursor: pointer; cursor: pointer;
width: 12px; width: 12px;
height: 12px; height: 12px;
z-index: 999;
display: inline-block; display: inline-block;
background-image: url('../../assets/images/full-screen.png'); background-image: url('../../assets/images/full-screen.png');
} }
...@@ -529,7 +530,6 @@ export default { ...@@ -529,7 +530,6 @@ export default {
width: 100%; width: 100%;
} }
#sidebar { #sidebar {
top: 32px;
.node-info-con { .node-info-con {
height: calc(100% - 280px); height: calc(100% - 280px);
} }
......
mindinsight/ui/src/views/train-manage/data-traceback.vue
浏览文件 @ 2ced5421
...@@ -207,6 +207,7 @@ export default { ...@@ -207,6 +207,7 @@ export default {
}, },
// echart parallel line coordinate system // echart parallel line coordinate system
parallelEchart: null, parallelEchart: null,
deviceNum: 'device_num',
shuffleTitle: 'Shuffle', shuffleTitle: 'Shuffle',
repeatTitle: 'Repeat', repeatTitle: 'Repeat',
categoryType: 'category', categoryType: 'category',
...@@ -406,7 +407,8 @@ export default { ...@@ -406,7 +407,8 @@ export default {
const obj = {dim: i, name: content.name, id: content.id}; const obj = {dim: i, name: content.name, id: content.id};
if ( if (
content.name === this.repeatTitle || content.name === this.repeatTitle ||
content.name === this.shuffleTitle content.name === this.shuffleTitle ||
content.id === this.deviceNum
) { ) {
obj.scale = true; obj.scale = true;
obj.minInterval = 1; obj.minInterval = 1;
......
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ 2ced5421
...@@ -212,10 +212,7 @@ export default { ...@@ -212,10 +212,7 @@ export default {
} }
if (this.curPageArr.length) { if (this.curPageArr.length) {
this.curPageArr.forEach((item) => { this.curPageArr.forEach((item) => {
if (item.zr) { this.clearZrData(item);
item.zr.off('mouseout', 'mousemove');
item.zr = null;
}
}); });
} }
// Stop refreshing // Stop refreshing
...@@ -296,18 +293,15 @@ export default { ...@@ -296,18 +293,15 @@ export default {
checked: true, checked: true,
show: true, show: true,
}); });
const sampleIndex = dataList.length;
dataList.push({ dataList.push({
tagName: tagName, tagName: tagName,
sampleIndex: sampleIndex,
zr: null, zr: null,
show: false, show: false,
fullScreen: false, fullScreen: false,
domId: `${tagName}`, domId: `${tagName}`,
charData: { oriData: {},
oriData: [], charOption: {},
charOption: {}, chartData: [],
},
charObj: null, charObj: null,
}); });
} }
...@@ -356,10 +350,7 @@ export default { ...@@ -356,10 +350,7 @@ export default {
if (!noPageDataNumChange) { if (!noPageDataNumChange) {
this.curPageArr.forEach((sampleItem) => { this.curPageArr.forEach((sampleItem) => {
sampleItem.show = false; sampleItem.show = false;
if (sampleItem.zr) { this.clearZrData(sampleItem);
sampleItem.zr.off('mouseout', 'mousemove');
sampleItem.zr = null;
}
}); });
} }
// This interface is used to obtain the current page group and hide the current page group. // This interface is used to obtain the current page group and hide the current page group.
...@@ -379,28 +370,23 @@ export default { ...@@ -379,28 +370,23 @@ export default {
}, },
freshCurPageData() { freshCurPageData() {
this.curPageArr.forEach((item, index) => { this.curPageArr.forEach((item, index) => {
this.updateCurPageSamples(item.sampleIndex); if (!item || !item.tagName) {
});
},
updateCurPageSamples(sampleIndex) {
const item = this.originDataArr[sampleIndex];
if (!item || !item.tagName) {
return;
}
const params = {
train_id: this.trainingJobId,
tag: item.tagName,
};
RequestService.getHistogramData(params).then((res) => {
if (!res || !res.data) {
return; return;
} }
const data = JSON.parse(JSON.stringify(res.data)); const params = {
this.originDataArr[sampleIndex].charData.oriData = this.formOriData( train_id: this.trainingJobId,
data, tag: item.tagName,
); };
const charOption = this.formatDataToChar(sampleIndex); RequestService.getHistogramData(params).then((res) => {
this.updateSampleData(sampleIndex, charOption); if (!res || !res.data) {
return;
}
const data = JSON.parse(JSON.stringify(res.data));
item.chartData = this.formOriData(data);
this.formatDataToChar(item);
this.updateSampleData(item);
this.sampleEventBind(item);
});
}); });
}, },
/** /**
...@@ -408,9 +394,8 @@ export default { ...@@ -408,9 +394,8 @@ export default {
* @param {Number} val Current mode * @param {Number} val Current mode
*/ */
timeTypeChange(val) { timeTypeChange(val) {
this.curPageArr.forEach((k) => { this.curPageArr.forEach((item) => {
const charOption = this.formatDataToChar(k.sampleIndex); this.updateSampleData(item);
this.updateSampleData(k.sampleIndex, charOption);
}); });
}, },
/** /**
...@@ -418,9 +403,9 @@ export default { ...@@ -418,9 +403,9 @@ export default {
* @param {Number} val Current mode * @param {Number} val Current mode
*/ */
viewTypeChange(val) { viewTypeChange(val) {
this.curPageArr.forEach((k) => { this.curPageArr.forEach((item) => {
const charOption = this.formatDataToChar(k.sampleIndex); this.formatDataToChar(item);
this.updateSampleData(k.sampleIndex, charOption); this.updateSampleData(item);
}); });
}, },
/** /**
...@@ -444,10 +429,7 @@ export default { ...@@ -444,10 +429,7 @@ export default {
*/ */
clearAllData() { clearAllData() {
this.originDataArr.forEach((item) => { this.originDataArr.forEach((item) => {
if (item.zr) { this.clearZrData(item);
item.zr.off('mouseout', 'mousemove');
item.zr = null;
}
}); });
this.tagList = []; this.tagList = [];
this.originDataArr = []; this.originDataArr = [];
...@@ -574,6 +556,8 @@ export default { ...@@ -574,6 +556,8 @@ export default {
for (let i = oldSampleLength - 1; i >= 0; i--) { for (let i = oldSampleLength - 1; i >= 0; i--) {
if (!newTagDictionaries[this.originDataArr[i].tagName]) { if (!newTagDictionaries[this.originDataArr[i].tagName]) {
dataRemoveFlag = true; dataRemoveFlag = true;
this.clearZrData(this.originDataArr[i]);
this.originDataArr[i].charObj.clear();
this.originDataArr.splice(i, 1); this.originDataArr.splice(i, 1);
} }
} }
...@@ -599,18 +583,15 @@ export default { ...@@ -599,18 +583,15 @@ export default {
checked: true, checked: true,
show: false, show: false,
}); });
const sampleIndex = this.originDataArr.length;
this.originDataArr.push({ this.originDataArr.push({
tagName: tagName, tagName: tagName,
sampleIndex: sampleIndex,
zr: null, zr: null,
show: false, show: false,
fullScreen: false, fullScreen: false,
domId: `${tagName}`, domId: `${tagName}`,
charData: { oriData: {},
oriData: [], charOption: {},
charOption: {}, chartData: [],
},
charObj: null, charObj: null,
}); });
this.curFullTagDic[tagName] = true; this.curFullTagDic[tagName] = true;
...@@ -621,381 +602,369 @@ export default { ...@@ -621,381 +602,369 @@ export default {
}, },
/** /**
* update sample data * update sample data
* @param {Number} sampleIndex index * @param {Object} sampleObject sampleObject
* @param {Object} charOption data
*/ */
updateSampleData(sampleIndex, charOption) { updateSampleData(sampleObject) {
let curViewName = this.curViewName; sampleObject.charOption = this.formatCharOption(sampleObject);
const sampleObject = this.originDataArr[sampleIndex];
sampleObject.charData = sampleObject.charData
? sampleObject.charData
: {};
sampleObject.charData.charOption = this.formatCharOption(
sampleIndex,
charOption,
);
if (!sampleObject.charObj) { if (!sampleObject.charObj) {
sampleObject.charObj = echarts.init( sampleObject.charObj = echarts.init(
document.getElementById(sampleObject.domId), document.getElementById(sampleObject.domId),
null, null,
); );
} }
sampleObject.charObj.setOption(sampleObject.charData.charOption, true); this.removeTooltip(sampleObject);
sampleObject.charObj.setOption(sampleObject.charOption, true);
},
sampleEventBind(sampleObject) {
if (!sampleObject.zr) { if (!sampleObject.zr) {
sampleObject.zr = sampleObject.charObj.getZr(); sampleObject.zr = sampleObject.charObj.getZr();
sampleObject.zr.off('mouseout', 'mousemove');
sampleObject.zr.on('mouseout', (e) => {
this.removeTooltip(sampleObject);
this.chartTipFlag = false;
});
sampleObject.zr.on('mousemove', (e) => {
this.removeTooltip(sampleObject);
this.mousemoveEvent(sampleObject, e);
});
}
},
mousemoveEvent(sampleObject, e) {
const unit = 's';
const nearestIndex = this.findNearestValue(sampleObject, [
e.offsetX,
e.offsetY,
]);
if (
nearestIndex &&
nearestIndex.yIndex !== null &&
nearestIndex.binIndex !== null
) {
const {binIndex, yIndex} = nearestIndex;
const chartData = sampleObject.chartData;
const hoveredItem = chartData[yIndex];
const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1); const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
const yValueFormat = d3.format('.' + p + 'e'); const yValueFormat = d3.format(`.${p}e`);
const chartData = sampleObject.charData.oriData.chartData; const gridRect = sampleObject.charObj
const rawData = charOption.seriesData; .getModel()
/** .getComponent('grid', 0)
* get convert point .coordinateSystem.getRect();
* @param {Array} pt value const gridRectY = gridRect.y - 10;
* @return {Array} let linePoints = [];
*/ if (!hoveredItem || !hoveredItem.items[binIndex]) {
function getCoord(pt) { return;
return sampleObject.charObj.convertToPixel('grid', pt);
} }
/** if (!this.chartTipFlag) {
* find nearest value this.chartTipFlag = true;
* @param {Array} eventPoint value }
* @return {Object} if (this.curViewName === 1 && yIndex !== null) {
*/ linePoints = this.makePolyPoints(
function findNearestValue(eventPoint) { yIndex,
if ( this.getCoord,
!eventPoint || gridRectY,
!eventPoint.length || sampleObject,
!sampleObject ||
!sampleObject.charObj
) {
return;
}
const value = sampleObject.charObj.convertFromPixel(
'grid',
eventPoint,
); );
let binIndex = null; } else if (this.curViewName === 0 && hoveredItem.items) {
let yIndex = null; hoveredItem.items.forEach((item) => {
let nearestX = Infinity; linePoints.push(this.getCoord([item[2], item[3]], sampleObject));
let nearestY = -Infinity;
let nearestYData = Infinity;
if (!sampleObject.charData.oriData || !value || !value.length) {
return;
}
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
const x = value[0];
chartData.forEach((dataItem, i) => {
let distY;
let yAxis;
for (let k = 0; k < dataItem.items.length - 1; k++) {
const item = dataItem.items[k];
const itemNext = dataItem.items[k + 1];
const nextX = itemNext[2];
const nextZ = itemNext[3];
if (item.length >= 4) {
if (item[2] < x && nextX >= x) {
const proportionX = (x - item[2]) / (nextX - item[2]);
yAxis = (nextZ - item[3]) * proportionX + item[3];
distY = Math.abs(value[1] - yAxis);
break;
}
}
}
if (curViewName === 0 && distY < nearestYData) {
nearestYData = distY;
yIndex = i;
} else if (curViewName === 1) {
const pt = getCoord([x, dataItem.step]);
const ptStep = pt[1];
pt[1] -=
((yAxis - charOption.minZ) /
(charOption.maxZ - charOption.minZ)) *
gridRectY;
if (
eventPoint[1] > pt[1] &&
eventPoint[1] < ptStep &&
ptStep > nearestY
) {
nearestY = ptStep;
yIndex = i;
}
}
}); });
if (yIndex === null && curViewName === 1) { }
chartData.forEach((item, index) => {
if (item.step > value[1]) { this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({
yIndex = yIndex === null ? index : Math.min(yIndex, index); silent: true,
} shape: {
}); points: linePoints.slice(1, -1),
} },
if (yIndex !== null) { z: 999,
const yData = chartData[yIndex].items; });
yData.forEach((ele, index) => { sampleObject.zr.add(this.zrDrawElement.hoverLine);
const distX = Math.abs(ele[2] - value[0]);
if (distX < nearestX) { this.zrDrawElement.tooltip = new echarts.graphic.Text({});
nearestX = distX; let itemX;
binIndex = index; const x = hoveredItem.items[binIndex][2];
let z = 0;
chartData.forEach((dataItem, index) => {
const y = dataItem.step;
const pt = this.getCoord([x, y], sampleObject);
if (index === yIndex) {
z = hoveredItem.items[binIndex][3];
} else {
const items = dataItem.items;
for (let k = 1; k < items.length - 1; k++) {
const nextX = items[k + 1][2];
const nextZ = items[k + 1][3];
if (items[k][2] === x) {
z = items[k][3];
break;
} else if (items[k][2] < x && nextX > x) {
const proportionX = (x - items[k][2]) / (nextX - items[k][2]);
z = (nextZ - items[k][3]) * proportionX + items[k][3];
break;
} }
}); }
binIndex =
binIndex === 0
? 1
: binIndex === yData.length - 1
? yData.length - 2
: binIndex;
} }
return { itemX = pt[0];
binIndex, const circleOption = {
yIndex, z: 1000,
}; };
} if (this.curViewName === 1) {
sampleObject.zr.off('mouseout', 'mousemove'); pt[1] -=
sampleObject.zr.on('mouseout', (e) => { ((z - sampleObject.oriData.minZ) /
if (!rawData || !rawData.length) { (sampleObject.oriData.maxZ - sampleObject.oriData.minZ)) *
return; gridRectY;
circleOption.shape = {
cx: itemX,
cy: pt[1],
r: 1.5,
};
} else {
circleOption.shape = {
cx: 0,
cy: 0,
r: 1.5,
};
circleOption.position = sampleObject.charObj.convertToPixel(
'grid',
[x, z],
);
} }
this.chartTipFlag = false; const dot = new echarts.graphic.Circle(circleOption);
this.removeTooltip(sampleIndex); sampleObject.zr.add(dot);
this.zrDrawElement.hoverDots.push(dot);
}); });
sampleObject.zr.on('mousemove', (e) => { this.zrDrawElement.tooltip = new echarts.graphic.Text({});
if (!rawData || !rawData.length) {
return;
}
this.removeTooltip(sampleIndex);
curViewName = this.curViewName;
const unit = 's';
const nearestIndex = findNearestValue([e.offsetX, e.offsetY]);
if (
nearestIndex &&
nearestIndex.yIndex !== null &&
nearestIndex.binIndex !== null
) {
const {binIndex, yIndex} = nearestIndex;
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
let linePoints = [];
if (curViewName === 1 && yIndex !== null) {
linePoints = this.makePolyPoints(
yIndex,
getCoord,
gridRectY,
charOption,
);
} else if (
curViewName === 0 &&
chartData[yIndex] &&
chartData[yIndex].items
) {
chartData[yIndex].items.forEach((item) => {
linePoints.push(
sampleObject.charObj.convertToPixel('grid', [
item[2],
item[3],
]),
);
});
}
this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({
silent: true,
shape: {
points: linePoints.slice(1, -1),
},
z: 999,
});
sampleObject.zr.add(this.zrDrawElement.hoverLine);
this.zrDrawElement.tooltip = new echarts.graphic.Text({});
let itemX;
const x = chartData[yIndex].items[binIndex][2];
let z = 0;
chartData.forEach((dataItem, index) => {
const y = dataItem.step;
const pt = getCoord([x, y]);
if (index === yIndex) {
z = chartData[yIndex].items[binIndex][3];
} else {
const items = dataItem.items;
for (let k = 1; k < items.length - 1; k++) {
const nextX = items[k + 1][2];
const nextZ = items[k + 1][3];
if (items[k][2] === x) {
z = items[k][3];
break;
} else if (items[k][2] < x && nextX > x) {
const proportionX =
(x - items[k][2]) / (nextX - items[k][2]);
z = (nextZ - items[k][3]) * proportionX + items[k][3];
break;
}
}
}
itemX = pt[0];
const circleOption = {
z: 1000,
};
if (curViewName === 1) {
pt[1] -=
((z - charOption.minZ) /
(charOption.maxZ - charOption.minZ)) *
gridRectY;
circleOption.shape = {
cx: itemX,
cy: pt[1],
r: 1.5,
};
} else {
circleOption.shape = {
cx: 0,
cy: 0,
r: 1.5,
};
circleOption.position = sampleObject.charObj.convertToPixel(
'grid',
[x, z],
);
}
const dot = new echarts.graphic.Circle(circleOption);
sampleObject.zr.add(dot);
this.zrDrawElement.hoverDots.push(dot);
});
const hoveredItem = chartData[yIndex]; let htmlStr = '';
this.zrDrawElement.tooltip = new echarts.graphic.Text({}); const hoveredAxis = hoveredItem.items[binIndex][3];
if (!this.chartTipFlag) { htmlStr = `<td>${
this.chartTipFlag = true; hoveredAxis.toString().length >= 6
} ? yValueFormat(hoveredAxis)
if (!hoveredItem || !hoveredItem.items[binIndex]) { : hoveredAxis
return; }</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
} hoveredItem.relative_time / 1000
let htmlStr = ''; ).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
const hoveredAxis = hoveredItem.items[binIndex][3]; new Date(hoveredItem.wall_time).toString(),
htmlStr = `<td>${ )}</td>`;
hoveredAxis.toString().length >= 6 const dom = document.querySelector('#tipTr');
? yValueFormat(hoveredAxis) dom.innerHTML = htmlStr;
: hoveredAxis if (!sampleObject.fullScreen) {
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${( const chartWidth = document.getElementById(sampleObject.domId)
hoveredItem.relative_time / 1000 .parentNode.parentNode.clientWidth;
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime( const chartHeight = document.getElementById(sampleObject.domId)
new Date(hoveredItem.wall_time).toString(), .parentNode.parentNode.clientHeight;
)}</td>`; const left = document.getElementById(sampleObject.domId).parentNode
const dom = document.querySelector('#tipTr'); .parentNode.offsetLeft;
dom.innerHTML = htmlStr; const top = document.getElementById(sampleObject.domId).parentNode
if (!sampleObject.fullScreen) { .parentNode.offsetTop;
const chartWidth = document.querySelectorAll('.sample-content')[ const echartTip = document.querySelector('#echartTip');
sampleIndex echartTip.style.top = `${top + chartHeight - 60}px`;
].clientWidth; if (left > echartTip.clientWidth) {
const chartHeight = document.querySelectorAll('.sample-content')[ echartTip.style.left = `${left - echartTip.clientWidth}px`;
sampleIndex } else {
].clientHeight; echartTip.style.left = `${left + chartWidth}px`;
const left = document.querySelectorAll('.sample-content')[ }
sampleIndex } else {
].offsetLeft; const width = document.querySelector('#echartTip').clientWidth;
const top = document.querySelectorAll('.sample-content')[ const height = document.querySelector('#echartTip').clientHeight;
sampleIndex const screenWidth = document.body.scrollWidth;
].offsetTop; const screenHeight = document.body.scrollHeight;
const echartTip = document.querySelector('#echartTip'); const scrollTop = document.querySelector(
echartTip.style.top = `${top + chartHeight - 60}px`; '.cl-histogram-show-data-content',
if (left > echartTip.clientWidth) { ).scrollTop;
echartTip.style.left = `${left - echartTip.clientWidth}px`; const offsetTop = document.querySelector(
} else { '.cl-histogram-show-data-content',
echartTip.style.left = `${left + chartWidth}px`; ).offsetTop;
} if (height + e.event.y + 20 > screenHeight && screenHeight > height) {
} else { document.querySelector('#echartTip').style.top = `${e.event.y +
const width = document.querySelector('#echartTip').clientWidth; scrollTop -
const height = document.querySelector('#echartTip').clientHeight; height -
const screenWidth = document.body.scrollWidth; 20 -
const screenHeight = document.body.scrollHeight; offsetTop}px`;
const scrollTop = document.querySelector( } else {
'.cl-histogram-show-data-content', document.querySelector('#echartTip').style.top = `${e.event.y +
).scrollTop; scrollTop +
const offsetTop = document.querySelector( 20 -
'.cl-histogram-show-data-content', offsetTop}px`;
).offsetTop; }
if ( if (width + e.event.x + 50 > screenWidth && screenWidth > width) {
height + e.event.y + 20 > screenHeight && document.querySelector('#echartTip').style.left = `${e.event.x -
screenHeight > height width -
) { 20}px`;
document.querySelector('#echartTip').style.top = `${e.event.y + } else {
scrollTop - document.querySelector('#echartTip').style.left = `${e.event.x +
height - 20}px`;
20 - }
offsetTop}px`; }
} else {
document.querySelector('#echartTip').style.top = `${e.event.y +
scrollTop +
20 -
offsetTop}px`;
}
if (width + e.event.x + 50 > screenWidth && screenWidth > width) {
document.querySelector('#echartTip').style.left = `${e.event.x -
width -
20}px`;
} else {
document.querySelector('#echartTip').style.left = `${e.event.x +
20}px`;
}
}
this.zrDrawElement.tooltipX = new echarts.graphic.Text({ this.zrDrawElement.tooltipX = new echarts.graphic.Text({
position: [itemX, gridRect.y + gridRect.height], position: [itemX, gridRect.y + gridRect.height],
style: { style: {
text: Math.round(x * 1000) / 1000, text: Math.round(x * 1000) / 1000,
textFill: '#fff', textFill: '#fff',
textAlign: 'center', textAlign: 'center',
fontSize: 12, fontSize: 12,
textBackgroundColor: '#333', textBackgroundColor: '#333',
textBorderWidth: 2, textBorderWidth: 2,
textPadding: [5, 7], textPadding: [5, 7],
rich: {}, rich: {},
}, },
z: 2000, z: 2000,
}); });
sampleObject.zr.add(this.zrDrawElement.tooltipX); sampleObject.zr.add(this.zrDrawElement.tooltipX);
if (curViewName === 1 && linePoints && linePoints.length) { if (this.curViewName === 1 && linePoints && linePoints.length) {
let text = ''; let text = '';
if (yIndex) { if (yIndex !== null) {
text = this.yAxisFormatter(sampleIndex, yIndex); text = this.yAxisFormatter(sampleObject, hoveredItem.step);
} }
this.zrDrawElement.tooltipY = new echarts.graphic.Text({ this.zrDrawElement.tooltipY = new echarts.graphic.Text({
position: [ position: [
gridRect.x + gridRect.width, gridRect.x + gridRect.width,
linePoints[linePoints.length - 1][1], linePoints[linePoints.length - 1][1],
], ],
style: { style: {
text: text, text: text,
textFill: '#fff', textFill: '#fff',
textVerticalAlign: 'middle', textVerticalAlign: 'middle',
fontSize: 12, fontSize: 12,
textBackgroundColor: '#333', textBackgroundColor: '#333',
textBorderWidth: 2, textBorderWidth: 2,
textPadding: [5, 7], textPadding: [5, 7],
rich: {}, rich: {},
}, },
z: 2000, z: 2000,
}); });
sampleObject.zr.add(this.zrDrawElement.tooltipY); sampleObject.zr.add(this.zrDrawElement.tooltipY);
}
}
},
/**
* get convert point
* @param {Array} pt value
* @param {Object} sampleObject sampleObject
* @return {Array}
*/
getCoord(pt, sampleObject) {
return sampleObject.charObj.convertToPixel('grid', pt);
},
/**
* find nearest value
* @param {Object} sampleObject sampleObject
* @param {Array} eventPoint value
* @return {Object}
*/
findNearestValue(sampleObject, eventPoint) {
if (
!eventPoint ||
!eventPoint.length ||
!sampleObject ||
!sampleObject.charObj ||
!sampleObject.oriData
) {
return;
}
const value = sampleObject.charObj.convertFromPixel('grid', eventPoint);
if (!value || !value.length) {
return;
}
let binIndex = null;
let yIndex = null;
let nearestX = Infinity;
let nearestY = -Infinity;
let nearestYData = Infinity;
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
const x = value[0];
sampleObject.chartData.forEach((dataItem, i) => {
let distY;
let yAxis;
for (let k = 0; k < dataItem.items.length - 1; k++) {
const item = dataItem.items[k];
const itemNext = dataItem.items[k + 1];
const nextX = itemNext[2];
const nextZ = itemNext[3];
if (item.length >= 4) {
if (item[2] < x && nextX >= x) {
const proportionX = (x - item[2]) / (nextX - item[2]);
yAxis = (nextZ - item[3]) * proportionX + item[3];
distY = Math.abs(value[1] - yAxis);
break;
} }
} }
}
if (this.curViewName === 0 && distY < nearestYData) {
nearestYData = distY;
yIndex = i;
} else if (this.curViewName === 1) {
const pt = this.getCoord([x, dataItem.step], sampleObject);
const ptStep = pt[1];
pt[1] -=
((yAxis - sampleObject.oriData.minZ) /
(sampleObject.oriData.maxZ - sampleObject.oriData.minZ)) *
gridRectY;
if (
eventPoint[1] > pt[1] &&
eventPoint[1] < ptStep &&
ptStep > nearestY
) {
nearestY = ptStep;
yIndex = i;
}
}
});
if (yIndex === null && this.curViewName === 1) {
sampleObject.chartData.forEach((item, index) => {
if (index > value[1]) {
yIndex = yIndex === null ? index : Math.min(yIndex, index);
}
});
}
if (yIndex !== null) {
const yData = sampleObject.chartData[yIndex].items;
yData.forEach((ele, index) => {
const distX = Math.abs(ele[2] - value[0]);
if (distX < nearestX) {
nearestX = distX;
binIndex = index;
}
}); });
binIndex =
binIndex === 0
? 1
: binIndex === yData.length - 1
? yData.length - 2
: binIndex;
} }
return {
binIndex,
yIndex,
};
}, },
dealrelativeTime(time) { dealrelativeTime(time) {
const arr = time.split(' '); const arr = time.split(' ');
const str = arr[0] + ' ' + arr[1] + ' ' + arr[2] + ',' + ' ' + arr[4]; const str = arr[0] + ' ' + arr[1] + ' ' + arr[2] + ',' + ' ' + arr[4];
return str; return str;
}, },
clearZrData(sampleObject) {
if (sampleObject && sampleObject.zr) {
this.removeTooltip(sampleObject);
sampleObject.zr.off('mouseout', 'mousemove');
sampleObject.zr = null;
}
},
/** /**
* remove tooltip * remove tooltip
* @param {Number} sampleIndex sampleIndex * @param {Number} sampleObject sampleObject
*/ */
removeTooltip(sampleIndex) { removeTooltip(sampleObject) {
const sampleObject = this.originDataArr[sampleIndex]; if (sampleObject && sampleObject.zr) {
if (sampleObject.zr) { if (this.zrDrawElement.hoverDots) {
this.zrDrawElement.hoverDots.forEach((dot) =>
sampleObject.zr.remove(dot),
);
}
if (this.zrDrawElement.hoverLine) { if (this.zrDrawElement.hoverLine) {
sampleObject.zr.remove(this.zrDrawElement.hoverLine); sampleObject.zr.remove(this.zrDrawElement.hoverLine);
} }
...@@ -1005,15 +974,6 @@ export default { ...@@ -1005,15 +974,6 @@ export default {
if (this.zrDrawElement.tooltipY) { if (this.zrDrawElement.tooltipY) {
sampleObject.zr.remove(this.zrDrawElement.tooltipY); sampleObject.zr.remove(this.zrDrawElement.tooltipY);
} }
if (
this.zrDrawElement.hoverDots &&
this.zrDrawElement.hoverDots.length
) {
this.zrDrawElement.hoverDots.forEach((dot) =>
sampleObject.zr.remove(dot),
);
this.zrDrawElement.hoverDots.length = 0;
}
if (this.zrDrawElement.tooltipX) { if (this.zrDrawElement.tooltipX) {
sampleObject.zr.remove(this.zrDrawElement.tooltipX); sampleObject.zr.remove(this.zrDrawElement.tooltipX);
} }
...@@ -1022,16 +982,16 @@ export default { ...@@ -1022,16 +982,16 @@ export default {
getValue(seriesData, dataIndex, i) { getValue(seriesData, dataIndex, i) {
return seriesData[dataIndex][i]; return seriesData[dataIndex][i];
}, },
makePolyPoints(dataIndex, getCoord, yValueMapHeight, charOption) { makePolyPoints(dataIndex, getCoord, yValueMapHeight, sampleObject) {
const points = []; const points = [];
const rawData = charOption.seriesData; const rawData = sampleObject.oriData.seriesData;
const maxZ = charOption.maxZ; const maxZ = sampleObject.oriData.maxZ;
const minZ = charOption.minZ; const minZ = sampleObject.oriData.minZ;
for (let i = 0; i < rawData[dataIndex].length; ) { for (let i = 0; i < rawData[dataIndex].length; ) {
const x = this.getValue(rawData, dataIndex, i++); const x = this.getValue(rawData, dataIndex, i++);
const y = this.getValue(rawData, dataIndex, i++); const y = this.getValue(rawData, dataIndex, i++);
const z = this.getValue(rawData, dataIndex, i++); const z = this.getValue(rawData, dataIndex, i++);
const pt = getCoord([x, y]); const pt = getCoord([x, y], sampleObject);
// linear map in z axis // linear map in z axis
pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight; pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight;
points.push(pt); points.push(pt);
...@@ -1044,10 +1004,11 @@ export default { ...@@ -1044,10 +1004,11 @@ export default {
? dataItem.histograms[0].wall_time ? dataItem.histograms[0].wall_time
: 0; : 0;
dataItem.histograms.forEach((histogram, index) => { dataItem.histograms.forEach((histogram, index) => {
const step = histogram.step.toString();
const chartItem = { const chartItem = {
wall_time: histogram.wall_time, wall_time: histogram.wall_time,
relative_time: histogram.wall_time - wallTimeInit, relative_time: histogram.wall_time - wallTimeInit,
step: `${histogram.step}`, step: step,
items: [], items: [],
}; };
const chartArr = []; const chartArr = [];
...@@ -1057,7 +1018,7 @@ export default { ...@@ -1057,7 +1018,7 @@ export default {
if (!filter.length) { if (!filter.length) {
chartArr.push([ chartArr.push([
histogram.wall_time, histogram.wall_time,
`${histogram.step}`, step,
xData, xData,
Math.floor(bucket[2]), Math.floor(bucket[2]),
]); ]);
...@@ -1068,32 +1029,26 @@ export default { ...@@ -1068,32 +1029,26 @@ export default {
const minItem = chartArr[0][2]; const minItem = chartArr[0][2];
const maxItem = chartArr[chartArr.length - 1][2]; const maxItem = chartArr[chartArr.length - 1][2];
const chartAll = [ const chartAll = [
[histogram.wall_time, `${histogram.step}`, minItem, 0], [histogram.wall_time, step, minItem, 0],
].concat(chartArr, [ ].concat(chartArr, [[histogram.wall_time, step, maxItem, 0]]);
[histogram.wall_time, `${histogram.step}`, maxItem, 0],
]);
chartItem.items = chartAll; chartItem.items = chartAll;
chartData.push(chartItem); chartData.push(chartItem);
} }
}); });
return {tag: dataItem.tag, train_id: dataItem.train_id, chartData}; return chartData;
}, },
formatDataToChar(dataIndex) { formatDataToChar(item) {
const dataItem = this.originDataArr[dataIndex].charData.oriData; const chartData = item.chartData;
const seriesData = []; const seriesData = [];
let maxStep = -Infinity;
let minStep = Infinity;
let maxX = -Infinity; let maxX = -Infinity;
let minX = Infinity; let minX = Infinity;
let maxZ = -Infinity; let maxZ = -Infinity;
let minZ = Infinity; let minZ = Infinity;
const girdData = []; const gridData = [];
if (dataItem.chartData && dataItem.chartData.length) { if (chartData && chartData.length) {
dataItem.chartData.forEach((histogram) => { chartData.forEach((histogram) => {
const seriesItem = []; const seriesItem = [];
girdData.push(histogram.step); gridData.push(histogram.step);
maxStep = Math.max(maxStep, histogram.step);
minStep = Math.min(minStep, histogram.step);
histogram.items.forEach((bucket) => { histogram.items.forEach((bucket) => {
if (this.curViewName === 0) { if (this.curViewName === 0) {
seriesItem.push([bucket[2], bucket[3]]); seriesItem.push([bucket[2], bucket[3]]);
...@@ -1108,26 +1063,24 @@ export default { ...@@ -1108,26 +1063,24 @@ export default {
seriesData.push(seriesItem); seriesData.push(seriesItem);
}); });
} }
return { item.oriData = {
seriesData, seriesData,
maxStep,
minStep,
maxX, maxX,
minX, minX,
maxZ, maxZ,
minZ, minZ,
girdData, gridData,
}; };
}, },
formatCharOption(sampleIndex, charOption) { formatCharOption(sampleObject) {
const colorMin = '#346E69'; const colorMin = '#346E69';
const colorMax = '#EBFFFD'; const colorMax = '#EBFFFD';
const oriData = sampleObject.oriData;
const colorArr = this.getGrientColor( const colorArr = this.getGrientColor(
colorMin, colorMin,
colorMax, colorMax,
charOption.seriesData.length, oriData.seriesData.length,
); );
const sampleObject = this.originDataArr[sampleIndex];
const fullScreenFun = this.toggleFullScreen; const fullScreenFun = this.toggleFullScreen;
const curAxisName = this.curAxisName; const curAxisName = this.curAxisName;
const option = { const option = {
...@@ -1138,13 +1091,13 @@ export default { ...@@ -1138,13 +1091,13 @@ export default {
bottom: 60, bottom: 60,
}, },
xAxis: { xAxis: {
max: charOption.maxX, max: oriData.maxX,
min: charOption.minX, min: oriData.minX,
axisLine: {onZero: false}, axisLine: {onZero: false},
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) { formatter: function(value) {
if (value.toString().length > 6) { if (value.toString().length >= 6) {
return value.toExponential(3); return value.toExponential(3);
} else { } else {
return Math.round(value * 1000) / 1000; return Math.round(value * 1000) / 1000;
...@@ -1158,6 +1111,7 @@ export default { ...@@ -1158,6 +1111,7 @@ export default {
axisLine: {onZero: false, show: false}, axisLine: {onZero: false, show: false},
splitLine: {show: true}, splitLine: {show: true},
axisTick: {show: false}, axisTick: {show: false},
boundaryGap: false,
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
}, },
...@@ -1181,7 +1135,7 @@ export default { ...@@ -1181,7 +1135,7 @@ export default {
}, },
icon: CommonProperty.fullScreenIcon, icon: CommonProperty.fullScreenIcon,
onclick() { onclick() {
fullScreenFun(sampleIndex); fullScreenFun(sampleObject);
}, },
}, },
}, },
...@@ -1189,7 +1143,7 @@ export default { ...@@ -1189,7 +1143,7 @@ export default {
}; };
if (this.curViewName === 1) { if (this.curViewName === 1) {
const seriesData = []; const seriesData = [];
charOption.seriesData.forEach((item, dataIndex) => { oriData.seriesData.forEach((item, dataIndex) => {
const dataItem = { const dataItem = {
name: item[1], name: item[1],
value: item, value: item,
...@@ -1208,7 +1162,7 @@ export default { ...@@ -1208,7 +1162,7 @@ export default {
params.dataIndex, params.dataIndex,
api.coord, api.coord,
params.coordSys.y - 10, params.coordSys.y - 10,
charOption, sampleObject,
); );
return { return {
...@@ -1226,7 +1180,7 @@ export default { ...@@ -1226,7 +1180,7 @@ export default {
data: seriesData, data: seriesData,
}, },
]; ];
option.yAxis.data = charOption.girdData; option.yAxis.data = oriData.gridData;
option.yAxis.type = 'category'; option.yAxis.type = 'category';
option.grid.top = 126; option.grid.top = 126;
if (curAxisName === 2 && sampleObject.fullScreen) { if (curAxisName === 2 && sampleObject.fullScreen) {
...@@ -1235,12 +1189,12 @@ export default { ...@@ -1235,12 +1189,12 @@ export default {
option.yAxis.inverse = true; option.yAxis.inverse = true;
const that = this; const that = this;
option.yAxis.axisLabel.formatter = function(value) { option.yAxis.axisLabel.formatter = function(value) {
return that.yAxisFormatter(sampleIndex, value); return that.yAxisFormatter(sampleObject, value);
}; };
} else if (this.curViewName === 0) { } else if (this.curViewName === 0) {
option.color = colorArr; option.color = colorArr;
option.series = []; option.series = [];
charOption.seriesData.forEach((k) => { oriData.seriesData.forEach((k) => {
option.series.push({ option.series.push({
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
...@@ -1253,12 +1207,9 @@ export default { ...@@ -1253,12 +1207,9 @@ export default {
} }
return option; return option;
}, },
yAxisFormatter(sampleIndex, value) { yAxisFormatter(sampleObject, value) {
const sampleObject = this.originDataArr[sampleIndex];
let data = ''; let data = '';
const filter = sampleObject.charData.oriData.chartData.filter( const filter = sampleObject.chartData.filter((k) => k.step === value);
(k) => k.step === value,
);
if (filter.length) { if (filter.length) {
if (this.curAxisName === 2) { if (this.curAxisName === 2) {
data = sampleObject.fullScreen data = sampleObject.fullScreen
...@@ -1332,22 +1283,21 @@ export default { ...@@ -1332,22 +1283,21 @@ export default {
} }
return colorResult; return colorResult;
}, },
toggleFullScreen(sampleIndex) { toggleFullScreen(sampleObject) {
const sampleObject = this.originDataArr[sampleIndex];
if (!sampleObject) { if (!sampleObject) {
return; return;
} }
this.removeTooltip(sampleIndex); this.removeTooltip(sampleObject);
sampleObject.fullScreen = !sampleObject.fullScreen; sampleObject.fullScreen = !sampleObject.fullScreen;
if (sampleObject.fullScreen) { if (sampleObject.fullScreen) {
if (this.curAxisName === 2) { if (this.curAxisName === 2) {
sampleObject.charObj.setOption({grid: {right: 140}}); sampleObject.charObj.setOption({grid: {right: 140}});
} }
sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#3E98C5'; '#3E98C5';
} else { } else {
sampleObject.charObj.setOption({grid: {right: 40}}); sampleObject.charObj.setOption({grid: {right: 40}});
sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
'#6D7278'; '#6D7278';
} }
setTimeout(() => { setTimeout(() => {
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ 2ced5421
...@@ -149,6 +149,7 @@ export default { ...@@ -149,6 +149,7 @@ export default {
'test_dataset_count', 'test_dataset_count',
'epoch', 'epoch',
'batch_size', 'batch_size',
'device_num',
], // All keys whose values are int ], // All keys whose values are int
echart: { echart: {
chart: null, chart: null,
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ 2ced5421
...@@ -21,6 +21,12 @@ limitations under the License. ...@@ -21,6 +21,12 @@ limitations under the License.
<div class="cl-dashboard-top-title"> <div class="cl-dashboard-top-title">
{{$t('trainingDashboard.trainingDashboardTitle')}} {{$t('trainingDashboard.trainingDashboardTitle')}}
</div> </div>
<div class="path-message">
<span>{{$t("symbols.leftbracket")}}</span>
<span>{{$t("trainingDashboard.summaryDirPath")}}</span>
<span>{{summaryPath}}</span>
<span>{{$t("symbols.rightbracket")}}</span>
</div>
</div> </div>
<div class="cl-dashboard-center"> <div class="cl-dashboard-center">
<div class="cl-dashboard-con-up" <div class="cl-dashboard-con-up"
...@@ -166,12 +172,14 @@ export default { ...@@ -166,12 +172,14 @@ export default {
return { return {
// training job id // training job id
trainingJobId: '', trainingJobId: '',
summaryPath: '',
defColorCount: CommonProperty.commonColorArr.length, // default color defColorCount: CommonProperty.commonColorArr.length, // default color
colorNum: 0, colorNum: 0,
charObj: null, charObj: null,
histogramObj: null, histogramObj: null,
histogramOption: {}, histogramOption: {},
histogramData: {}, histogramData: [],
histogramOriData: {},
charOption: {}, charOption: {},
charData: [], charData: [],
originImageDataArr: [], // List of all image data. originImageDataArr: [], // List of all image data.
...@@ -283,6 +291,7 @@ export default { ...@@ -283,6 +291,7 @@ export default {
init() { init() {
if (this.$route.query && this.$route.query.id) { if (this.$route.query && this.$route.query.id) {
this.trainingJobId = this.$route.query.id; this.trainingJobId = this.$route.query.id;
this.summaryPath = decodeURIComponent(this.trainingJobId);
} else { } else {
this.trainingJobId = ''; this.trainingJobId = '';
this.$message.error(this.$t('trainingDashboard.invalidId')); this.$message.error(this.$t('trainingDashboard.invalidId'));
...@@ -795,19 +804,20 @@ export default { ...@@ -795,19 +804,20 @@ export default {
) { ) {
return; return;
} }
const data = res.data; const data = JSON.parse(JSON.stringify(res.data));
this.histogramTag = histogramTag; this.histogramTag = histogramTag;
this.histogramData = this.formOriData(data); this.histogramData = this.formOriData(data);
const charOption = this.formatDataToChar(); this.formatDataToChar();
this.updateHistogramSampleData(charOption); this.updateHistogramSampleData();
}); });
}, },
formOriData(dataItem) { formOriData(dataItem) {
const chartData = []; const chartData = [];
dataItem.histograms.forEach((histogram, index) => { dataItem.histograms.forEach((histogram, index) => {
const step = histogram.step.toString();
const chartItem = { const chartItem = {
wall_time: histogram.wall_time, wall_time: histogram.wall_time,
step: `${histogram.step}`, step: step,
items: [], items: [],
}; };
const chartArr = []; const chartArr = [];
...@@ -817,7 +827,7 @@ export default { ...@@ -817,7 +827,7 @@ export default {
if (!filter.length) { if (!filter.length) {
chartArr.push([ chartArr.push([
histogram.wall_time, histogram.wall_time,
`${histogram.step}`, step,
xData, xData,
Math.floor(bucket[2]), Math.floor(bucket[2]),
]); ]);
...@@ -828,33 +838,26 @@ export default { ...@@ -828,33 +838,26 @@ export default {
const minItem = chartArr[0][2]; const minItem = chartArr[0][2];
const maxItem = chartArr[chartArr.length - 1][2]; const maxItem = chartArr[chartArr.length - 1][2];
const chartAll = [ const chartAll = [
[histogram.wall_time, `${histogram.step}`, minItem, 0], [histogram.wall_time, step, minItem, 0],
].concat(chartArr, [ ].concat(chartArr, [[histogram.wall_time, step, maxItem, 0]]);
[histogram.wall_time, `${histogram.step}`, maxItem, 0],
]);
chartItem.items = chartAll; chartItem.items = chartAll;
chartData.push(chartItem); chartData.push(chartItem);
} }
}); });
return {tag: dataItem.tag, train_id: dataItem.train_id, chartData}; return chartData;
}, },
formatDataToChar() { formatDataToChar() {
const dataItem = this.histogramData; const chartData = this.histogramData;
const seriesData = []; const seriesData = [];
let maxStep = -Infinity;
let minStep = Infinity;
let maxX = -Infinity; let maxX = -Infinity;
let minX = Infinity; let minX = Infinity;
let maxZ = -Infinity; let maxZ = -Infinity;
let minZ = Infinity; let minZ = Infinity;
const gridData = []; const gridData = [];
if (dataItem.chartData && dataItem.chartData.length) { if (chartData && chartData.length) {
dataItem.chartData.forEach((histogram) => { chartData.forEach((histogram) => {
const seriesItem = []; const seriesItem = [];
gridData.push(histogram.step); gridData.push(histogram.step);
maxStep = Math.max(maxStep, histogram.step);
minStep = Math.min(minStep, histogram.step);
histogram.items.sort((a, b) => a[0] - b[0]);
histogram.items.forEach((bucket) => { histogram.items.forEach((bucket) => {
seriesItem.push(bucket[2], histogram.step, bucket[3]); seriesItem.push(bucket[2], histogram.step, bucket[3]);
maxX = Math.max(maxX, bucket[2]); maxX = Math.max(maxX, bucket[2]);
...@@ -865,10 +868,8 @@ export default { ...@@ -865,10 +868,8 @@ export default {
seriesData.push(seriesItem); seriesData.push(seriesItem);
}); });
} }
return { this.histogramOriData = {
seriesData, seriesData,
maxStep,
minStep,
maxX, maxX,
minX, minX,
maxZ, maxZ,
...@@ -876,16 +877,17 @@ export default { ...@@ -876,16 +877,17 @@ export default {
gridData, gridData,
}; };
}, },
formatCharOption(charOption) { formatCharOption() {
const colorMin = '#346E69'; const colorMin = '#346E69';
const colorMax = '#EBFFFD'; const colorMax = '#EBFFFD';
const oriData = this.histogramOriData;
const colorArr = this.getGrientColor( const colorArr = this.getGrientColor(
colorMin, colorMin,
colorMax, colorMax,
charOption.seriesData.length, oriData.seriesData.length,
); );
const seriesData = []; const seriesData = [];
charOption.seriesData.forEach((item, dataIndex) => { oriData.seriesData.forEach((item, dataIndex) => {
const dataItem = { const dataItem = {
name: item[1], name: item[1],
value: item, value: item,
...@@ -903,13 +905,13 @@ export default { ...@@ -903,13 +905,13 @@ export default {
bottom: 43, bottom: 43,
}, },
xAxis: { xAxis: {
max: charOption.maxX, max: oriData.maxX,
min: charOption.minX, min: oriData.minX,
axisLine: {onZero: false}, axisLine: {onZero: false},
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function(value) { formatter: function(value) {
if (value.toString().length > 6) { if (value.toString().length >= 6) {
return value.toExponential(3); return value.toExponential(3);
} else { } else {
return Math.round(value * 1000) / 1000; return Math.round(value * 1000) / 1000;
...@@ -925,6 +927,7 @@ export default { ...@@ -925,6 +927,7 @@ export default {
splitLine: {show: true}, splitLine: {show: true},
inverse: true, inverse: true,
axisTick: {show: false}, axisTick: {show: false},
boundaryGap: false,
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
}, },
...@@ -938,7 +941,6 @@ export default { ...@@ -938,7 +941,6 @@ export default {
params.dataIndex, params.dataIndex,
api.coord, api.coord,
params.coordSys.y - 10, params.coordSys.y - 10,
charOption,
); );
return { return {
...@@ -1021,10 +1023,9 @@ export default { ...@@ -1021,10 +1023,9 @@ export default {
}, },
/** /**
* update sample data * update sample data
* @param {Object} charOption data
*/ */
updateHistogramSampleData(charOption) { updateHistogramSampleData() {
this.histogramOption = this.formatCharOption(charOption); this.histogramOption = this.formatCharOption();
setTimeout(() => { setTimeout(() => {
if (!this.histogramObj) { if (!this.histogramObj) {
this.histogramObj = echarts.init( this.histogramObj = echarts.init(
...@@ -1038,11 +1039,11 @@ export default { ...@@ -1038,11 +1039,11 @@ export default {
getValue(seriesData, dataIndex, i) { getValue(seriesData, dataIndex, i) {
return seriesData[dataIndex][i]; return seriesData[dataIndex][i];
}, },
makePolyPoints(dataIndex, getCoord, yValueMapHeight, charOption) { makePolyPoints(dataIndex, getCoord, yValueMapHeight) {
const points = []; const points = [];
const rawData = charOption.seriesData; const rawData = this.histogramOriData.seriesData;
const maxZ = charOption.maxZ; const maxZ = this.histogramOriData.maxZ;
const minZ = charOption.minZ; const minZ = this.histogramOriData.minZ;
for (let i = 0; i < rawData[dataIndex].length; ) { for (let i = 0; i < rawData[dataIndex].length; ) {
const x = this.getValue(rawData, dataIndex, i++); const x = this.getValue(rawData, dataIndex, i++);
const y = this.getValue(rawData, dataIndex, i++); const y = this.getValue(rawData, dataIndex, i++);
...@@ -1727,6 +1728,12 @@ export default { ...@@ -1727,6 +1728,12 @@ export default {
height: 56px; height: 56px;
vertical-align: middle; vertical-align: middle;
background: #ffffff; background: #ffffff;
.path-message {
display: inline-block;
line-height: 20px;
padding: 18px 16px;
font-weight: bold;
}
.cl-dashboard-top-title { .cl-dashboard-top-title {
float: left; float: left;
color: #000000; color: #000000;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或