图表样式布局完全自适应

src/components/chartDesigner/charts/echartsView.jsx

@@ -4,7 +4,7 @@ import { hashcode } from '../../../utils/baseUtils'
 import EmptyContent from '../../common/emptyContent'
 
 const EchartsView = ({ chartOption }) => {
-    if(!chartOption || !chartOption.series || chartOption.series.length === 0) {
+    if(!chartOption || ((!chartOption.series || chartOption.series.length === 0) && (!chartOption.baseOption || !chartOption.baseOption.series || chartOption.baseOption.series.length === 0))) {
         return <EmptyContent />
     }else {
         return <Echarts

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

@@ -2,7 +2,6 @@ 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 {
@@ -23,128 +22,10 @@ class BarStyle extends React.Component {
         const { styleConfig, chartOption, barConfig } = chartDesigner;
         const { groupBy } = barConfig;
         const barStyle = styleConfig.bar || {};
-        chartOption.series = chartOption.series || [];
+        chartOption.baseOption = chartOption.baseOption || {};
+        chartOption.baseOption.series = chartOption.baseOption.series || [];
 
         return <Form>
-            <Divider>图域</Divider>
-            <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`bar-grid-position-top-${barStyle.gridPosition ? barStyle.gridPosition['top'] : null}`}
-                            defaultValue={barStyle.gridPosition ? barStyle.gridPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.top,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`bar-grid-position-bottom-${barStyle.gridPosition ? barStyle.gridPosition['bottom'] : null}`}
-                            defaultValue={barStyle.gridPosition ? barStyle.gridPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`bar-grid-position-left-${barStyle.gridPosition ? barStyle.gridPosition['left'] : null}`}
-                            defaultValue={barStyle.gridPosition ? barStyle.gridPosition['left'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.left,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`bar-grid-position-right-${barStyle.gridPosition ? barStyle.gridPosition['right'] : null}`}
-                            defaultValue={barStyle.gridPosition ? barStyle.gridPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>
             <Divider>柱条</Divider>
             <FormItem label={<Tooltip title="柱条的最大宽度，支持设置成绝对数值或相对于类目宽度的百分比">柱条最大宽度</Tooltip>} {...formItemLayout}>
                 <Input
@@ -153,14 +34,14 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 barMaxWidth: value || '80'
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMaxWidth: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } } ) },
                         ] });
                     }}
                 />
