图表样式自适应逻辑

src/components/chart/resolveChartThumbnailOption.js

@@ -6,7 +6,7 @@
  * @param option: Object 图表配置档
  */
 export default (option) => {
-    let _option = { ...option };
+    let _option = !!option.baseOption ? { ...option.baseOption } : { ...option };
     let viewType = _option.series ? (_option.series[0].type) : null;
 
     // 动画

src/components/chartDesigner/charts/echartsView.jsx

@@ -7,6 +7,7 @@ const EchartsView = ({ chartOption }) => {
     if(!chartOption || ((!chartOption.series || chartOption.series.length === 0) && (!chartOption.baseOption || !chartOption.baseOption.series || chartOption.baseOption.series.length === 0))) {
         return <EmptyContent />
     }else {
+        console.log(chartOption);
         return <Echarts
         key={hashcode(chartOption)}
         option={chartOption}

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

@@ -114,35 +114,14 @@ class BarStyle extends React.Component {
                             onChange={e => {
                                 let checked = e.target.checked;
                                 let seriesArr = [];
-                                let labelFormatter = barStyle.labelFormatter;
                                 for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                     seriesArr.push({
                                         label: { normal: {
                                             formatterKey: checked,
                                             formatter: !checked ? (params) => {
-                                                const { name : a, seriesName: b, value: c} = params;
-                                                // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
-                                                const obj = { a, b, c };
-                                                let str = labelFormatter || '{c}';
-                                                if(c === 0) {
-                                                    return '';
-                                                }else {
-                                                    let ss = `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
-                                                        let s;
-                                                        if(!Object.prototype.hasOwnProperty.call(obj, y)) {
-                                                            return x;
-                                                        }else {
-                                                            try {
-                                                                s = obj[y];
-                                                            }catch(e) {
-                                                                s = x;
-                                                            }
-                                                        }
-                                                        return s;
-                                                    })}`
-                                                    return ss;
-                                                }
-                                            } : ((labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter)
+                                                const { value } = params;
+                                                return value === 0 ? '' : value;
+                                            } : '{c}'
                                         } },
                                     });
                                 }
@@ -155,52 +134,6 @@ class BarStyle extends React.Component {
                     </FormItem>}
                 </Col>
             </Row>
-            {!!barStyle.labelVisible && <FormItem label={<Tooltip title="{a}：系列名 {b}：数据名 {c}：数据值">格式化</Tooltip>} {...formItemLayout}>
-                <Input
-                    defaultValue={barStyle.labelFormatter ? barStyle.labelFormatter : null}
-                    placeholder={'{c}'}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        let seriesArr = [];
-                        let labelZeroVisible = barStyle.labelZeroVisible;
-                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
-                            seriesArr.push({
-                                label: { normal: {
-                                    formatterKey: value,
-                                    formatter: !labelZeroVisible ? (params) => {
-                                        const { name : a, seriesName: b, value: c} = params;
-                                        // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
-                                        const obj = { a, b, c };
-                                        let str = value || '{c}';
-                                        if(c === 0) {
-                                            return '';
-                                        }else {
-                                            let ss = `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
-                                                let s;
-                                                if(!Object.prototype.hasOwnProperty.call(obj, y)) {
-                                                    return x;
-                                                }else {
-                                                    try {
-                                                        s = obj[y];
-                                                    }catch(e) {
-                                                        s = x;
-                                                    }
-                                                }
-                                                return s;
-                                            })}`
-                                            return ss;
-                                        }
-                                    } : ((value === '' || value === null || value === undefined) ? '{c}' : value)
-                                } },
-                            });
-                        }
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelFormatter: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
-                        ] });
-                    }}
-                />
-            </FormItem>}
             {!!barStyle.labelVisible && <Form.Item label='位置' {...formItemLayout}>
                 <Select
                     defaultValue={barStyle.labelPosition || 'inside'}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'dva'
-import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider } from 'antd'
+import { InputNumber, Form, Checkbox, Select, Tooltip, Divider } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
 const FormItem = Form.Item;
 
@@ -65,27 +65,6 @@ class LineStyle extends React.Component {
                     }}
                 />
             </FormItem>}
