总体统计图数值格式化/统一图表gridposition自适应逻辑

src/components/chartDesigner/charts/aggregateTableView.jsx

@@ -34,7 +34,7 @@ class AggregateTableView extends React.Component {
 
     // 无分组
     createTableBodyInNoGroups = (chartOption) => {
-        const { targetColumn, direction, group1Name, group2Name, group1s, group2s, statistics, data } = chartOption;
+        const { targetColumn, direction, statistics, data } = chartOption;
         if(direction === 'vertical') {
             return <tbody>
                 <tr>
@@ -63,7 +63,7 @@ class AggregateTableView extends React.Component {
 
     // 有一个分组
     createTableBodyInOneGroups = (chartOption) => {
-        const { targetColumn, direction, group1Name, group2Name, group1s, group2s, statistics, data } = chartOption;
+        const { targetColumn, direction, group1s, statistics, data } = chartOption;
         if(direction === 'vertical') {
             return <tbody>
                 <tr>
@@ -104,7 +104,7 @@ class AggregateTableView extends React.Component {
 
     // 有两个分组
     createTableBodyInTwoGroups = (chartOption) => {
-        const { targetColumn, direction, group1Name, group2Name, group1s, group2s, statistics, data } = chartOption;
+        const { targetColumn, direction, group1Name, group1s, group2s, statistics, data } = chartOption;
         if(direction === 'vertical') {
             return <tbody>
                 <tr>
@@ -116,8 +116,8 @@ class AggregateTableView extends React.Component {
                 </tr>
                 {
                     group2s.map((g2, idx2) => {
-                        return statistics.map((s, i) => <tr key={i}>
-                            { i === 0 && <td rowSpan={`${statistics.length}`}>{g2}</td>}
+                        return statistics.map((s, si) => <tr key={si}>
+                            { si === 0 && <td rowSpan={`${statistics.length}`}>{g2}</td>}
                             <td>{s.label}</td>
                             {group1s.map((g1, idx1) => {
                                 let values = data[idx1].data[idx2];
@@ -137,7 +137,7 @@ class AggregateTableView extends React.Component {
                 { group2s.map((g, i) => <td colSpan={statistics.length} key={i}>{g}</td>) }
             </tr>
             <tr>
-                { group2s.map((g, i) => statistics.map(s => <td key={i}>{s.label}</td>)) }
+                { group2s.map((g, gi) => statistics.map((s, si) => <td key={`${gi}-${si}`}>{s.label}</td>)) }
             </tr>
             {
                 data.map((d1, d1i) => {

src/components/chartDesigner/sections/style/bar.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
+import adapteGridPosition from '../../../../models/adapteGridPosition'
 const FormItem = Form.Item;
 
 class BarStyle extends React.Component {
@@ -35,25 +36,20 @@ class BarStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { gridPosition: { top: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         top: (value && value !== 'auto') ? ( // 已设置图域上边距
                                             value
-                                        ) : ( // 未设置图域上边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? 50 // 已知图例上边距未设置
-                                                    : ( // 图例上边距已设置
-                                                        (legendTop+'').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域左边距增加10%
-                                                        : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                                    )
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.top,
                                     } }) },
                                 ] });
                             }}
@@ -69,28 +65,20 @@ class BarStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendBottom = chartOption.legend.bottom;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { gridPosition: { bottom: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         bottom: (value && value !== 'auto') ? ( // 已设置图域下边距
                                             value
-                                        ) : ( // 未设置图域下边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? ( // 图例上边距未设置
-                                                        legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                        : ( // 图例下边距已设置
-                                                            (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                            : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                        )
-                                                    ) : 50
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -106,28 +94,20 @@ class BarStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendLeft = chartOption.legend.left,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { gridPosition: { left: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         left: (value && value !== 'auto') ? ( // 已设置图域左边距
                                             value
-                                        ) : ( // 未设置图域左边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                        legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                        : '5%' // 图例右边距已设置
-                                                    ) : ( // 图例左边距已设置
-                                                        (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                        : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                                    )
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        ),
+                                        ) : gridPosition.left,
                                     } }) },
                                 ] });
                             }}
@@ -143,28 +123,20 @@ class BarStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { gridPosition: { right: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         right: (value !== '' && value !== 'auto') ? ( // 已设置图域右边距
                                             value
-                                        ) : ( // 未设置图域右边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendTop === 'auto' ? ( // 图例左边距未设置
-                                                        legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                        : ( // 图例右边距已设置
-                                                            (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                            : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                        )
-                                                    ) : '5%'
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        )
+                                        ) : gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -611,67 +583,21 @@ class BarStyle extends React.Component {
                             checked={!!barStyle.legendHidden}
                             onChange={e => {
                                 let checked = e.target.checked;
-                                let legendOrient = barStyle.legendOrient || 'vertical',
-                                    legendLeft = barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop = barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionLeft = checked ? '5%' : ( // 隐藏图例直接将图域左边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ),
-                                    gridPositionRight = checked ? '5%' : ( // 隐藏图例直接将图域右边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? (
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ),
-                                    gridPositionTop = checked ? 50:  ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ),
-                                    gridPositionBottom = checked ? 50 : ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    );
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: checked,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendHidden: checked, gridPosition: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
-                                    } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendHidden: checked } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
+                                        left: gridPosition.left,
+                                        right: gridPosition.right,
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -697,9 +623,25 @@ class BarStyle extends React.Component {
                 <Select
                     defaultValue={barStyle.legendOrient || 'vertical'}
                     onChange={(value, item) => {
+                        let gridPosition = adapteGridPosition({
+                            legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                            legendOrient: value,
+                            legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                            legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                            legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                            legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                        });
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendOrient: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { orient: value } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                legend: { orient: value },
+                                grid: {
+                                    top: gridPosition.top,
+                                    left: gridPosition.left,
+                                    bottom: gridPosition.bottom,
+                                    right: gridPosition.right,
+                                },
+                            }) },
                         ] });
                     }}
                 >
@@ -716,27 +658,22 @@ class BarStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = barStyle.legendHidden,
-                                    legendOrient = barStyle.legendOrient || 'vertical',
-                                    legendTop = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    legendBottom = barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionTop = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendTop = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { top: value}, gridPosition: { top: gridPositionTop } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { top: value}, gridPosition: { top: gridPosition.top } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         top: legendTop,
                                     }, grid: {
-                                        top: gridPositionTop
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -751,27 +688,22 @@ class BarStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = barStyle.legendHidden,
-                                    legendOrient = barStyle.legendOrient || 'vertical',
-                                    legendTop = barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    gridPositionBottom = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendBottom = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPositionBottom } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPosition.bottom } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         bottom: legendBottom
                                     }, grid: {
-                                        bottom: gridPositionBottom
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom
                                     } }) },
                                 ] });
                             }}
