|
|
@@ -20,6 +20,13 @@ class IndicatorView extends React.Component {
|
|
|
}
|
|
|
|
|
|
autoLayout = () => {
|
|
|
+ const { chartOption } = this.props;
|
|
|
+ const { data } = chartOption;
|
|
|
+ if(!data || data.length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let extraRowCount = data[0].others.length;
|
|
|
+ let cardMinHeight = extraRowCount === 0 ? 100 : (100 + 10 + (extraRowCount-1) * 21);
|
|
|
let container = this.containerRef;
|
|
|
if(!container) return;
|
|
|
let body = container.getElementsByClassName('indicator-body')[0];
|
|
|
@@ -30,14 +37,14 @@ class IndicatorView extends React.Component {
|
|
|
let maxColNum = cardCount > 4 ? 4 : cardCount; // 列数
|
|
|
let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
|
|
|
let cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
- cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
+ cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
|
|
|
let inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
let cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
while(cardWidth < 180 && maxColNum > 1) {
|
|
|
maxColNum--;
|
|
|
maxRowNum = Math.ceil(cardCount / maxColNum);
|
|
|
cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
- cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
+ cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
|
|
|
inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
}
|
|
|
@@ -45,7 +52,7 @@ class IndicatorView extends React.Component {
|
|
|
maxColNum++;
|
|
|
maxRowNum = Math.ceil(cardCount / maxColNum);
|
|
|
cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
- cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
+ cardHeight = cardHeight < cardMinHeight ? cardMinHeight : cardHeight;
|
|
|
inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
}
|