散点图添加样式设置：轴标签旋转、距离

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

@@ -164,6 +164,71 @@ class ScatterStyle extends React.Component {
                     }}
                 />
             </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;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelMargin: value } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                axisLabel: {
+                                    margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                }
+                            } } } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelMargin: value } }) }];
+                            if(!!chartOption.baseOption) {
+                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                    }
+                                } } } }) });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields });
+                        }
+                    }}
+                />
+            </FormItem>
+            <FormItem label={<Tooltip title="横轴标签旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+                <InputNumber
+                    defaultValue={(scatterStyle.yLabelMargin === '' || scatterStyle.yLabelMargin === null || scatterStyle.yLabelMargin === undefined) ? null : scatterStyle.yLabelMargin}
+                    placeholder={0}
+                    onBlur={e => {
+                        let value = e.target.value;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yLabelMargin: value } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                axisLabel: {
+                                    rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                }
+                            } } } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yLabelMargin: value } }) }];
+                            if(!!chartOption.baseOption) {
+                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                    axisLabel: {
+                                        rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                    }
+                                } } } }) });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields });
+                        }
+                    }}
+                />
+            </FormItem>
             <Divider>纵轴名称</Divider>
             <FormItem label={<Tooltip title="名称相对纵轴显示位置">位置</Tooltip>} {...formItemLayout}>
                 <Select
@@ -239,6 +304,71 @@ class ScatterStyle extends React.Component {
                     }}
                 />
             </FormItem>
+            <Divider>纵轴标签</Divider>
+            <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
+                <InputNumber
+                    defaultValue={(scatterStyle.yLabelMargin === '' || scatterStyle.yLabelMargin === null || scatterStyle.yLabelMargin === undefined) ? null : scatterStyle.yLabelMargin}
+                    placeholder={8}
+                    onBlur={e => {
+                        let value = e.target.value;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yLabelMargin: value } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                axisLabel: {
+                                    margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                }
+                            } } } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { yLabelMargin: value } }) }];
+                            if(!!chartOption.baseOption) {
+                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    axisLabel: {
+                                        margin: (value === '' || value === null || value === undefined) ? 8 : Number(value)
+                                    }
+                                } } } }) });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields });
+                        }
+                    }}
+                />
+            </FormItem>
+            <FormItem label={<Tooltip title="横轴标签旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
+                <InputNumber
+                    defaultValue={(scatterStyle.yLabelRotate === '' || scatterStyle.xLabelRotate === null || scatterStyle.xLabelRotate === undefined) ? null : scatterStyle.xLabelRotate}
+                    placeholder={0}
+                    onBlur={e => {
+                        let value = e.target.value;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelRotate: value } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                axisLabel: {
+                                    rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                }
+                            } } } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { xLabelRotate: value } }) }];
+                            if(!!chartOption.baseOption) {
+                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
+                                    axisLabel: {
+                                        rotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
+                                    }
+                                } } } }) });
+                            }
+                            dispatch({ type: 'chartDesigner/setFields', fields });
+                        }
+                    }}
+                />
+            </FormItem>
             <Divider>区域缩放</Divider>
             <FormItem label='启用' {...formItemLayout}>
                 <Checkbox

src/models/EChartsMedia.js

@@ -62,7 +62,9 @@ export default function(chartType, legendVisible, dataZoomVisible, assignConfig)
             :
         [{
             query: { minWidth: 1000 }, // CFI
-            option: deepAssign({}, assignConfig)
+            option: deepAssign({
+                grid: { left: 50, right: 80 }
+            }, assignConfig)
         }, {
             query: { maxWidth: 1000 }, // BEH
             option: deepAssign({

src/models/parseChartOption.js

@@ -410,7 +410,9 @@ function pieOption(data, pieConfig, themeConfig, styleConfig, drillDown) {
 }
 
 function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
-    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, yNameLocation, yNameGap, yNameRotate, labelSymbolSize, dataZoomVisible } = styleConfig;
+    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, yNameLocation, yNameGap,
+        yNameRotate, labelSymbolSize, dataZoomVisible, xLabelRotate, xLabelMargin,
+        yLabelRotate, yLabelMargin} = styleConfig;
     const { xAxis, yAxis, groupBy } = scatterConfig;
     let xTitle = xAxis?`${xAxis.column.label}`:null
     let yTitle = yAxis?`${yAxis.column.label}`:null;
@@ -439,6 +441,10 @@ 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: {
+                rotate: (xLabelRotate === '' || xLabelRotate === null || xLabelRotate === undefined) ? 0 : Number(xLabelRotate),
+                margin: (xLabelMargin === '' || xLabelMargin === null || xLabelMargin === undefined) ? 8 : Number(xLabelMargin),
+            },
             scale:true,
             splitLine: {
                 show: true
@@ -450,6 +456,10 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
             nameLocation: (yNameLocation === '' || yNameLocation === null || yNameLocation === undefined) ? 'end' : yNameLocation,
             nameGap: (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),
+                margin: (yLabelMargin === '' || yLabelMargin === null || yLabelMargin === undefined) ? 8 : Number(yLabelMargin),
+            },
             scale:true,
             splitLine: {
                 show: true