@@ -786,27 +718,22 @@ class BarStyle extends React.Component {
                             placeholder='auto'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = barStyle.legendHidden,
-                                    legendOrient = barStyle.legendOrient || 'vertical',
-                                    legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value,
-                                    legendRight = barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
-                                    gridPositionLeft = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft,
+                                    legendRight: barStyle.legendPosition ? barStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { left: value }, gridPosition: { left: gridPositionLeft } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { left: value }, gridPosition: { left: gridPosition.left } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft
+                                        left: legendLeft,
                                     }, grid: {
-                                        left: gridPositionLeft
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -821,27 +748,22 @@ class BarStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = barStyle.legendHidden,
-                                    legendOrient = barStyle.legendOrient || 'vertical',
-                                    legendLeft = barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = (value === '' || value === null || value === undefined) ? '5%' : value,
-                                    gridPositionRight = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 图例左边距未设置
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendRight = (value === '' || value === null || value === undefined) ? '5%' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? barStyle.legendHidden : true,
+                                    legendOrient: barStyle.legendOrient || 'vertical',
+                                    legendLeft: barStyle.legendPosition ? barStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight,
+                                    legendTop: barStyle.legendPosition ? barStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: barStyle.legendPosition ? barStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { right: value}, gridPosition: { right: gridPositionRight } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendPosition: { right: value}, gridPosition: { right: gridPosition.right } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         right: legendRight
                                     }, grid: {
-                                        right: gridPositionRight
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}

src/components/chartDesigner/sections/style/line.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
+import adapteGridPosition from '../../../../models/adapteGridPosition'
 const FormItem = Form.Item;
 
 class LineStyle extends React.Component {
@@ -35,25 +36,20 @@ class LineStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { line: { gridPosition: { top: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         top: (value && value !== 'auto') ? ( // 已设置图域上边距
                                             value
-                                        ) : ( // 未设置图域上边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? 50 // 已知图例上边距未设置
-                                                    : ( // 图例上边距已设置
-                                                        (legendTop+'').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域左边距增加10%
-                                                        : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                                    )
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.top,
                                     } }) },
                                 ] });
                             }}
@@ -69,28 +65,20 @@ class LineStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendBottom = chartOption.legend.bottom;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { line: { gridPosition: { bottom: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         bottom: (value && value !== 'auto') ? ( // 已设置图域下边距
                                             value
-                                        ) : ( // 未设置图域下边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? ( // 图例上边距未设置
-                                                        legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                        : ( // 图例下边距已设置
-                                                            (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                            : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                        )
-                                                    ) : 50
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -106,28 +94,20 @@ class LineStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendLeft = chartOption.legend.left,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { line: { gridPosition: { left: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         left: (value && value !== 'auto') ? ( // 已设置图域左边距
                                             value
-                                        ) : ( // 未设置图域左边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                        legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                        : '5%' // 图例右边距已设置
-                                                    ) : ( // 图例左边距已设置
-                                                        (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                        : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                                    )
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        ),
+                                        ) : gridPosition.left,
                                     } }) },
                                 ] });
                             }}
@@ -143,28 +123,20 @@ class LineStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { line: { gridPosition: { right: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         right: (value !== '' && value !== 'auto') ? ( // 已设置图域右边距
                                             value
-                                        ) : ( // 未设置图域右边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendTop === 'auto' ? ( // 图例左边距未设置
-                                                        legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                        : ( // 图例右边距已设置
-                                                            (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                            : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                        )
-                                                    ) : '5%'
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        )
+                                        ) : gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -527,67 +499,21 @@ class LineStyle extends React.Component {
                             checked={!!lineStyle.legendHidden}
                             onChange={e => {
                                 let checked = e.target.checked;
-                                let legendOrient = lineStyle.legendOrient || 'vertical',
-                                    legendLeft = lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop = lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionLeft = checked ? '5%' : ( // 隐藏图例直接将图域左边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ),
-                                    gridPositionRight = checked ? '5%' : ( // 隐藏图例直接将图域右边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? (
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ),
-                                    gridPositionTop = checked ? 50:  ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ),
-                                    gridPositionBottom = checked ? 50 : ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    );
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: checked,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendHidden: checked, gridPosition: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
-                                    } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendHidden: checked } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
+                                        left: gridPosition.left,
+                                        right: gridPosition.right,
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -613,9 +539,25 @@ class LineStyle extends React.Component {
                 <Select
                     defaultValue={lineStyle.legendOrient || 'vertical'}
                     onChange={(value, item) => {
+                        let gridPosition = adapteGridPosition({
+                            legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                            legendOrient: value,
+                            legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                            legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                            legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                            legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                        });
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendOrient: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { orient: value } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                legend: { orient: value },
+                                grid: {
+                                    top: gridPosition.top,
+                                    left: gridPosition.left,
+                                    bottom: gridPosition.bottom,
+                                    right: gridPosition.right,
+                                },
+                            }) },
                         ] });
                     }}
                 >
