图表布局自适应使用统一逻辑

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

@@ -2,7 +2,8 @@ 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'
-const FormItem = Form.Item;
+import EChartsMedia from '../../../../models/EChartsMedia'
+const FormItem = Form.Item
 
 class BarStyle extends React.Component {
     
@@ -44,6 +45,21 @@ class BarStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } } ) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            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, { baseOption: { series: seriesArr } } ) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="柱条最小高度，可用于防止某数据项的值过小而影响交互">柱条最小高度</Tooltip>} {...formItemLayout}>
@@ -63,6 +79,21 @@ class BarStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            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, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="柱间距离，为相对柱子宽度的百分比。如果想要分组的柱子重叠而不使用数据堆叠，可以设置为 '-100%'">柱间距离</Tooltip>} {...formItemLayout}>
@@ -82,6 +113,21 @@ class BarStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            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, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <Divider>标注</Divider>
@@ -184,6 +230,23 @@ class BarStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
+                                seriesArr.push({
+                                    label: {
+                                         normal: { distance: (value === '' || value === null || value === undefined) ? 5 : Number(value) }
+                                    }
+                                });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelDistance: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>}
             {!!barStyle.labelVisible && <FormItem label={<Tooltip title="标注旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -205,6 +268,23 @@ class BarStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
+                                seriesArr.push({
+                                    label: {
+                                        normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value) }
+                                    }
+                                });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>}
             <Divider>横轴名称</Divider>
@@ -238,6 +318,17 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -253,6 +344,17 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <Divider>横轴标签</Divider>
@@ -287,6 +389,19 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelMargin: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                    }
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="横轴标签旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -304,6 +419,19 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                    }
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <Divider>纵轴名称</Divider>
@@ -337,6 +465,17 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -352,6 +491,17 @@ class BarStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
@@ -373,6 +523,23 @@ class BarStyle extends React.Component {
                     }}
                 />
             </FormItem>}
+            <Divider>区域缩放</Divider>
+            <FormItem label='启用' {...formItemLayout}>
+                <Checkbox
+                    checked={!!barStyle.dataZoomVisible}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let legendVisible = chartOption.baseOption.legend ? chartOption.baseOption.legend.show : false;
+                        dispatch({ type: 'chartDesigner/setFields', fields: [
+                            { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { dataZoomVisible: checked } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                baseOption: { dataZoom: { show: checked } },
+                                media: EChartsMedia('bar', legendVisible, checked)
+                            }) },
+                        ] });
+                    }}
+                />
+            </FormItem>
         </Form>
     }
 }

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

@@ -2,7 +2,8 @@ import React from 'react'
 import { connect } from 'dva'
 import { InputNumber, Form, Checkbox, Select, Tooltip, Divider } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
-const FormItem = Form.Item;
+import EChartsMedia from '../../../../models/EChartsMedia'
+const FormItem = Form.Item
 
 class LineStyle extends React.Component {
     
@@ -116,6 +117,23 @@ class LineStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
+                                seriesArr.push({
+                                    label: {
+                                        normal: { distance: (value === '' || value === null || value === undefined) ? 5 : Number(value) }
+                                    }
+                                });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelDistance: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>}
             {!!lineStyle.labelVisible && <FormItem label={<Tooltip title="标注旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -137,6 +155,23 @@ class LineStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
+                                seriesArr.push({
+                                    label: {
+                                        normal: { rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value) }
+                                    }
+                                });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>}
             <Form.Item label='标注符号' {...formItemLayout}>
@@ -183,6 +218,21 @@ class LineStyle extends React.Component {
                             { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            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, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </Form.Item>}
             <Divider>横轴名称</Divider>
@@ -216,6 +266,17 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -231,6 +292,17 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <Divider>横轴标签</Divider>
@@ -249,6 +321,19 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelMargin: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                    }
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="横轴标签旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -266,6 +351,19 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                    }
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <Divider>纵轴名称</Divider>
@@ -299,6 +397,17 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -314,6 +423,17 @@ class LineStyle extends React.Component {
                             } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
@@ -335,6 +455,23 @@ class LineStyle extends React.Component {
                     }}
                 />
             </FormItem>}