@@ -172,14 +53,14 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 barMinHeight: value || 0
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMinHeight: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -191,14 +72,14 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 barGap: value || '30%'
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -212,7 +93,7 @@ class BarStyle extends React.Component {
                             onChange={e => {
                                 let checked = e.target.checked;
                                 let seriesArr = [];
-                                for(let i = 0; i < chartOption.series.length; i++) {
+                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                     seriesArr.push({
                                         label: { normal: { show: checked } },
                                         labelLine: { normal: { show: checked } }
@@ -220,7 +101,7 @@ class BarStyle extends React.Component {
                                 }
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelVisible: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                                    { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                                 ] });
                             }}
                         />
@@ -234,7 +115,7 @@ class BarStyle extends React.Component {
                                 let checked = e.target.checked;
                                 let seriesArr = [];
                                 let labelFormatter = barStyle.labelFormatter;
-                                for(let i = 0; i < chartOption.series.length; i++) {
+                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                     seriesArr.push({
                                         label: { normal: {
                                             formatterKey: checked,
@@ -267,7 +148,7 @@ class BarStyle extends React.Component {
                                 }
                                 dispatch({ type: 'chartDesigner/setFields', fields: [
                                     { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelZeroVisible: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                                    { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                                 ] });
                             }}
                         />
@@ -282,7 +163,7 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         let seriesArr = [];
                         let labelZeroVisible = barStyle.labelZeroVisible;
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: { normal: {
                                     formatterKey: value,
@@ -315,7 +196,7 @@ class BarStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelFormatter: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -325,14 +206,14 @@ class BarStyle extends React.Component {
                     defaultValue={barStyle.labelPosition || 'inside'}
                     onChange={(value, item) => {
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: { normal: { position: value } }
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelPosition: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 >
@@ -358,7 +239,7 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: {
                                      normal: { distance: (value === '' || value === null || value === undefined) ? 5 : Number(value) }
@@ -367,7 +248,7 @@ class BarStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelDistance: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -379,7 +260,7 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: {
                                     normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value) }
@@ -388,7 +269,7 @@ class BarStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -400,9 +281,9 @@ class BarStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameLocation: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: { 
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: { 
                                 nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -419,9 +300,9 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 'end' : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -434,9 +315,9 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -449,32 +330,15 @@ class BarStyle extends React.Component {
                         let checked = e.target.checked;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelHiddenCover: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 axisLabel: {
                                     interval: checked ? 'auto' : 0
                                 }
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
             </FormItem>
-            {/* <FormItem label={<Tooltip title="使横轴那些超长的标签文本不要占用太多空间">最大长度</Tooltip>} {...formItemLayout}>
-                <InputNumber
-                    defaultValue={(barStyle.xLabelMaxLength === '' || barStyle.xLabelMaxLength === null || barStyle.xLabelMaxLength === undefined) ? null : barStyle.xLabelMaxLength}
-                    placeholder={8}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelMaxLength: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
-                                axisLabel: {
-                                    margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
-                                }
-                            } } }) },
-                        ] });
-                    }}
-                />
-            </FormItem> */}
             <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(barStyle.xLabelMargin === '' || barStyle.xLabelMargin === null || barStyle.xLabelMargin === undefined) ? null : barStyle.xLabelMargin}
@@ -483,11 +347,11 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelMargin: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 axisLabel: {
                                     margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
                                 }
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -500,11 +364,11 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 axisLabel: {
                                     rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                 }
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -516,9 +380,9 @@ class BarStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameLocation: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: { 
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: { 
                                 nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value,
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -535,9 +399,9 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 'end' : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -550,9 +414,9 @@ class BarStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                 nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -564,214 +428,18 @@ class BarStyle extends React.Component {
                     onChange={e => {
                         let checked = e.target.checked;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 stack: checked
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { stack: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
             </FormItem>}
-            {!!groupBy && !!groupBy.key && <Divider>图例</Divider>}
-            {!!groupBy && !!groupBy.key && <Row>
-                <Col span={!!barStyle.legendHidden ? 24 : 12}>
-                    <Form.Item label='隐藏' labelCol={{ span: !!barStyle.legendHidden ? 8 : 16 }} wrapperCol={{ span: !!barStyle.legendHidden ? 16 : 8 }}>
-                        <Checkbox
-                            checked={!!barStyle.legendHidden}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                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 } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right,
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>
-                {!!groupBy && !!groupBy.key && !barStyle.legendHidden && <Col span={12}>
-                    <Form.Item label='分页' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
-                        <Checkbox
-                            checked={!!barStyle.legendInPagination}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { legendInPagination: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { type: checked ? 'scroll' : 'plain' } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>}
-            </Row>}
-            {!!groupBy && !!groupBy.key && !barStyle.legendHidden && <Form.Item label='排布方向' {...formItemLayout}>
-                <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 },
-                                grid: {
-                                    top: gridPosition.top,
-                                    left: gridPosition.left,
-                                    bottom: gridPosition.bottom,
-                                    right: gridPosition.right,
-                                },
-                            }) },
-                        ] });
-                    }}
-                >
-                    <Select.Option value='vertical'>纵向排布</Select.Option>
-                    <Select.Option value='horizontal'>横向排布</Select.Option>
-                </Select>
-            </Form.Item>}
-            {!!groupBy && !!groupBy.key && !barStyle.legendHidden && <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={barStyle.legendPosition ? barStyle.legendPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.top } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        top: legendTop,
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={barStyle.legendPosition ? barStyle.legendPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.bottom } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        bottom: legendBottom
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={barStyle.legendPosition ? barStyle.legendPosition['left'] : null}
-                            placeholder='auto'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.left } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft,
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={barStyle.legendPosition ? barStyle.legendPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.right } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        right: legendRight
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>}
         </Form>
     }
 }

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

@@ -1,8 +1,7 @@
 import React from 'react'
 import { connect } from 'dva'
-import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
+import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
-import adapteGridPosition from '../../../../models/adapteGridPosition'
 const FormItem = Form.Item;
 
 class LineStyle extends React.Component {
@@ -23,128 +22,10 @@ class LineStyle extends React.Component {
         const { styleConfig, chartOption, lineConfig } = chartDesigner;
         const { groupBy } = lineConfig;
         const lineStyle = styleConfig.line || {};
-        chartOption.series = chartOption.series || [];
+        chartOption.baseOption = chartOption.baseOption || {};
+        chartOption.baseOption.series = chartOption.baseOption.series || [];
 
         return <Form>
-            <Divider>图域</Divider>
-            <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`line-grid-position-top-${lineStyle.gridPosition ? lineStyle.gridPosition['top'] : null}`}
-                            defaultValue={lineStyle.gridPosition ? lineStyle.gridPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.top,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`line-grid-position-bottom-${lineStyle.gridPosition ? lineStyle.gridPosition['bottom'] : null}`}
-                            defaultValue={lineStyle.gridPosition ? lineStyle.gridPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`line-grid-position-left-${lineStyle.gridPosition ? lineStyle.gridPosition['left'] : null}`}
-                            defaultValue={lineStyle.gridPosition ? lineStyle.gridPosition['left'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.left,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`line-grid-position-right-${lineStyle.gridPosition ? lineStyle.gridPosition['right'] : null}`}
-                            defaultValue={lineStyle.gridPosition ? lineStyle.gridPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.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: 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
-                                        ) : gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>
             <Divider>线条</Divider>
             <FormItem label='平滑线条' {...formItemLayout}>
                 <Checkbox
@@ -152,14 +33,14 @@ class LineStyle extends React.Component {
                     onChange={e => {
                         let checked = e.target.checked;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 smooth: checked
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { lineSmooth: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -171,7 +52,7 @@ class LineStyle extends React.Component {
                     onChange={e => {
                         let checked = e.target.checked;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: { normal: { show: checked } },
                                 labelLine: { normal: { show: checked } },
@@ -179,7 +60,7 @@ class LineStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelVisible: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -191,7 +72,7 @@ class LineStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: {
                                     normal: { formatter: (value === '' || value === null || value === undefined) ? '{c}' : value }
@@ -200,7 +81,7 @@ class LineStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelFormatter: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -210,14 +91,14 @@ class LineStyle extends React.Component {
                     defaultValue={lineStyle.labelPosition || 'inside'}
                     onChange={(value, item) => {
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: { normal: { position: value } }
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelPosition: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 >
@@ -243,7 +124,7 @@ class LineStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: {
                                     normal: { distance: (value === '' || value === null || value === undefined) ? 5 : Number(value) }
@@ -252,7 +133,7 @@ class LineStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelDistance: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -264,7 +145,7 @@ class LineStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 label: {
                                     normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value) }
@@ -273,7 +154,7 @@ class LineStyle extends React.Component {
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -283,14 +164,14 @@ class LineStyle extends React.Component {
                     defaultValue={lineStyle.labelSymbol || 'emptyCircle'}
                     onChange={(value, item) => {
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 symbol: value
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelSymbol: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 >
@@ -312,14 +193,14 @@ class LineStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 symbolSize: (value === '' || value === null || value === undefined) ? 4 : Number(value)
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelSymbolSize: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
@@ -331,9 +212,9 @@ class LineStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameLocation: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: { 
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: { 
                                 nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -350,9 +231,9 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 'end' : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -365,31 +246,14 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
             </FormItem>
             <Divider>横轴标签</Divider>
-            {/* <FormItem label={<Tooltip title="使横轴那些超长的标签文本不要占用太多空间">最大长度</Tooltip>} {...formItemLayout}>
-                <InputNumber
-                    defaultValue={(lineStyle.xLabelMaxLength === '' || lineStyle.xLabelMaxLength === null || lineStyle.xLabelMaxLength === undefined) ? null : lineStyle.xLabelMaxLength}
-                    placeholder={8}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelMaxLength: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
-                                axisLabel: {
-                                    margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
-                                }
-                            } } }) },
-                        ] });
-                    }}
-                />
-            </FormItem> */}
             <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.xLabelMargin === '' || lineStyle.xLabelMargin === null || lineStyle.xLabelMargin === undefined) ? null : lineStyle.xLabelMargin}
@@ -398,11 +262,11 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelMargin: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 axisLabel: {
                                     margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
                                 }
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -415,11 +279,11 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 axisLabel: {
                                     rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                 }
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -431,10 +295,10 @@ class LineStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameLocation: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: { 
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: { 
                                 nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value,
                                 name: ((value === '' || value === null || value === undefined) ? 'end' : value) === 'center' ? chartOption.yAxis[0].name.split('').join('\n') : chartOption.yAxis[0].name.replace(/\s/g, '')
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -451,9 +315,9 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 'end' : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -466,9 +330,9 @@ class LineStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                 nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />
@@ -480,214 +344,18 @@ class LineStyle extends React.Component {
                     onChange={e => {
                         let checked = e.target.checked;
                         let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
+                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                             seriesArr.push({
                                 stack: checked
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { line: { stack: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 />
             </FormItem>}
-            {!!groupBy && !!groupBy.key && <Divider>图例</Divider>}
-            {!!groupBy && !!groupBy.key && <Row>
-                <Col span={!!lineStyle.legendHidden ? 24 : 12}>
-                    <Form.Item label='隐藏' labelCol={{ span: !!lineStyle.legendHidden ? 8 : 16 }} wrapperCol={{ span: !!lineStyle.legendHidden ? 16 : 8 }}>
-                        <Checkbox
-                            checked={!!lineStyle.legendHidden}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                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 } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right,
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>
-                {!!groupBy && !!groupBy.key && !lineStyle.legendHidden && <Col span={12}>
-                    <Form.Item label='分页' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
-                        <Checkbox
-                            checked={!!lineStyle.legendInPagination}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { line: { legendInPagination: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { type: checked ? 'scroll' : 'plain' } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>}
-            </Row>}
-            {!!groupBy && !!groupBy.key && !lineStyle.legendHidden && <Form.Item label='排布方向' {...formItemLayout}>
-                <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 },
-                                grid: {
-                                    top: gridPosition.top,
-                                    left: gridPosition.left,
-                                    bottom: gridPosition.bottom,
-                                    right: gridPosition.right,
-                                },
-                            }) },
-                        ] });
-                    }}
-                >
-                    <Select.Option value='vertical'>纵向排布</Select.Option>
-                    <Select.Option value='horizontal'>横向排布</Select.Option>
-                </Select>
-            </Form.Item>}
-            {!!groupBy && !!groupBy.key && !lineStyle.legendHidden && <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={lineStyle.legendPosition ? lineStyle.legendPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.top } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        top: legendTop,
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={lineStyle.legendPosition ? lineStyle.legendPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.bottom } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        bottom: legendBottom
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={lineStyle.legendPosition ? lineStyle.legendPosition['left'] : null}
-                            placeholder='auto'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.left } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft,
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={lineStyle.legendPosition ? lineStyle.legendPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                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: gridPosition.right } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        right: legendRight
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>}
         </Form>
     }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, Select, Divider, Row, Col, Tooltip, Input, Checkbox } from 'antd'
+import { Form, Divider, Checkbox } from 'antd'
 import { connect } from 'dva'
 import { deepAssign } from '../../../../utils/baseUtils'
 
@@ -21,220 +21,6 @@ class PieStyleConfig extends React.Component {
         const pieStyle = styleConfig.pie || {};
 
         return <Form>
-            <Divider>图形</Divider>
-            <Form.Item label={<Tooltip title='支持设置为数字或百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度'>圆心坐标</Tooltip>} {...formItemLayout}>
-                <Row>
-                    <Col span={11}>
-                        <Input
-                            defaultValue={pieStyle.pieCenter ? pieStyle.pieCenter[0] : null}
-                            placeholder='40%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieCenter: { 0: value } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { center: { 0: value || '40%' } }] }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                    <Col span={2}></Col>
-                    <Col span={11}>
-                        <Input
-                            defaultValue={pieStyle.pieCenter ? pieStyle.pieCenter[1] : null}
-                            placeholder='50%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieCenter: { 1: value } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { center: { 1: value || '50%' } }] }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>
-            <Form.Item label={<Tooltip title='支持设置为数字或百分比，设置成百分比时其值相对于可视区尺寸大小（容器高宽度较小值）'>半径</Tooltip>} {...formItemLayout}>
-                <Row>
-                    <Col span={11}>
-                        <Input
-                            defaultValue={pieStyle.pieRadius ? pieStyle.pieRadius[0] : null}
-                            placeholder={0}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieRadius: { 0: value } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { radius: { 0: value || 0 } }] }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                    <Col span={2}></Col>
-                    <Col span={11}>
-                        <Input
-                            defaultValue={pieStyle.pieRadius ? pieStyle.pieRadius[1] : null}
-                            placeholder='75%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { pieRadius: { 1: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { series: [ { radius: { 1: value || '75%'} }] }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>
-            <Divider>图例</Divider>
-            <Row>
-                <Col span={!!pieStyle.legendHidden ? 24 : 12}>
-                    <Form.Item label='隐藏' labelCol={{ span: !!pieStyle.legendHidden ? 8 : 16 }} wrapperCol={{ span: !!pieStyle.legendHidden ? 16 : 8 }}>
-                        <Checkbox
-                            checked={!!pieStyle.legendHidden}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendHidden: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>
-                {!pieStyle.legendHidden && <Col span={12}>
-                    <Form.Item label='分页' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
-                        <Checkbox
-                            checked={!!pieStyle.legendInPagination}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendInPagination: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { type: checked ? 'scroll' : 'plain' } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>}
-            </Row>
-            {!pieStyle.legendHidden && <Form.Item label='排布方向' {...formItemLayout}>
-                <Select
-                    defaultValue={pieStyle.legendOrient || 'vertical'}
-                    onChange={(value, item) => {
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendOrient: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { orient: value } }) },
-                        ] });
-                    }}
-                >
-                    <Select.Option value='vertical'>纵向排布</Select.Option>
-                    <Select.Option value='horizontal'>横向排布</Select.Option>
-                </Select>
-            </Form.Item>}
-            {!pieStyle.legendHidden && <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { top: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        top: (value === '' || value === null || value === undefined) ? 50 : value
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { bottom: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        bottom: (value === '' || value === null || value === undefined) ? 50 : value
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['left'] : null}
-                            placeholder='auto'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { left: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: (value === '' || value === null || value === undefined) ? 'auto' : value
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={pieStyle.legendPosition ? pieStyle.legendPosition['right'] : null}
-                            placeholder='10%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendPosition: { right: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        right: (value === '' || value === null || value === undefined) ? '10%' : value
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>}
-            {/* <Form.Item label={<Tooltip title='用于格式化图例文本，原值为name'>图例格式化</Tooltip>} {...formItemLayout}>
-                <Input
-                    defaultValue={pieStyle.legendFormatter}
-                    placeholder='{name}'
-                    onBlur={e => {
-                        let value = e.target.value;
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { legendFormatter: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { legend: { formatter: value } }) }
-                            // { name: 'chartOption', value: deepAssign(chartOption, { legend: { formatter: name => {
-                            //     let result = name;
-                            //     try {
-                            //         let matchRes = value.match(new RegExp('/(?<=\{)[^}]*(?=\})/g'));
-                            //         let matchStr = '$';
-                            //         if(matchRes) {
-                            //             for(let i = 0; i < matchRes.length; i++) {
-                            //                 eval('str' + i + '=' + matchRes[0]);
-                            //                 matchStr += (i + 1) + eval('str' + i) + '$';
-                            //             }
-                            //             matchStr = matchStr.substring(0, matchStr.length - 1);
-                            //             result = value.replace(/([.]*){[^}{]*}([.]*)/g, matchStr);
-                            //             console.log('formatter:' + result);
-                            //         }
-                            //     }catch(e) {
-                            //         console.error(e.message);
-                            //     }
-                            //     return result;
-                            // } } }) },
-                        ] });
-                    }}
-                />
-            </Form.Item> */}
             <Divider>标注</Divider>
             <Form.Item label='隐藏' {...formItemLayout}>
                 <Checkbox
@@ -243,11 +29,11 @@ class PieStyleConfig extends React.Component {
                         let checked = e.target.checked;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { pie: { labelHidden: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: { 0: {
                                 label: { normal: { show: !checked } },
                                 labelLine: { normal: { show: !checked } },
                                 avoidLabelOverlap: !checked,
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
                 />

src/components/dashboardDesigner/chartView.jsx

@@ -65,7 +65,7 @@ class ChartView extends React.Component {
                         }}
                     />);
                 }else if(['line', 'bar', 'pie', 'scatter'].indexOf(chartType) > -1) {
-                    children = (<EchartsView chartOption={chartOption}/>);
+                    children = (<EchartsView key={`${chartCode}-${layout.w}-${layout.h}`} chartOption={chartOption}/>);
                 }
             }
         }else if(viewType === 'richText') { // 富文本类型

src/models/parseChartOption.js

@@ -6,7 +6,6 @@ import EllipsisTooltip from '../components/common/ellipsisTooltip/index'
 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) {
@@ -58,63 +57,23 @@ export default function(viewType, data, chartConfig, themeName, styleConfig) {
 
 function barOption(data, barConfig, themeConfig, styleConfig) {
     const { xAxis, yAxis, groupBy } = barConfig;
-    const { gridPosition, barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
+    const { barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
         labelRotate, labelFormatter, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
-        xLabelMargin, yNameLocation, yNameGap, yNameRotate, legendHidden: styleLegendHidden, legendInPagination,
-        legendOrient : styleLegendOrient, legendPosition, legendFormatter, labelZeroVisible, } = styleConfig;
+        xLabelMargin, yNameLocation, yNameGap, yNameRotate, 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
+    let legendVisible = !!groupBy && !!groupBy.key;
     data.serieses = data.serieses || [];
 
-    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) ? '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",
             axisPointer: {
-                type: "cross",
-                label: {
-                    backgroundColor: "#6a7985"
-                }
+                type: "cross"
             }
         },
         legend: {
-            show: !!groupBy && !!groupBy.key && (legendHidden === undefined ? true : !legendHidden),
-            type: legendInPagination === undefined ? 'plain' : (!!legendInPagination ? 'scroll' : 'plain'),
-            orient: legendOrient,
-            top: legendTop,
-            left: legendLeft,
-            right: legendRight,
-            bottom: legendBottom,
-            formatter: legendFormatter || '{name}',
-        },
-        grid: {
-            top: (gridPosition && gridPosition.top && gridPosition.top !== 'auto') ? ( // 已设置图域上边距
-                gridPosition.top
-            ) : adapte_grid_position.top,
-            left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
-                gridPosition.left
-            ) : adapte_grid_position.left,
-            right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
-                gridPosition.right
-            ) : adapte_grid_position.right,
-            bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
-                gridPosition.bottom
-            ) : adapte_grid_position.bottom,
-            containLabel: true
+            show: legendVisible
         },
         xAxis: [{
             type: 'category',
@@ -199,51 +158,53 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
             show: false
         }
     }, themeConfig);
+
+    let mediaOption = {
+        baseOption: option,
+        media: legendVisible ? [{
+            query: { minWidth: 1000, minHeight: 1000 }, // I
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, minHeight: 1000 }, // H
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, minHeight: 1000 }, // G
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 1000 }, // F
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '16%' } }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 1000 }, // E
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, maxHeight: 1000 }, // D
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 500 }, // C
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 500 }, // B
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }, {
+            query: { maxWidth: 500, maxHeight: 500 }, // A
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }] : []
+    }
     
-    return option;
+    return mediaOption;
 }
 
 function lineOption(data, lineConfig, themeConfig, styleConfig) {
-    const { gridPosition, legendHidden : styleLegendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition, labelSymbol,
-        legendFormatter, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
+    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
         labelFormatter, lineSmooth, labelSymbolSize } = styleConfig;
     const { xAxis, yAxis, groupBy } = lineConfig;
     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 legendVisible = !!groupBy && !!groupBy.key
     data.serieses = data.serieses || [];
 
-    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) ? '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
-            ) : adapte_grid_position.top,
-            left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
-                gridPosition.left
-            ) : adapte_grid_position.left,
-            right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
-                gridPosition.right
-            ) : adapte_grid_position.right,
-            bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
-                gridPosition.bottom
-            ) : adapte_grid_position.bottom,
-            containLabel: true
-        },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -251,14 +212,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
             }
         },
         legend: {
-            show: !!groupBy && !!groupBy.key && (legendHidden === undefined ? true : !legendHidden),
-            type: legendInPagination === undefined ? 'plain' : (!!legendInPagination ? 'scroll' : 'plain'),
-            orient: legendOrient,
-            top: legendTop,
-            left: legendLeft,
-            right: legendRight,
-            bottom: legendBottom,
-            formatter: legendFormatter || '{name}',
+            show: legendVisible
         },
         xAxis:  [{
             name: xTitle || '横轴',
@@ -306,13 +260,43 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
         }
     }, themeConfig, styleConfig);
 