@@ -632,27 +574,22 @@ class LineStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = lineStyle.legendHidden,
-                                    legendOrient = lineStyle.legendOrient || 'vertical',
-                                    legendTop = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    legendBottom = lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionTop = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendTop = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { top: value}, gridPosition: { top: gridPositionTop } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { top: value}, gridPosition: { top: gridPosition.top } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         top: legendTop,
                                     }, grid: {
-                                        top: gridPositionTop
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -667,27 +604,22 @@ class LineStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = lineStyle.legendHidden,
-                                    legendOrient = lineStyle.legendOrient || 'vertical',
-                                    legendTop = lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    gridPositionBottom = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendBottom = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPositionBottom } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPosition.bottom } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         bottom: legendBottom
                                     }, grid: {
-                                        bottom: gridPositionBottom
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom
                                     } }) },
                                 ] });
                             }}
@@ -702,27 +634,22 @@ class LineStyle extends React.Component {
                             placeholder='auto'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = lineStyle.legendHidden,
-                                    legendOrient = lineStyle.legendOrient || 'vertical',
-                                    legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value,
-                                    legendRight = lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
-                                    gridPositionLeft = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft,
+                                    legendRight: lineStyle.legendPosition ? lineStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { left: value }, gridPosition: { left: gridPositionLeft } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { left: value }, gridPosition: { left: gridPosition.left } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft
+                                        left: legendLeft,
                                     }, grid: {
-                                        left: gridPositionLeft
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -737,27 +664,22 @@ class LineStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = lineStyle.legendHidden,
-                                    legendOrient = lineStyle.legendOrient || 'vertical',
-                                    legendLeft = lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = (value === '' || value === null || value === undefined) ? '5%' : value,
-                                    gridPositionRight = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 图例左边距未设置
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendRight = (value === '' || value === null || value === undefined) ? '5%' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? lineStyle.legendHidden : true,
+                                    legendOrient: lineStyle.legendOrient || 'vertical',
+                                    legendLeft: lineStyle.legendPosition ? lineStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight,
+                                    legendTop: lineStyle.legendPosition ? lineStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: lineStyle.legendPosition ? lineStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { right: value}, gridPosition: { right: gridPositionRight } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendPosition: { right: value}, gridPosition: { right: gridPosition.right } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         right: legendRight
                                     }, grid: {
-                                        right: gridPositionRight
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}

src/components/chartDesigner/sections/style/scatter.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
+import adapteGridPosition from '../../../../models/adapteGridPosition'
 const FormItem = Form.Item;
 
 class ScatterStyle extends React.Component {
@@ -35,25 +36,20 @@ class ScatterStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { top: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         top: (value && value !== 'auto') ? ( // 已设置图域上边距
                                             value
-                                        ) : ( // 未设置图域上边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? 50 // 已知图例上边距未设置
-                                                    : ( // 图例上边距已设置
-                                                        (legendTop+'').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域左边距增加10%
-                                                        : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                                    )
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.top,
                                     } }) },
                                 ] });
                             }}
@@ -69,28 +65,20 @@ class ScatterStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendBottom = chartOption.legend.bottom;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { bottom: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         bottom: (value && value !== 'auto') ? ( // 已设置图域下边距
                                             value
-                                        ) : ( // 未设置图域下边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                                                    legendTop === 'auto' ? ( // 图例上边距未设置
-                                                        legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                        : ( // 图例下边距已设置
-                                                            (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                            : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                        )
-                                                    ) : 50
-                                                ) : 50
-                                            ) : 50 // 图例隐藏
-                                        ),
+                                        ) : gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -106,28 +94,20 @@ class ScatterStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendLeft = chartOption.legend.left,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { left: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         left: (value && value !== 'auto') ? ( // 已设置图域左边距
                                             value
-                                        ) : ( // 未设置图域左边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                        legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                        : '5%' // 图例右边距已设置
-                                                    ) : ( // 图例左边距已设置
-                                                        (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                        : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                                    )
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        ),
+                                        ) : gridPosition.left,
                                     } }) },
                                 ] });
                             }}