-            {!!lineStyle.labelVisible && <FormItem label={<Tooltip title="{a}：系列名 {b}：数据名 {c}：数据值">格式化</Tooltip>} {...formItemLayout}>
-                <Input
-                    defaultValue={lineStyle.labelFormatter ? lineStyle.labelFormatter : null}
-                    placeholder={'{c}'}
-                    onBlur={e => {
-                        let value = e.target.value;
-                        let seriesArr = [];
-                        for(let i = 0; i < chartOption.baseOption.series.length; i++) {
-                            seriesArr.push({
-                                label: {
-                                    normal: { formatter: (value === '' || value === null || value === undefined) ? '{c}' : value }
-                                }
-                            });
-                        }
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { line: { labelFormatter: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) },
-                        ] });
-                    }}
-                />
-            </FormItem>}
             {!!lineStyle.labelVisible && <Form.Item label='位置' {...formItemLayout}>
                 <Select
                     defaultValue={lineStyle.labelPosition || 'inside'}
@@ -107,14 +86,15 @@ class LineStyle extends React.Component {
                     <Select.Option value='right'>外右</Select.Option>
                     <Select.Option value='bottom'>外下</Select.Option>
                     <Select.Option value='inside'>内中</Select.Option>
-                    <Select.Option value='insideLeft'>内左</Select.Option>
-                    <Select.Option value='insideRight'>内右</Select.Option>
-                    <Select.Option value='insideTop'>内上</Select.Option>
-                    <Select.Option value='insideBottom'>内下</Select.Option>
-                    <Select.Option value='insideTopLeft'>内上左</Select.Option>
-                    <Select.Option value='insideBottomLeft'>内下左</Select.Option>
-                    <Select.Option value='insideTopRight'>内上右</Select.Option>
-                    <Select.Option value='insideBottomRight'>内下右</Select.Option>
+                    {/** 不知为何下面这些是反的 */}
+                    <Select.Option value='insideRight'>内左</Select.Option>
+                    <Select.Option value='insideLeft'>内右</Select.Option>
+                    <Select.Option value='insideBottom'>内上</Select.Option>
+                    <Select.Option value='insideTop'>内下</Select.Option>
+                    <Select.Option value='insideBottomRight'>内上左</Select.Option>
+                    <Select.Option value='insideTopRight'>内下左</Select.Option>
+                    <Select.Option value='insideBottomLeft'>内上右</Select.Option>
+                    <Select.Option value='insideTopLeft'>内下右</Select.Option>
                 </Select>
             </Form.Item>}
             {!!lineStyle.labelVisible && <FormItem label={<Tooltip title="标注相对设置位置方向的距离">位置距离</Tooltip>} {...formItemLayout}>

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

@@ -1,8 +1,7 @@
 import React from 'react'
 import { connect } from 'dva'
-import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
+import { InputNumber, Form, Select, Tooltip, Divider } from 'antd'
 import { deepAssign } from '../../../../utils/baseUtils'
-import adapteGridPosition from '../../../../models/adapteGridPosition'
 const FormItem = Form.Item;
 
 class ScatterStyle extends React.Component {
@@ -20,131 +19,12 @@ class ScatterStyle extends React.Component {
     render() {
         const { formItemLayout } = this.state;
         const { chartDesigner, dispatch } = this.props;
-        const { styleConfig, chartOption, scatterConfig } = chartDesigner;
-        const { groupBy } = scatterConfig;
+        const { styleConfig, chartOption } = chartDesigner;
         const scatterStyle = styleConfig.scatter || {};
-        chartOption.series = chartOption.series || [];
+        chartOption.baseOption = chartOption.baseOption || {};
+        chartOption.baseOption.series = chartOption.baseOption.series || [];
 
         return <Form>
-            <Divider>图域</Divider>
-            <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`scatter-grid-position-top-${scatterStyle.gridPosition ? scatterStyle.gridPosition['top'] : null}`}
-                            defaultValue={scatterStyle.gridPosition ? scatterStyle.gridPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { top: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { grid: {
-                                        top: (value && value !== 'auto') ? ( // 已设置图域上边距
-                                            value
-                                        ) : gridPosition.top,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`scatter-grid-position-bottom-${scatterStyle.gridPosition ? scatterStyle.gridPosition['bottom'] : null}`}
-                            defaultValue={scatterStyle.gridPosition ? scatterStyle.gridPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { bottom: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { grid: {
-                                        bottom: (value && value !== 'auto') ? ( // 已设置图域下边距
-                                            value
-                                        ) : gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`scatter-grid-position-left-${scatterStyle.gridPosition ? scatterStyle.gridPosition['left'] : null}`}
-                            defaultValue={scatterStyle.gridPosition ? scatterStyle.gridPosition['left'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { left: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { grid: {
-                                        left: (value && value !== 'auto') ? ( // 已设置图域左边距
-                                            value
-                                        ) : gridPosition.left,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            key={`scatter-grid-position-right-${scatterStyle.gridPosition ? scatterStyle.gridPosition['right'] : null}`}
-                            defaultValue={scatterStyle.gridPosition ? scatterStyle.gridPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { gridPosition: { right: value} } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { grid: {
-                                        right: (value !== '' && value !== 'auto') ? ( // 已设置图域右边距
-                                            value
-                                        ) : gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>
             <Divider>标注</Divider>
             <Form.Item label='标注符号' {...formItemLayout}>
                 <Select
@@ -323,202 +203,6 @@ class ScatterStyle extends React.Component {
                     }}
                 />
             </FormItem>
-            {!!groupBy && !!groupBy.key && <Divider>图例</Divider>}
-            {!!groupBy && !!groupBy.key && <Row>
-                <Col span={!!scatterStyle.legendHidden ? 24 : 12}>
-                    <Form.Item label='隐藏' labelCol={{ span: !!scatterStyle.legendHidden ? 8 : 16 }} wrapperCol={{ span: !!scatterStyle.legendHidden ? 16 : 8 }}>
-                        <Checkbox
-                            checked={!!scatterStyle.legendHidden}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: checked,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendHidden: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { show: !checked }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right,
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>
-                {!!groupBy && !!groupBy.key && !scatterStyle.legendHidden && <Col span={12}>
-                    <Form.Item label='分页' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
-                        <Checkbox
-                            checked={!!scatterStyle.legendInPagination}
-                            onChange={e => {
-                                let checked = e.target.checked;
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendInPagination: checked } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: { type: checked ? 'scroll' : 'plain' } }) },
-                                ] });
-                            }}
-                        />
-                    </Form.Item>
-                </Col>}
-            </Row>}
-            {!!groupBy && !!groupBy.key && !scatterStyle.legendHidden && <Form.Item label='排布方向' {...formItemLayout}>
-                <Select
-                    defaultValue={scatterStyle.legendOrient || 'vertical'}
-                    onChange={(value, item) => {
-                        let gridPosition = adapteGridPosition({
-                            legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                            legendOrient: value,
-                            legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                            legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                            legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                            legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                        });
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendOrient: value } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, {
-                                legend: { orient: value },
-                                grid: {
-                                    top: gridPosition.top,
-                                    left: gridPosition.left,
-                                    bottom: gridPosition.bottom,
-                                    right: gridPosition.right,
-                                },
-                            }) },
-                        ] });
-                    }}
-                >
-                    <Select.Option value='vertical'>纵向排布</Select.Option>
-                    <Select.Option value='horizontal'>横向排布</Select.Option>
-                </Select>
-            </Form.Item>}
-            {!!groupBy && !!groupBy.key && !scatterStyle.legendHidden && <Form.Item label='位置' {...formItemLayout}>
-                <Row>
-                    <Col span={8}>上边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={scatterStyle.legendPosition ? scatterStyle.legendPosition['top'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let legendTop = (value === '' || value === null || value === undefined) ? 50 : value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { top: value}, gridPosition: { top: gridPosition.top } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        top: legendTop,
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom,
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>下边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={scatterStyle.legendPosition ? scatterStyle.legendPosition['bottom'] : null}
-                            placeholder={50}
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let legendBottom = (value === '' || value === null || value === undefined) ? 50 : value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { bottom: value}, gridPosition: { bottom: gridPosition.bottom } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        bottom: legendBottom
-                                    }, grid: {
-                                        top: gridPosition.top,
-                                        bottom: gridPosition.bottom
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>左边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={scatterStyle.legendPosition ? scatterStyle.legendPosition['left'] : null}
-                            placeholder='auto'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let legendLeft = (value === '' || value === null || value === undefined) ? 'auto' : value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft,
-                                    legendRight: scatterStyle.legendPosition ? scatterStyle.legendPosition.right || '5%' : '5%',
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { left: value }, gridPosition: { left: gridPosition.left } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        left: legendLeft,
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-                <Row>
-                    <Col span={8}>右边距：</Col>
-                    <Col span={16}>
-                        <Input
-                            defaultValue={scatterStyle.legendPosition ? scatterStyle.legendPosition['right'] : null}
-                            placeholder='5%'
-                            onBlur={e => {
-                                let value = e.target.value;
-                                let legendRight = (value === '' || value === null || value === undefined) ? '5%' : value;
-                                let gridPosition = adapteGridPosition({
-                                    legendHidden: !!groupBy && !!groupBy.key ? scatterStyle.legendHidden : true,
-                                    legendOrient: scatterStyle.legendOrient || 'vertical',
-                                    legendLeft: scatterStyle.legendPosition ? scatterStyle.legendPosition.left || 'auto' : 'auto',
-                                    legendRight,
-                                    legendTop: scatterStyle.legendPosition ? scatterStyle.legendPosition.top || 50 : 50,
-                                    legendBottom: scatterStyle.legendPosition ? scatterStyle.legendPosition.bottom || 50 : 50,
-                                });
-                                dispatch({ type: 'chartDesigner/setFields', fields: [
-                                    { name: 'styleConfig', value: deepAssign(styleConfig, { scatter: { legendPosition: { right: value}, gridPosition: { right: gridPosition.right } } }) },
-                                    { name: 'chartOption', value: deepAssign(chartOption, { legend: {
-                                        right: legendRight
-                                    }, grid: {
-                                        left: gridPosition.left,
-                                        right: gridPosition.right
-                                    } }) },
-                                ] });
-                            }}
-                        />
-                    </Col>
-                </Row>
-            </Form.Item>}
         </Form>
     }
 }

src/models/adapteGridPosition.js

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

src/models/parseChartOption.js

@@ -58,7 +58,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, labelFormatter, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
+        labelRotate, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
         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
@@ -115,7 +115,7 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
             return {
                 name: groupBy ? s.name : (yAxis.column.label || s.name),
                 type: 'bar',
-                data: s.value,
+                data: s.value.map(v => numberFormat(v)),
                 barMaxWidth: barMaxWidth || 80,
                 barMinHeight: barMinHeight || 0,
                 barGap: barGap || '30%',
@@ -126,30 +126,10 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
                         position: labelPosition || 'inside',
                         distance: (labelDistance === '' || labelDistance === null || labelDistance === undefined) ? 5 : Number(labelDistance),
                         rotate: (labelRotate === '' || labelRotate === null || labelRotate === undefined) ? 0 : Number(labelRotate),
-                        // formatter: (labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter,
                         formatter: !labelZeroVisible ? (params) => {
-                            const { name : a, seriesName: b, value: c} = params;
-                            // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
-                            const obj = { a, b, c };
-                            let str = labelFormatter || '{c}';
-                            if(c === 0) {
-                                return '';
-                            }else {
-                                return `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
-                                    let s;
-                                    if(!Object.prototype.hasOwnProperty.call(obj, y)) {
-                                        return x;
-                                    }else {
-                                        try {
-                                            s = obj[y];
-                                        }catch(e) {
-                                            s = x;
-                                        }
-                                    }
-                                    return s;
-                                })}`
-                            }
-                        } : ((labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter),
+                            const { value } = params;
+                            return value === 0 ? '' : value;
+                        } : '{c}'
                     }
                 }
             }
@@ -197,7 +177,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,
-        labelFormatter, lineSmooth, labelSymbolSize } = styleConfig;
+        lineSmooth, labelSymbolSize } = styleConfig;
     const { xAxis, yAxis, groupBy } = lineConfig;
     let xTitle = xAxis?`${xAxis.column.label}${xAxis.granularity.value?'('+xAxis.granularity.label+')':''}`:null
     let yTitle = yAxis?`${yAxis.column.label}${yAxis.gauge.value?'('+yAxis.gauge.label+')':''}`:null