-    return option;
+    let mediaOption = {
+        baseOption: option,
+        media: legendVisible ? [{
+            query: { minWidth: 1000, minHeight: 1000 }, // I
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, minHeight: 1000 }, // H
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, minHeight: 1000 }, // G
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 1000 }, // F
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '16%' } }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 1000 }, // E
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, maxHeight: 1000 }, // D
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 500 }, // C
+            option: { legend: {  type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 500 }, // B
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }, {
+            query: { maxWidth: 500, maxHeight: 500 }, // A
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }] : []
+    }
+    
+    return mediaOption;
 }
 
 function pieOption(data, pieConfig, themeConfig, styleConfig) {
     let columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
-    const { pieCenter, pieRadius, legendHidden, legendInPagination, legendOrient, legendPosition, legendFormatter,
-        labelHidden } = styleConfig;
 
     let option = deepAssign({
         tooltip : {
@@ -320,14 +304,6 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
             formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         legend: {
-            show: 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 || '5%' : '5%',
-            bottom: legendPosition ? legendPosition.bottom || 50 : 50,
-            formatter: legendFormatter || '{name}',
             data: data.xAxis.map(d => {
                 let gv= pieConfig.xAxis.granularity.value;
                 let xv = d;
@@ -352,109 +328,93 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
             }),
         },
         grid: {
-            left: '10%',
-            right: '10%',
-            top: 100,
-            bottom: 60,
+            left: 50,
+            right: 50,
+            top: 50,
+            bottom: 50,
             containLabel: true
         },
-        series : [
-            {
-                name: columnName,
-                type: 'pie',
-                center: pieCenter ? [pieCenter[0] || '40%', pieCenter[1] || '50%'] : ['40%', '50%'],
-                radius: pieRadius ? [pieRadius[0] || 0, pieRadius[1] || '75%'] : [0, '75%'],
-                label: {
-                    normal: {
-                        show: labelHidden === undefined ? true : !labelHidden,
-                    },
-                    emphasis: {
-                        show: true,
-                    }
-                },
-                labelLine: {
-                    normal: {
-                        show: labelHidden === undefined ? true : !labelHidden,
-                    },
-                    emphasis: {
-                        show: true,
-                    }
-                },
-                avoidLabelOverlap: labelHidden === undefined ? true : !labelHidden,
-                data: (data.serieses || [{ value: [] }])[0].value.map(v => {
-                    let obj = { ...v };
-                    if(!v.name) {
-                        obj.name = '空'
-                    }else {
-                        let gv= pieConfig.xAxis.granularity.value;
-                        if(gv === 'halfYear') {
-                            let arr = v.name.split('-H');
-                            obj.name = arr[0] + ['上半年', '下半年'][arr[1] - 1]
-                        }else if(gv === 'month') {
-                            obj.name = v.name.replace('-M', '-');
-                        }else if(gv === 'quarter') {
-                            let arr = v.name.split('-');
-                            obj.name = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
-                        }else if(gv === 'week') {
-                            let arr = v.name.split('-');
-                            obj.name = arr[0] + '-' + arr[1] + '周'
-                        }
-                    }
-                    return obj;
-                }),
-                itemStyle: {
-                    emphasis: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+        series : [{
+            name: columnName,
+            type: 'pie',
+            radius: [0, '65%'],
+            center: ['50%', '50%'],
+            data: (data.serieses || [{ value: [] }])[0].value.map(v => {
+                let obj = { ...v };
+                if(!v.name) {
+                    obj.name = '空'
+                }else {
+                    let gv= pieConfig.xAxis.granularity.value;
+                    if(gv === 'halfYear') {
+                        let arr = v.name.split('-H');
+                        obj.name = arr[0] + ['上半年', '下半年'][arr[1] - 1]
+                    }else if(gv === 'month') {
+                        obj.name = v.name.replace('-M', '-');
+                    }else if(gv === 'quarter') {
+                        let arr = v.name.split('-');
+                        obj.name = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
+                    }else if(gv === 'week') {
+                        let arr = v.name.split('-');
+                        obj.name = arr[0] + '-' + arr[1] + '周'
                     }
                 }
-            }
-        ]
+                return obj;
+            })
+        }]
     }, themeConfig);
 
-    return option;
+    /**
+     *      | G  | H  | I
+     * 1000 +----+----+---
+     *      | D  | E  | F
+     *  500 +----+----+---
+     *      | A  | B  | C
+     *    0 +----+----+---
+     *      0   500  1000
+     */
+    let mediaOption = {
+        baseOption: option,
+        media: [{
+            query: { minWidth: 1000, minHeight: 1000 }, // I
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+        }, {
+            query: { maxWidth: 1000, minHeight: 1000 }, // H
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
+        }, {
+            query: { maxWidth: 500, minHeight: 1000 }, // G
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '65%'], center: ['50%', '55%'] }] }
+        }, {
+            query: { minWidth: 1000, maxHeight: 1000 }, // F
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 1000 }, // E
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
+        }, {
+            query: { maxWidth: 500, maxHeight: 1000 }, // D
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
+        }, {
+            query: { minWidth: 1000, maxHeight: 500 }, // C
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 500 }, // B
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '65%'], center: ['50%', '45%'] }] }
+        }, {
+            query: { maxWidth: 500, maxHeight: 500 }, // A
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '65%'], center: ['50%', '45%'] }] }
+        }]
+    }
+
+    return mediaOption;
 }
 
 function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