@@ -143,28 +123,20 @@ class ScatterStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendVisible = chartOption.legend.show,
-                                    legendOrient = chartOption.legend.orient,
-                                    legendTop = chartOption.legend.top,
-                                    legendRight = chartOption.legend.right;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { right: value} } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { grid: {
                                         right: (value !== '' && value !== 'auto') ? ( // 已设置图域右边距
                                             value
-                                        ) : ( // 未设置图域右边距或设置自适应
-                                            (legendVisible) ? ( // 图例未隐藏
-                                                legendOrient === 'vertical' ? ( //图例排布方向为垂直
-                                                    legendTop === 'auto' ? ( // 图例左边距未设置
-                                                        legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                        : ( // 图例右边距已设置
-                                                            (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                            : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                        )
-                                                    ) : '5%'
-                                                ) : '5%'
-                                            ) : '5%' // 图例隐藏
-                                        )
+                                        ) : gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -358,67 +330,21 @@ class ScatterStyle extends React.Component {
                             checked={!!scatterStyle.legendHidden}
                             onChange={e => {
                                 let checked = e.target.checked;
-                                let legendOrient = scatterStyle.legendOrient || 'vertical',
-                                    legendLeft = scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop = scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionLeft = checked ? '5%' : ( // 隐藏图例直接将图域左边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ),
-                                    gridPositionRight = checked ? '5%' : ( // 隐藏图例直接将图域右边距设为5%
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? (
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ),
-                                    gridPositionTop = checked ? 50:  ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ),
-                                    gridPositionBottom = checked ? 50 : ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    );
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: checked,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendHidden: checked, gridPosition: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
-                                    } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendHidden: checked } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPositionLeft,
-                                        right: gridPositionRight,
-                                        top: gridPositionTop,
-                                        bottom: gridPositionBottom,
+                                        left: gridPosition.left,
+                                        right: gridPosition.right,
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -444,9 +370,25 @@ class ScatterStyle extends React.Component {
                 <Select
                     defaultValue={scatterStyle.legendOrient || 'vertical'}
                     onChange={(value, item) => {
+                        let gridPosition = adapteGridPosition({
+                            legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                            legendOrient: value,
+                            legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                            legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                            legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                            legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                        });
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendOrient: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { orient: value } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                legend: { orient: value },
+                                grid: {
+                                    top: gridPosition.top,
+                                    left: gridPosition.left,
+                                    bottom: gridPosition.bottom,
+                                    right: gridPosition.right,
+                                },
+                            }) },
                         ] });
                     }}
                 >
@@ -463,27 +405,22 @@ class ScatterStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = scatterStyle.legendHidden,
-                                    legendOrient = scatterStyle.legendOrient || 'vertical',
-                                    legendTop = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    legendBottom = scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                    gridPositionTop = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 已知图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                                                : 50 // 图例下边距已设置
-                                            ) : ( // 图例上边距已设置
-                                                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                                                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                                            )
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendTop = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { top: value}, gridPosition: { top: gridPositionTop } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { top: value}, gridPosition: { top: gridPosition.top } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         top: legendTop,
                                     }, grid: {
-                                        top: gridPositionTop
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom,
                                     } }) },
                                 ] });
                             }}
@@ -498,27 +435,22 @@ class ScatterStyle extends React.Component {
                             placeholder={50}
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = scatterStyle.legendHidden,
-                                    legendOrient = scatterStyle.legendOrient || 'vertical',
-                                    legendTop = scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom = (value === '' || value === null || value === undefined) ? 50 : value,
-                                    gridPositionBottom = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                                            legendTop === 'auto' ? ( // 图例上边距未设置
-                                                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                                                : ( // 图例下边距已设置
-                                                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                                                )
-                                            ) : 50
-                                        ) : 50
-                                    ) : 50 // 图例隐藏
+                                let legendBottom = (value === '' || value === null || value === undefined) ? 50 : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPositionBottom } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPosition.bottom } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         bottom: legendBottom
                                     }, grid: {
-                                        bottom: gridPositionBottom
+                                        top: gridPosition.top,
+                                        bottom: gridPosition.bottom
                                     } }) },
                                 ] });
                             }}
@@ -533,27 +465,22 @@ class ScatterStyle extends React.Component {
                             placeholder='auto'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = scatterStyle.legendHidden,
-                                    legendOrient = scatterStyle.legendOrient || 'vertical',
-                                    legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value,
-                                    legendRight = scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    gridPositionLeft = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                                                legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                                                : '5%' // 图例右边距已设置
-                                            ) : ( // 图例左边距已设置
-                                                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                                                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                                            )
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft,
+                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { left: value }, gridPosition: { left: gridPositionLeft } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { left: value }, gridPosition: { left: gridPosition.left } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft
+                                        left: legendLeft,
                                     }, grid: {
-                                        left: gridPositionLeft
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}
@@ -568,27 +495,22 @@ class ScatterStyle extends React.Component {
                             placeholder='5%'
                             onBlur={e => {
                                 let value = e.target.value;
-                                let legendHidden = scatterStyle.legendHidden,
-                                    legendOrient = scatterStyle.legendOrient || 'vertical',
-                                    legendLeft = scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight = (value === '' || value === null || value === undefined) ? '5%' : value,
-                                    gridPositionRight = !legendHidden ? ( // 图例未隐藏
-                                        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
-                                            legendLeft === 'auto' ? ( // 图例左边距未设置
-                                                legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                                                : ( // 图例右边距已设置
-                                                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                                                )
-                                            ) : '5%'
-                                        ) : '5%'
-                                    ) : '5%' // 图例隐藏
+                                let legendRight = (value === '' || value === null || value === undefined) ? '5%' : value;
+                                let gridPosition = adapteGridPosition({
+                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
+                                    legendOrient: scatterStyle.legendOrient || 'vertical',
+                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
+                                    legendRight,
+                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
+                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
+                                });
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { right: value}, gridPosition: { right: gridPositionRight } } }) },
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { right: value}, gridPosition: { right: gridPosition.right } } }) },
                                     { name: 'chartOption', value: deepAssign(chartOption, { legend: {
                                         right: legendRight
                                     }, grid: {
-                                        right: gridPositionRight
+                                        left: gridPosition.left,
+                                        right: gridPosition.right
                                     } }) },
                                 ] });
                             }}

src/models/adapteGridPosition.js