@@ -244,14 +224,16 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
                         position: labelPosition || 'inside',
                         distance: (labelDistance === '' || labelDistance === null || labelDistance === undefined) ? 5 : Number(labelDistance),
                         rotate: (labelRotate === '' || labelRotate === null || labelRotate === undefined) ? 0 : Number(labelRotate),
-                        formatter: (labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter,
+                        formatter: function(params) {
+                            return params.value[1]
+                        }
                     },
                 },
                 symbol: !labelSymbol ? 'emptyCircle' : labelSymbol,
                 symbolSize: (labelSymbolSize === '' || labelSymbolSize === null || labelSymbolSize === undefined) ? 4 : Number(labelSymbolSize),
                 smooth: !!lineSmooth,
                 data: s.mdata.map(m => {
-                    return [m.date, m.value]
+                    return [m.date, numberFormat(m.value)]
                 }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
             }
         }),
@@ -296,6 +278,7 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
 }
 
 function pieOption(data, pieConfig, themeConfig, styleConfig) {
+    let { labelHidden } = styleConfig;
     let columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
 
     let option = deepAssign({
@@ -339,8 +322,26 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
             type: 'pie',
             radius: [0, '65%'],
             center: ['50%', '50%'],
+            label: {
+                normal: {
+                    show: labelHidden === undefined ? true : !labelHidden,
+                },
+                emphasis: {
+                    show: true,
+                }
+            },
+            labelLine: {
+                normal: {
+                    show: labelHidden === undefined ? true : !labelHidden,
+                },
+                emphasis: {
+                    show: true,
+                }
+            },
+            avoidLabelOverlap: labelHidden === undefined ? true : !labelHidden,
             data: (data.serieses || [{ value: [] }])[0].value.map(v => {
                 let obj = { ...v };
+                obj.value = numberFormat(obj.value)
                 if(!v.name) {
                     obj.name = '空'
                 }else {
@@ -458,7 +459,7 @@ function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
                 symbol: !labelSymbol ? 'circle' : labelSymbol,
                 symbolSize: (labelSymbolSize === '' || labelSymbolSize === null || labelSymbolSize === undefined) ? 10 : Number(labelSymbolSize),
                 data: s.mdata.map(m => {
-                    return [m.date, m.value]
+                    return [m.date, numberFormat(m.value)]
                 })
             }
         }),