图表允许隐藏轴名称

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

@@ -303,7 +303,23 @@ class BarStyle extends React.Component {
                 />
             </FormItem>}
             <Divider>横轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!barStyle.xNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let xNameGap = barStyle.xNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                nameGap: checked ? -9999 : (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!barStyle.xNameHidden && <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={barStyle.xNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -320,8 +336,8 @@ class BarStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!barStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(barStyle.xNameGap === '' || barStyle.xNameGap === null || barStyle.xNameGap === undefined) ? null : barStyle.xNameGap}
                     placeholder={15}
@@ -348,8 +364,8 @@ class BarStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!barStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(barStyle.xNameRotate === '' || barStyle.xNameRotate === null || barStyle.xNameRotate === undefined) ? null : barStyle.xNameRotate}
                     placeholder={0}
@@ -376,7 +392,7 @@ class BarStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             <Divider>横轴标签</Divider>
             <FormItem label={<Tooltip title="当横轴标签文本全部显示会相互覆盖时可以隐藏部分标签文本">隐藏重叠标签</Tooltip>} {...formItemLayout}>
                 <Checkbox
@@ -460,7 +476,23 @@ class BarStyle extends React.Component {
                 />
             </FormItem>
             <Divider>纵轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!barStyle.yNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let yNameGap = barStyle.yNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                nameGap: checked ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!barStyle.yNameHidden && <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={barStyle.yNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -477,8 +509,8 @@ class BarStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!barStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(barStyle.yNameGap === '' || barStyle.yNameGap === null || barStyle.yNameGap === undefined) ? null : barStyle.yNameGap}
                     placeholder={15}
@@ -505,8 +537,8 @@ class BarStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!barStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(barStyle.yNameRotate === '' || barStyle.yNameRotate === null || barStyle.yNameRotate === undefined) ? null : barStyle.yNameRotate}
                     placeholder={0}
@@ -533,7 +565,7 @@ class BarStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
             {!!groupBy && !!groupBy.key && <FormItem label='启用' {...formItemLayout}>
                 <Checkbox

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

@@ -244,7 +244,23 @@ class LineStyle extends React.Component {
                 />
             </Form.Item>}
             <Divider>横轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!lineStyle.xNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let xNameGap = lineStyle.xNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { xNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                nameGap: checked ? -9999 : (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!lineStyle.xNameHidden && <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={lineStyle.xNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -261,8 +277,8 @@ class LineStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!lineStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.xNameGap === '' || lineStyle.xNameGap === null || lineStyle.xNameGap === undefined) ? null : lineStyle.xNameGap}
                     placeholder={15}
@@ -289,8 +305,8 @@ class LineStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!lineStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.xNameRotate === '' || lineStyle.xNameRotate === null || lineStyle.xNameRotate === undefined) ? null : lineStyle.xNameRotate}
                     placeholder={0}
@@ -317,7 +333,7 @@ class LineStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             <Divider>横轴标签</Divider>
             <FormItem label={<Tooltip title="当横轴标签文本全部显示会相互覆盖时可以隐藏部分标签文本">隐藏重叠标签</Tooltip>} {...formItemLayout}>
                 <Checkbox
@@ -401,7 +417,23 @@ class LineStyle extends React.Component {
                 />
             </FormItem>
             <Divider>纵轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!lineStyle.yNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let yNameGap = lineStyle.yNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { yNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                nameGap: checked ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!lineStyle.yNameHidden && <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={lineStyle.yNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -418,8 +450,8 @@ class LineStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!lineStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.yNameGap === '' || lineStyle.yNameGap === null || lineStyle.yNameGap === undefined) ? null : lineStyle.yNameGap}
                     placeholder={15}
@@ -446,8 +478,8 @@ class LineStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!lineStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.yNameRotate === '' || lineStyle.yNameRotate === null || lineStyle.yNameRotate === undefined) ? null : lineStyle.yNameRotate}
                     placeholder={0}
@@ -474,7 +506,7 @@ class LineStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
             {!!groupBy && !!groupBy.key && <FormItem label='数据堆叠' {...formItemLayout}>
                 <Checkbox

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

@@ -90,7 +90,23 @@ class ScatterStyle extends React.Component {
                 />
             </Form.Item>}
             <Divider>横轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!scatterStyle.xNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let xNameGap = scatterStyle.xNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                nameGap: checked ? -9999 : (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!scatterStyle.xNameHidden && <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={scatterStyle.xNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -107,8 +123,8 @@ class ScatterStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!scatterStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(scatterStyle.xNameGap === '' || scatterStyle.xNameGap === null || scatterStyle.xNameGap === undefined) ? null : scatterStyle.xNameGap}
                     placeholder={15}
@@ -135,8 +151,8 @@ class ScatterStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!scatterStyle.xNameHidden && <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(scatterStyle.xNameRotate === '' || scatterStyle.xNameRotate === null || scatterStyle.xNameRotate === undefined) ? null : scatterStyle.xNameRotate}
                     placeholder={0}
@@ -163,7 +179,7 @@ class ScatterStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             <Divider>横轴标签</Divider>
             <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
@@ -230,7 +246,23 @@ class ScatterStyle extends React.Component {
                 />
             </FormItem>
             <Divider>纵轴名称</Divider>
-            <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
+            <FormItem label='隐藏' {...formItemLayout}>
+                <Checkbox
+                    checked={!!scatterStyle.yNameHidden}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let yNameGap = scatterStyle.yNameGap;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yNameHidden: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                nameGap: checked ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+                            }} } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
+            {!scatterStyle.yNameHidden && <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
                     defaultValue={scatterStyle.yNameLocation || 'end'}
                     onChange={(value, item) => {
@@ -247,8 +279,8 @@ class ScatterStyle extends React.Component {
                     <Select.Option value='center'>中间</Select.Option>
                     <Select.Option value='end'>尾部</Select.Option>
                 </Select>
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!scatterStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(scatterStyle.yNameGap === '' || scatterStyle.yNameGap === null || scatterStyle.yNameGap === undefined) ? null : scatterStyle.yNameGap}
                     placeholder={15}
@@ -275,8 +307,8 @@ class ScatterStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
-            <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+            </FormItem>}
+            {!scatterStyle.yNameHidden && <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(scatterStyle.yNameRotate === '' || scatterStyle.yNameRotate === null || scatterStyle.yNameRotate === undefined) ? null : scatterStyle.yNameRotate}
                     placeholder={0}
@@ -303,7 +335,7 @@ class ScatterStyle extends React.Component {
                         }
                     }}
                 />