@@ -0,0 +1,53 @@
+export default function(legendConfig) {
+    let { legendHidden, legendOrient, legendLeft, legendRight, legendTop, legendBottom } = legendConfig;
+    let gridPositionLeft = legendHidden ? '5%' : ( // 隐藏图例直接将图域左边距设为5%
+        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
+            legendLeft === 'auto' ? ( // 已知图例左边距未设置
+                legendRight === 'auto' ? '15%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
+                : '5%' // 图例右边距已设置
+            ) : ( // 图例左边距已设置
+                (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
+                : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
+            )
+        ) : '5%'
+    );
+    let gridPositionRight = legendHidden ? '5%' : ( // 隐藏图例直接将图域右边距设为5%
+        legendOrient === 'vertical' ? ( // 图例排布方向为垂直
+            legendLeft === 'auto' ? (
+                legendRight === 'auto' ? '15%' // 已知图例右边距未设置
+                : ( // 图例右边距已设置
+                    (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
+                    : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
+                )
+            ) : '5%'
+        ) : '5%'
+    )
+    let gridPositionTop = legendHidden ? 50:  ( // 图例未隐藏
+        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
+            legendTop === 'auto' ? ( // 已知图例上边距未设置
+                legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
+                : 50 // 图例下边距已设置
+            ) : ( // 图例上边距已设置
+                (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
+                : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
+            )
+        ) : 50
+    )
+    let gridPositionBottom = legendHidden ? 50 : ( // 图例未隐藏
+        legendOrient === 'horizontal' ? ( // 图例排布方向为水平
+            legendTop === 'auto' ? ( // 图例上边距未设置
+                legendBottom === 'auto' ? 50 // 已知图例下边距未设置
+                : ( // 图例下边距已设置
+                    (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
+                    : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
+                )
+            ) : 50
+        ) : 50
+    );
+    return {
+        top: gridPositionTop,
+        bottom: gridPositionBottom,
+        left: gridPositionLeft,
+        right: gridPositionRight
+    }
+}

src/models/chart.js

@@ -384,12 +384,17 @@ export default {
                     chartName: header.label,
                     dataId: baseConfig.dataSource.code,
                     describes: description || '',
-                    style: JSON.stringify(styleConfig),
+                    // style: JSON.stringify(styleConfig),
                     otherConfig: JSON.stringify(otherConfig),
                     chartsGroup: group+'' ? group : '-1',
                     chartOption: JSON.stringify(chartOption),
                     fetchConfig: JSON.stringify(fetchConfig),
                 }; // 基本属性
+                let styleObj = {};
+                if(!!baseConfig.viewType) {
+                    styleObj[baseConfig.viewType] = styleConfig[baseConfig.viewType]
+                }
+                body.style = JSON.stringify(styleObj);
                 if(baseConfig.viewType === 'bar') {
                     body.chartType = 'Histogram';
                     body.chartConfig = JSON.stringify(barConfig);

src/models/parseChartOption.js

@@ -3,9 +3,10 @@
  */
 import moment from 'moment'
 import EllipsisTooltip from '../components/common/ellipsisTooltip/index'
-import { deepAssign } from '../utils/baseUtils'
+import { deepAssign, numberFormat } from '../utils/baseUtils'
 import STATISTICS_OPTION from '../components/chartDesigner/sections/statisticsOption.json'
 import themes from '../components/chartDesigner/sections/style/theme/index'
+import adapteGridPosition from './adapteGridPosition'
 
 export default function(viewType, data, chartConfig, themeName, styleConfig) {
     if(!data) {
@@ -59,18 +60,27 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
     const { xAxis, yAxis, groupBy } = barConfig;
     const { gridPosition, barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
         labelRotate, labelFormatter, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
-        xLabelMargin, yNameLocation, yNameGap, yNameRotate, legendHidden, legendInPagination,
-        legendOrient : styleLegendOrient, legendPosition, legendFormatter, labelZeroVisible } = styleConfig;
+        xLabelMargin, yNameLocation, yNameGap, yNameRotate, legendHidden: styleLegendHidden, legendInPagination,
+        legendOrient : styleLegendOrient, legendPosition, legendFormatter, labelZeroVisible, } = styleConfig;
     let xTitle = xAxis?`${xAxis.column.label}${xAxis.granularity.value?'('+xAxis.granularity.label+')':''}`:null
     let yTitle = yAxis?`${yAxis.column.label}${yAxis.gauge.value?'('+yAxis.gauge.label+')':''}`:null
     data.serieses = data.serieses || [];
 
-    let legendOrient = styleLegendOrient || 'vertical',
+    let legendHidden = !!groupBy && !!groupBy.key ? styleLegendHidden : true,
+        legendOrient = styleLegendOrient || 'vertical',
         legendTop = legendPosition ? ((legendPosition.top === '' || legendPosition.top === null || legendPosition.top === undefined) ? 50 : legendPosition.top) : 50,
         legendLeft = legendPosition ? ((legendPosition.left === '' || legendPosition.left === null || legendPosition.left === undefined) ? 'auto' : legendPosition.left) : 'auto',
-        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '10%' : legendPosition.right) : '10%',
+        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '5%' : legendPosition.right) : '5%',
         legendBottom = legendPosition ? ((legendPosition.bottom === '' || legendPosition.bottom === null || legendPosition.bottom === undefined) ? 50 : legendPosition.bottom) : 50;
-
+    
+    let adapte_grid_position = adapteGridPosition({
+        legendHidden,
+        legendOrient,
+        legendLeft,
+        legendRight,
+        legendTop,
+        legendBottom,
+    });
     let option = deepAssign({
         tooltip : {
             trigger: "axis",
@@ -94,64 +104,16 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
         grid: {
             top: (gridPosition && gridPosition.top && gridPosition.top !== 'auto') ? ( // 已设置图域上边距
                 gridPosition.top
-            ) : ( // 未设置图域上边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                        legendTop === 'auto' ? ( // 已知图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                            : 50 // 图例下边距已设置
-                        ) : ( // 图例上边距已设置
-                            (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                            : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                        )
-                    ) : 50 // 图例排布方向为垂直
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.top,
             left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
                 gridPosition.left
-            ) : ( // 未设置图域左边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( // 图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                            legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                            : '5%' // 图例右边距已设置
-                        ) : ( // 图例左边距已设置
-                            (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                            : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                        )
-                    ) : '5%' // 图例排布方向为水平
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.left,
             right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
                 gridPosition.right
-            ) : ( // 未设置图域右边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( //图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 图例左边距未设置
-                            legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                            : ( // 图例右边距已设置
-                                (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                            )
-                        ) : '5%'
-                    ) : '5%'
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.right,
             bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
                 gridPosition.bottom
-            ) : ( // 未设置图域下边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                        legendTop === 'auto' ? ( // 图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                            : ( // 图例下边距已设置
-                                (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                            )
-                        ) : 50
-                    ) : 50
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.bottom,
             containLabel: true
         },
         xAxis: [{
@@ -242,7 +204,7 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
 }
 
 function lineOption(data, lineConfig, themeConfig, styleConfig) {
-    const { gridPosition, legendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition, labelSymbol,
+    const { gridPosition, legendHidden : styleLegendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition, labelSymbol,
         legendFormatter, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
         labelFormatter, lineSmooth, labelSymbolSize } = styleConfig;
@@ -251,74 +213,35 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
     let yTitle = yAxis?`${yAxis.column.label}${yAxis.gauge.value?'('+yAxis.gauge.label+')':''}`:null
     data.serieses = data.serieses || [];
 
-    let legendOrient = styleLegendOrient || 'vertical',
+    let legendHidden = !!groupBy && !!groupBy.key ? styleLegendHidden : true,
+        legendOrient = styleLegendOrient || 'vertical',
         legendTop = legendPosition ? ((legendPosition.top === '' || legendPosition.top === null || legendPosition.top === undefined) ? 50 : legendPosition.top) : 50,
         legendLeft = legendPosition ? ((legendPosition.left === '' || legendPosition.left === null || legendPosition.left === undefined) ? 'auto' : legendPosition.left) : 'auto',
-        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '10%' : legendPosition.right) : '10%',
+        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '5%' : legendPosition.right) : '5%',
         legendBottom = legendPosition ? ((legendPosition.bottom === '' || legendPosition.bottom === null || legendPosition.bottom === undefined) ? 50 : legendPosition.bottom) : 50;
 
+    let adapte_grid_position = adapteGridPosition({
+        legendHidden,
+        legendOrient,
+        legendLeft,
+        legendRight,
+        legendTop,
+        legendBottom,
+    });
     let option = deepAssign({
         grid: {
             top: (gridPosition && gridPosition.top && gridPosition.top !== 'auto') ? ( // 已设置图域上边距
                 gridPosition.top
-            ) : ( // 未设置图域上边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                        legendTop === 'auto' ? ( // 已知图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                            : 50 // 图例下边距已设置
-                        ) : ( // 图例上边距已设置
-                            (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                            : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                        )
-                    ) : 50 // 图例排布方向为垂直
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.top,
             left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
                 gridPosition.left
-            ) : ( // 未设置图域左边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( // 图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                            legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                            : '5%' // 图例右边距已设置
-                        ) : ( // 图例左边距已设置
-                            (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                            : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                        )
-                    ) : '5%' // 图例排布方向为水平
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.left,
             right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
                 gridPosition.right
-            ) : ( // 未设置图域右边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( //图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 图例左边距未设置
-                            legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                            : ( // 图例右边距已设置
-                                (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                            )
-                        ) : '5%'
-                    ) : '5%'
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.right,
             bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
                 gridPosition.bottom
-            ) : ( // 未设置图域下边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                        legendTop === 'auto' ? ( // 图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                            : ( // 图例下边距已设置
-                                (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                            )
-                        ) : 50
-                    ) : 50
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.bottom,
             containLabel: true
         },
         tooltip: {
@@ -402,7 +325,7 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
             orient: legendOrient || 'vertical',
             top: legendPosition ? legendPosition.top || 50 : 50,
             left: legendPosition ? legendPosition.left || 'auto' : 'auto',
-            right: legendPosition ? legendPosition.right || '10%' : '10%',
+            right: legendPosition ? legendPosition.right || '5%' : '5%',
             bottom: legendPosition ? legendPosition.bottom || 50 : 50,
             formatter: legendFormatter || '{name}',
             data: data.xAxis.map(d => {
@@ -494,79 +417,42 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
 }
 
 function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
-    const { gridPosition, legendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition,
+    const { gridPosition, legendHidden: styleLegendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition,
         labelSymbol, legendFormatter, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
         yNameLocation, yNameGap, yNameRotate, labelSymbolSize, xLabelHiddenCover } = styleConfig;
-    let xTitle = scatterConfig.xAxis?`${scatterConfig.xAxis.column.label}${scatterConfig.xAxis.granularity.value?'('+scatterConfig.xAxis.granularity.label+')':''}`:null
-    let yTitle = scatterConfig.yAxis?`${scatterConfig.yAxis.column.label}${scatterConfig.yAxis.gauge.value?'('+scatterConfig.yAxis.gauge.label+')':''}`:null
+    const { xAxis, yAxis, groupBy } = scatterConfig;
+    let xTitle = xAxis?`${xAxis.column.label}${xAxis.granularity.value?'('+xAxis.granularity.label+')':''}`:null
+    let yTitle = yAxis?`${yAxis.column.label}${yAxis.gauge.value?'('+yAxis.gauge.label+')':''}`:null
     
-    let legendOrient = styleLegendOrient || 'vertical',
+    let legendHidden = !!groupBy && !!groupBy.key ? styleLegendHidden : true,
+        legendOrient = styleLegendOrient || 'vertical',
         legendTop = legendPosition ? ((legendPosition.top === '' || legendPosition.top === null || legendPosition.top === undefined) ? 50 : legendPosition.top) : 50,
         legendLeft = legendPosition ? ((legendPosition.left === '' || legendPosition.left === null || legendPosition.left === undefined) ? 'auto' : legendPosition.left) : 'auto',
-        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '10%' : legendPosition.right) : '10%',
+        legendRight = legendPosition ? ((legendPosition.right === '' || legendPosition.right === null || legendPosition.right === undefined) ? '5%' : legendPosition.right) : '5%',
         legendBottom = legendPosition ? ((legendPosition.bottom === '' || legendPosition.bottom === null || legendPosition.bottom === undefined) ? 50 : legendPosition.bottom) : 50;
+    
+    let adapte_grid_position = adapteGridPosition({
+        legendHidden,
+        legendOrient,
+        legendLeft,
+        legendRight,
+        legendTop,
+        legendBottom,
+    });
     let option = deepAssign({
         grid: {
             top: (gridPosition && gridPosition.top && gridPosition.top !== 'auto') ? ( // 已设置图域上边距
                 gridPosition.top
-            ) : ( // 未设置图域上边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( // 图例排布方向为水平
-                        legendTop === 'auto' ? ( // 已知图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 图例下边距也未设置，将靠上对齐，图域上边距保持50
-                            : 50 // 图例下边距已设置
-                        ) : ( // 图例上边距已设置
-                            (legendTop + '').endsWith('%') ? (10 + Number(legendTop.replace('%', '')) + '%') // 图例上边距为百分比，图域上边距增加10%
-                            : (50 + Number(legendTop))// 图例上边距为数字，图域上边距增加50
-                        )
-                    ) : 50 // 图例排布方向为垂直
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.top,
             left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
                 gridPosition.left
-            ) : ( // 未设置图域左边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( // 图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 已知图例左边距未设置
-                            legendRight === 'auto' ? '10%' // 图例右边距也未设置，将靠左对齐，图域左边距增加
-                            : '5%' // 图例右边距已设置
-                        ) : ( // 图例左边距已设置
-                            (legendLeft + '').endsWith('%') ? (10 + Number(legendLeft.replace('%', '')) + '%') // 图例左边距为百分比，图域左边距增加10%
-                            : (100 + Number(legendLeft))// 图例左边距为数字，图域左边距增加100
-                        )
-                    ) : '5%' // 图例排布方向为水平
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.left,
             right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
                 gridPosition.right
-            ) : ( // 未设置图域右边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'vartical' ? ( //图例排布方向为垂直
-                        legendLeft === 'auto' ? ( // 图例左边距未设置
-                            legendRight === 'auto' ? '5%' // 已知图例右边距未设置
-                            : ( // 图例右边距已设置
-                                (legendRight + '').endsWith('%') ? (10 + Number(legendRight.replace('%', '')) + '%') // 图例右边距为百分比，图域右边距增加10%
-                                : (100 + Number(legendRight))// 图例右边距为数字，图域右边距增加100
-                            )
-                        ) : '5%'
-                    ) : '5%'
-                ) : '5%' // 图例隐藏
-            ),
+            ) : adapte_grid_position.right,
             bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
                 gridPosition.bottom