-    const { gridPosition, legendHidden: styleLegendHidden, legendInPagination, legendOrient : styleLegendOrient, legendPosition,
-        labelSymbol, legendFormatter, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
-        yNameLocation, yNameGap, yNameRotate, labelSymbolSize, xLabelHiddenCover } = styleConfig;
+    const { labelSymbol,xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin, yNameLocation, yNameGap, yNameRotate, labelSymbolSize, xLabelHiddenCover } = styleConfig;
     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 legendVisible = !!groupBy && !!groupBy.key
     
-    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) ? '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
-            ) : adapte_grid_position.top,
-            left: (gridPosition && gridPosition.left && gridPosition.left !== 'auto') ? ( // 已设置图域左边距
-                gridPosition.left
-            ) : adapte_grid_position.left,
-            right: (gridPosition && gridPosition.right && gridPosition.right !== 'auto') ? ( // 已设置图域右边距
-                gridPosition.right
-            ) : adapte_grid_position.right,
-            bottom: (gridPosition && gridPosition.bottom && gridPosition.bottom !== 'auto') ? ( // 已设置图域下边距
-                gridPosition.bottom
-            ) : adapte_grid_position.bottom,
-            containLabel: true
-        },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -462,14 +422,7 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             }
         },
         legend: {
-            show: !!groupBy && !!groupBy.key && (legendHidden === undefined ? true : !legendHidden),
-            type: legendInPagination === undefined ? 'plain' : (!!legendInPagination ? 'scroll' : 'plain'),
-            orient: legendOrient,
-            top: legendTop,
-            left: legendLeft,
-            right: legendRight,
-            bottom: legendBottom,
-            formatter: legendFormatter || '{name}',
+            show: legendVisible
         },
         xAxis : [{
             type : 'value',
@@ -514,7 +467,39 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
         }
     }, themeConfig);
 
-    return option;
+    let mediaOption = {
+        baseOption: option,
+        media: legendVisible ? [{
+            query: { minWidth: 1000, minHeight: 1000 }, // I
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, minHeight: 1000 }, // H
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, minHeight: 1000 }, // G
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 1000 }, // F
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '16%' } }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 1000 }, // E
+            option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, maxHeight: 1000 }, // D
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { minWidth: 1000, maxHeight: 500 }, // C
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+        }, {
+            query: { maxWidth: 1000, maxHeight: 500 }, // B
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }, {
+            query: { maxWidth: 500, maxHeight: 500 }, // A
+            option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 30, left: 80, right: 80 } }
+        }] : []
+    }
+    
+    return mediaOption;
 }
 
 function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleConfig) {