+            <Divider>区域缩放</Divider>
+            <FormItem label='启用' {...formItemLayout}>
+                <Checkbox
+                    checked={!!lineStyle.dataZoomVisible}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let legendVisible = chartOption.baseOption.legend ? chartOption.baseOption.legend.show : false;
+                        dispatch({ type: 'chartDesigner/setFields', fields: [
+                            { name: 'styleConfig', value: deepAssign(styleConfig, { line: { dataZoomVisible: checked } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                baseOption: { dataZoom: { show: checked } },
+                                media: EChartsMedia('line', legendVisible, checked)
+                            }) },
+                        ] });
+                    }}
+                />
+            </FormItem>
         </Form>
     }
 }

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import { connect } from 'dva'
-import { InputNumber, Form, Select, Tooltip, Divider } from 'antd'
+import { InputNumber, Form, Select, Checkbox, Tooltip, Divider } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
-const FormItem = Form.Item;
+import EChartsMedia from '../../../../models/EChartsMedia'
+const FormItem = Form.Item
 
 class ScatterStyle extends React.Component {
     
@@ -31,14 +32,14 @@ class ScatterStyle extends React.Component {
                     defaultValue={scatterStyle.labelSymbol || 'circle'}
                     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, { scatter: { labelSymbol: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
                 >
@@ -60,16 +61,31 @@ class ScatterStyle 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) ? 10 : Number(value)
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { labelSymbolSize: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let seriesArr = [];
+                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
+                                seriesArr.push({
+                                    symbolSize: (value === '' || value === null || value === undefined) ? 10 : Number(value)
+                                });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { labelSymbolSize: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
+                            ] });
+                        }
+                    }}
                 />
             </Form.Item>}
             <Divider>横轴名称</Divider>
@@ -79,9 +95,9 @@ class ScatterStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { 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
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -98,11 +114,22 @@ class ScatterStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -113,45 +140,21 @@ class ScatterStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { 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={(scatterStyle.xLabelMargin === '' || scatterStyle.xLabelMargin === null || scatterStyle.xLabelMargin === undefined) ? null : scatterStyle.xLabelMargin}
-                    placeholder={8}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelMargin: 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={(scatterStyle.xLabelRotate === '' || scatterStyle.xLabelRotate === null || scatterStyle.xLabelRotate === undefined) ? null : scatterStyle.xLabelRotate}
-                    placeholder={0}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelRotate: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { xAxis: { 0: {
-                                axisLabel: {
-                                    rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
-                                }
-                            } } }) },
-                        ] });
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
                     }}
                 />
             </FormItem>
@@ -162,9 +165,9 @@ class ScatterStyle extends React.Component {
                     onChange={(value, item) => {
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { 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,
-                             }} }) },
+                             }} } }) },
                         ] });
                     }}
                 >
@@ -181,11 +184,22 @@ class ScatterStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameGap: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { yAxis: { 0: {
+                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                 nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
-                            } } }) },
+                            } } } }) },
                         ] });
                     }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameGap: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
                 />
             </FormItem>
             <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
@@ -196,9 +210,37 @@ class ScatterStyle extends React.Component {
                         let value = e.target.value;
                         dispatch({ type: 'chartDesigner/setFields', fields: [
                             { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { 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)
-                            } } }) },
+                            } } } }) },
+                        ] });
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            dispatch({ type: 'chartDesigner/setFields', fields: [
+                                { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameRotate: value } }) },
+                                { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                } } } }) },
+                            ] });
+                        }
+                    }}
+                />
+            </FormItem>
+            <Divider>区域缩放</Divider>
+            <FormItem label='启用' {...formItemLayout}>
+                <Checkbox
+                    checked={!!scatterStyle.dataZoomVisible}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let legendVisible = chartOption.baseOption.legend ? chartOption.baseOption.legend.show : false;
+                        dispatch({ type: 'chartDesigner/setFields', fields: [
+                            { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { dataZoomVisible: checked } }) },
+                            { name: 'chartOption', value: deepAssign(chartOption, {
+                                baseOption: { dataZoom: { show: checked } },
+                                media: EChartsMedia('scatter', legendVisible, checked)
+                            }) },
                         ] });
                     }}
                 />

src/models/EChartsMedia.js

@@ -0,0 +1,78 @@
+/**
+ * 图表自适应调整，宽高阈值分为两档，500和1000
+ * 
+ *      | G  | H  | I
+ * 1000 +----+----+---
+ *      | D  | E  | F
+ *  500 +----+----+---
+ *      | A  | B  | C
+ *    0 +----+----+---
+ *      0   500  1000
+ */
+export default function(chartType, legendVisible, dataZoomVisible) {
+    if(chartType === 'bar' || chartType === 'line' || chartType === 'scatter') {
+        return 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: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, } :
+                { legend: { type: 'scroll', right: 'center', top: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, minHeight: 1000 }, // G
+            option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, } :
+                { legend: { type: 'scroll', right: 'center', top: 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: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, } :
+                { legend: { type: 'scroll', right: 'center', top: 50, orient: 'horizontal', width: '90%' }, }
+        }, {
+            query: { maxWidth: 500, maxHeight: 1000 }, // D
+            option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, } :
+                { legend: { type: 'scroll', right: 'center', top: 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: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 50, left: 80, right: 80 } } :
+                { legend: { type: 'scroll', right: 'center', top: 20, orient: 'horizontal', width: '90%' }, grid: { top: 80, left: 80, right: 80 } }
+        }, {
+            query: { maxWidth: 500, maxHeight: 500 }, // A
+            option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 50, left: 80, right: 80 } } :
+                { legend: { type: 'scroll', right: 'center', top: 20, orient: 'horizontal', width: '90%' }, grid: { top: 80, left: 80, right: 80 } }
+        }] : []
+    }else if(chartType === 'pie') {
+        return [{
+            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%'] }] }
+        }]
+    } 
+}