-            ) : ( // 未设置图域下边距或设置自适应
-                (!legendHidden) ? ( // 图例未隐藏
-                    legendOrient === 'horizontal' ? ( //图例排布方向为水平
-                        legendTop === 'auto' ? ( // 图例上边距未设置
-                            legendBottom === 'auto' ? 50 // 已知图例下边距未设置
-                            : ( // 图例下边距已设置
-                                (legendBottom + '').endsWith('%') ? (10 + Number(legendBottom.replace('%', '')) + '%') // 图例下边距为百分比，图域下边距增加10%
-                                : (50 + Number(legendBottom))// 图例下边距为数字，图域下边距增加50
-                            )
-                        ) : 50
-                    ) : 50
-                ) : 50 // 图例隐藏
-            ),
+            ) : adapte_grid_position.bottom,
             containLabel: true
         },
         tooltip: {
@@ -576,14 +462,14 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             }
         },
         legend: {
-            show: legendHidden === undefined ? true : !legendHidden,
+            show: !!groupBy && !!groupBy.key && (legendHidden === undefined ? true : !legendHidden),
             type: legendInPagination === undefined ? 'plain' : (!!legendInPagination ? 'scroll' : 'plain'),
-            orient: legendOrient || 'vertical',
-            top: legendPosition ? legendPosition.top || 50 : 50,
-            left: legendPosition ? legendPosition.left || 'auto' : 'auto',
-            right: legendPosition ? legendPosition.right || '10%' : '10%',
-            bottom: legendPosition ? legendPosition.bottom || 50 : 50,
-            formatter: legendFormatter || '{name}'
+            orient: legendOrient,
+            top: legendTop,
+            left: legendLeft,
+            right: legendRight,
+            bottom: legendBottom,
+            formatter: legendFormatter || '{name}',
         },
         xAxis : [{
             type : 'value',
@@ -649,7 +535,11 @@ function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleCon
 
 
     if(!group1Name) { // 无分组
-        tableData = resData;
+        let o = {};
+        statistics.forEach(s => {
+            o[s.name] = numberFormat(resData[s.name])
+        });
+        tableData = o;
     }else {
         if(!group2Name) { // 只有一个分组
             resData.forEach(d => {
@@ -658,7 +548,13 @@ function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleCon
                     group1s.push(v);
                 }
             });
-            tableData = resData;
+            tableData = resData.map(d => {
+                let o = {};
+                statistics.forEach(s => {
+                    o[s.name] = numberFormat(d[s.name])
+                });
+                return o;
+            });
         }else { // 有两个分组
             resData.forEach(d => {
                 let v1 = d[group1Name];
@@ -675,14 +571,13 @@ function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleCon
                     list = resData.filter(d => d[group1Name] === g)
                     // .slice(0, 5);
                 
-                
                 obj[group1Name] = g;
                 obj['data'] = group2s.map(g => {
                     let o = {};
                     o[group2Name] = g;
                     statistics.forEach(s => {
                         let v = list.find(l => l[group2Name] === g);
-                        o[s.name] = v ? (typeof v[s.name] === 'number' ? v[s.name] : '') : '';
+                        o[s.name] = v ? (typeof v[s.name] === 'number' ? numberFormat(v[s.name]) : '') : '';
                     });
                     return o;
                 });

src/models/recent.js

@@ -1,7 +1,7 @@
 /**
  * 历史记录
  */
-import { message } from 'antd'
+// import { message } from 'antd'
 import * as service from '../services/index'
 import URLS from '../constants/url'
 import CHART_TYPE from './chartType.json'
@@ -52,11 +52,11 @@ export default {
                     });
                     yield put({ type: 'listRecentChart', recentChart });
                 }else {
-                    message.error('读取最近访问图表列表错误: ' + res.msg);
+                    // message.error('读取最近访问图表列表错误: ' + res.msg);
                 }
             }catch(e) {
                 console.error(e);
-                message.error('读取最近访问图表列表错误: ' + e.message);
+                // message.error('读取最近访问图表列表错误: ' + e.message);
             }
         },
         *fetchRecentDashboard(action, { select, call, put }) {
@@ -82,11 +82,11 @@ export default {
                     });
                     yield put({ type: 'listRecentDashboard', recentDashboard });
                 }else {
-                    message.error('读取最近访问报表列表错误: ' + res.msg);
+                    // message.error('读取最近访问报表列表错误: ' + res.msg);
                 }
             }catch(e) {
                 console.error(e);
-                message.error('读取最近访问报表列表错误: ' + e.message);
+                // message.error('读取最近访问报表列表错误: ' + e.message);
             }
             
         },