-            </FormItem>
+            </FormItem>}
             <Divider>纵轴标签</Divider>
             <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber

src/models/parseChartOption.js

@@ -70,7 +70,7 @@ function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
     const { xAxis, yAxis, groupBy } = barConfig;
     const { barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
         labelRotate, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate, dataZoomVisible,
-        xLabelMargin, yNameLocation, yNameGap, yNameRotate, labelZeroVisible } = styleConfig;
+        xLabelMargin, yNameLocation, yNameGap, yNameRotate, labelZeroVisible, xNameHidden, yNameHidden } = styleConfig;
     let xTitle = xAxis?`${xAxis.column.label}`:null
     let yTitle = yAxis?`${yAxis.column.label}`:null
     let xGranularityV = xAxis?`${xAxis.granularity.value}`:null
@@ -108,7 +108,7 @@ function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
         xAxis: [{
             type: 'category',
             nameLocation: (xNameLocation === '' || xNameLocation === null || xNameLocation === undefined) ? 'end' : xNameLocation,
-            nameGap: (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+            nameGap: xNameHidden ? -9999 : (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),
@@ -142,7 +142,7 @@ function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
             name: yTitle || '纵轴',
             type: 'value',
             nameLocation: (yNameLocation === '' || yNameLocation === null || yNameLocation === undefined) ? 'end' : yNameLocation,
-            nameGap: (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+            nameGap: yNameHidden ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
             nameRotate: (yNameRotate === '' || yNameRotate === null || yNameRotate === undefined) ? 0 : Number(yNameRotate),
         }],
         series: data.serieses.map(s => {
@@ -192,7 +192,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
     }
     const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin, xLabelHiddenCover,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
-        lineSmooth, labelSymbolSize, dataZoomVisible } = styleConfig;
+        lineSmooth, labelSymbolSize, dataZoomVisible, xNameHidden, yNameHidden } = styleConfig;
     const { xAxis, yAxis, groupBy } = lineConfig;
     let xTitle = xAxis?`${xAxis.column.label}`:null
     let yTitle = yAxis?`${yAxis.column.label}`:null
@@ -232,7 +232,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
             name: xTitle || '横轴',
             type: 'category',
             nameLocation: (xNameLocation === '' || xNameLocation === null || xNameLocation === undefined) ? 'end' : xNameLocation,
-            nameGap: (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+            nameGap: xNameHidden ? -9999 : (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),
@@ -265,7 +265,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
             name: yTitle || '纵轴',
             type: 'value',
             nameLocation: (yNameLocation === '' || yNameLocation === null || yNameLocation === undefined) ? 'end' : yNameLocation,
-            nameGap: (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+            nameGap: yNameHidden ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
             nameRotate: (yNameRotate === '' || yNameRotate === null || yNameRotate === undefined) ? 0 : Number(yNameRotate),
         }],
         series: data.serieses.map(s => {
@@ -412,7 +412,7 @@ function pieOption(data, pieConfig, themeConfig, styleConfig, drillDown) {
 function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
     const { labelSymbol, xNameLocation, xNameGap, xNameRotate, yNameLocation, yNameGap,
         yNameRotate, labelSymbolSize, dataZoomVisible, xLabelRotate, xLabelMargin,
-        yLabelRotate, yLabelMargin} = styleConfig;
+        yLabelRotate, yLabelMargin, xNameHidden, yNameHidden } = styleConfig;
     const { xAxis, yAxis, groupBy } = scatterConfig;
     let xTitle = xAxis?`${xAxis.column.label}`:null
     let yTitle = yAxis?`${yAxis.column.label}`:null;
@@ -439,7 +439,7 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             type : 'value',
             name: xTitle || '横轴',
             nameLocation: (xNameLocation === '' || xNameLocation === null || xNameLocation === undefined) ? 'end' : xNameLocation,
-            nameGap: (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
+            nameGap: xNameHidden ? -9999 : (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
             nameRotate: (xNameRotate === '' || xNameRotate === null || xNameRotate === undefined) ? 0 : Number(xNameRotate),
             axisLabel: {
                 rotate: (xLabelRotate === '' || xLabelRotate === null || xLabelRotate === undefined) ? 0 : Number(xLabelRotate),
@@ -454,7 +454,7 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             type : 'value',
             name: yTitle || '纵轴',
             nameLocation: (yNameLocation === '' || yNameLocation === null || yNameLocation === undefined) ? 'end' : yNameLocation,
-            nameGap: (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
+            nameGap: yNameHidden ? -9999 : (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
             nameRotate: (yNameRotate === '' || yNameRotate === null || yNameRotate === undefined) ? 0 : Number(yNameRotate),
             axisLabel: {
                 rotate: (yLabelRotate === '' || yLabelRotate === null || yLabelRotate === undefined) ? 0 : Number(yLabelRotate),