src/models/parseChartOption.js

@@ -6,6 +6,7 @@ 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 EChartsMedia from './EChartsMedia'
 
 export default function(viewType, data, chartConfig, themeName, styleConfig) {
     if(!data) {
@@ -58,7 +59,7 @@ export default function(viewType, data, chartConfig, themeName, styleConfig) {
 function barOption(data, barConfig, themeConfig, styleConfig) {
     const { xAxis, yAxis, groupBy } = barConfig;
     const { barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
-        labelRotate, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
+        labelRotate, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate, dataZoomVisible,
         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
@@ -135,40 +136,13 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
             }
         }),
         dataZoom: {
-            show: false
+            show: !!dataZoomVisible
         }
     }, 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 } }
-        }] : []
+        media: EChartsMedia('bar', legendVisible, dataZoomVisible)
     }
     
     return mediaOption;
@@ -177,7 +151,7 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
 function lineOption(data, lineConfig, themeConfig, styleConfig) {
     const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
-        lineSmooth, labelSymbolSize } = styleConfig;
+        lineSmooth, labelSymbolSize, dataZoomVisible } = 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
@@ -213,7 +187,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
             nameRotate: (yNameRotate === '' || yNameRotate === null || yNameRotate === undefined) ? 0 : Number(yNameRotate),
         }],
         
-        series: (data.serieses || []).map(s => {
+        series: data.serieses.map(s => {
             return {
                 name: s.name,
                 type: 'line',
@@ -233,45 +207,18 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
                 symbolSize: (labelSymbolSize === '' || labelSymbolSize === null || labelSymbolSize === undefined) ? 4 : Number(labelSymbolSize),
                 smooth: !!lineSmooth,
                 data: s.mdata.map(m => {
-                    return [m.date, numberFormat(m.value)]
+                    return m ? [m.date, numberFormat(m.value)] : [null, 0]
                 }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
             }
         }),
         dataZoom: {
-            show: false
+            show: !!dataZoomVisible
         }
     }, themeConfig, styleConfig);
 
     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 } }
-        }] : []
+        media: EChartsMedia('line', legendVisible, dataZoomVisible)
     }
     
     return mediaOption;
@@ -364,52 +311,16 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
         }]
     }, themeConfig);
 
-    /**
-     *      | 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%'] }] }
-        }]
+        media: EChartsMedia('pie')
     }
 
     return mediaOption;
 }
 
 function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
-    const { labelSymbol,xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin, yNameLocation, yNameGap, yNameRotate, labelSymbolSize, xLabelHiddenCover } = styleConfig;
+    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, yNameLocation, yNameGap, yNameRotate, labelSymbolSize, dataZoomVisible } = 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
@@ -431,11 +342,6 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             nameLocation: (xNameLocation === '' || xNameLocation === null || xNameLocation === undefined) ? 'end' : xNameLocation,
             nameGap: (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
             nameRotate: (xNameRotate === '' || xNameRotate === null || xNameRotate === undefined) ? 0 : Number(xNameRotate),
-            axisLabel: {
-                interval: xLabelHiddenCover === undefined ? 'auto' : (!!xLabelHiddenCover ? 'auto' : 0),
-                rotate: (xLabelRotate === '' || xLabelRotate === null || xLabelRotate === undefined) ? 0 : Number(xLabelRotate),
-                margin: (xLabelMargin === '' || xLabelMargin === null || xLabelMargin === undefined) ? 8 : Number(xLabelMargin),
-            },
             scale:true,
             splitLine: {
                 show: true
@@ -464,40 +370,13 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             }
         }),
         dataZoom: {
-            show: false
+            show: !!dataZoomVisible
         }
     }, 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 } }
-        }] : []
+        media: EChartsMedia('scatter', legendVisible, dataZoomVisible)
     }
     
     return mediaOption;