@@ -102,7 +102,7 @@ export default {
                 });
             }catch(e) {
                 console.error(e);
-                message.error('添加访问记录错误: ' + e.message);
+                // message.error('添加访问记录错误: ' + e.message);
             }
         }
     },

src/utils/baseUtils.js

@@ -107,13 +107,13 @@ function getUrlParam(name) {
 }
 
 function hashcode(obj) {
-    let str = JSON.stringify(obj, function(k, v) {
+    var str = JSON.stringify(obj, function(k, v) {
         if(typeof v === 'function') {
             return v.toString();
         }
         return v;
     });
-    let hash = 0,
+    var hash = 0,
         i, chr, len;
     if (str.length === 0) return hash;
     for (i = 0, len = str.length; i < len; i++) {
@@ -158,12 +158,12 @@ function dateFormat(date, fmt) {
  * @param $sub: 子节点名
  */
 function arrayToTree(data, parent, $id, $pid, $sub) {
-    let tree = [];
-    let temp;
+    var tree = [];
+    var temp;
     if(data instanceof Array) {
         for (var i = 0; i < data.length; i++) {
             if (data[i][$pid] === parent) {
-                let obj = data[i];
+                var obj = data[i];
                 temp = arrayToTree(data, data[i][$id], $id, $pid, $sub);
                 if (temp.length > 0) {
                     obj[$sub] = temp;
@@ -207,6 +207,37 @@ function RGBToHex(rgb) {
     return '#' + color.toString(16).padStart(6, '0');
 }
 
+/*
+ * 参数说明：
+ * number：要格式化的数字
+ * decimals：最大保留几位小数
+ * thousands_sep：是否添加千分位符号
+ * */
+function numberFormat(number, decimals, thousands_sep) {
+    number = (number + '').replace(/[^0-9+-Ee.]/g, '');
+    var dlength = (number + '').split('.')[1] || 0;
+    var n = !isFinite(+number) ? 0 : +number,
+        prec = !isFinite(+decimals) ? (dlength > 2 ? 2 : dlength) : (Math.abs(decimals) > dlength ? dlength : Math.abs(decimals)),
+        s = '',
+        toFixedFix = function (n, prec) {
+            var k = Math.pow(10, prec);
+            return '' + Math.round(n * k) / k;
+        };
+
+    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+    var re = /(-?\d+)(\d{3})/,
+        sep = ',';
+    while (!!thousands_sep && re.test(s[0])) {
+        s[0] = s[0].replace(re, "$1" + sep + "$2");
+    }
+
+    if ((s[1] || '').length < prec) {
+        s[1] = s[1] || '';
+        s[1] += new Array(prec - s[1].length + 1).join('0');
+    }
+    return s.join('.');
+}
+
 export { remove, isEqual, getUrlParam, hashcode, delay, dateFormat, arrayToTree, ArrayEquals, deepAssign,
-    HexToRGB, RGBToHex
+    HexToRGB, RGBToHex, numberFormat
 };