platform-bi-web/src/components/chartDesigner/sections/style/bar.jsx

import React from 'react'
import { connect } from 'dva'
import { Input, InputNumber, Form, Checkbox, Select, Tooltip, Divider, Row, Col } from 'antd'
import { deepAssign } from '../../../../utils/baseUtils'
import EChartsMedia from '../../../../models/EChartsMedia'
const FormItem = Form.Item

class BarStyle extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            },
        }
    }

    render() {
        const { formItemLayout } = this.state;
        const { chartDesigner, dispatch } = this.props;
        const { styleConfig, chartOption, barConfig } = chartDesigner;
        const { groupBy } = barConfig;
        const barStyle = styleConfig.bar || {};

        return <Form>
            <Divider>柱条</Divider>
            <FormItem label={<Tooltip title="柱条的最大宽度，支持设置成绝对数值或相对于类目宽度的百分比">柱条最大宽度</Tooltip>} {...formItemLayout}>
                <Input
                    defaultValue={barStyle.barMaxWidth ? barStyle.barMaxWidth : null}
                    placeholder='60'
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMaxWidth: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    barMaxWidth: value || '60'
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } } ) });
                        }
                        
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [
                                { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMaxWidth: value } }) }
                            ]
                            if(!!chartOption.baseOption) {
                                let seriesArr = [];
                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                    seriesArr.push({
                                        barMaxWidth: value || '60'
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } } ) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="柱条最小高度，可用于防止某数据项的值过小而影响交互">柱条最小高度</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.barMinHeight === '' || barStyle.barMinHeight === null || barStyle.barMinHeight === undefined) ? null : barStyle.barMinHeight}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMinHeight: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    barMinHeight: value || 0
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barMinHeight: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    barMinHeight: value || 0
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="柱间距离，为相对柱子宽度的百分比。如果想要分组的柱子重叠而不使用数据堆叠，可以设置为 '-100%'">柱间距离</Tooltip>} {...formItemLayout}>
                <Input
                    defaultValue={barStyle.barGap ? barStyle.barGap : null}
                    placeholder={'30%'}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barGap: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    barGap: value || '30%'
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { barGap: value } }) }];
                            if(!!chartOption.baseOption) {
                                let seriesArr = [];
                                for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                    seriesArr.push({
                                        barGap: value || '30%'
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <Divider>标注</Divider>
            <Row>
                <Col span={12}>
                    <FormItem label='显示' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
                        <Checkbox
                            checked={!!barStyle.labelVisible}
                            onChange={e => {
                                let checked = e.target.checked;
                                let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelVisible: checked } }) }];
                                if(!!chartOption.baseOption) {
                                    let seriesArr = [];
                                    for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                        seriesArr.push({
                                            label: { normal: { show: checked } },
                                            labelLine: { normal: { show: checked } }
                                        });
                                    }
                                    fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                                }
                                dispatch({ type: 'chartDesigner/setFields', fields });
                            }}
                        />
                    </FormItem>
                </Col>
                <Col span={12}>
                    {!!barStyle.labelVisible && <FormItem label='显示0标注' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
                        <Checkbox
                            checked={!!barStyle.labelZeroVisible}
                            onChange={e => {
                                let checked = e.target.checked;
                                let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelZeroVisible: checked } }) }];
                                if(!!chartOption.baseOption) {
                                    let seriesArr = [];
                                    for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                        seriesArr.push({
                                            label: { normal: {
                                                formatterKey: checked,
                                                formatter: !checked ? (params) => {
                                                    const { value } = params;
                                                    return Number(value) === 0 ? '' : value;
                                                } : '{c}'
                                            } },
                                        });
                                    }
                                    fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                                }
                                
                                dispatch({ type: 'chartDesigner/setFields', fields });
                            }}
                        />
                    </FormItem>}
                </Col>
            </Row>
            {!!barStyle.labelVisible && <Form.Item label='位置' {...formItemLayout}>
                <Select
                    defaultValue={barStyle.labelPosition || 'inside'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelPosition: value } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    label: { normal: { position: value } }
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='top'>外上</Select.Option>
                    <Select.Option value='left'>外左</Select.Option>
                    <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>
            </Form.Item>}
            {!!barStyle.labelVisible && <FormItem label={<Tooltip title="标注相对设置位置方向的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.labelDistance === '' || barStyle.labelDistance === null || barStyle.labelDistance === undefined) ? null : barStyle.labelDistance}
                    placeholder={5}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelDistance: value } }) }];
                        if(!!chartOption.baseOption) {
                            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) }
                                    }
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelDistance: value } }) }];
                            if(!!chartOption.baseOption) {
                                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) }
                                        }
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>}
            {!!barStyle.labelVisible && <FormItem label={<Tooltip title="标注旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.labelRotate === '' || barStyle.labelRotate === null || barStyle.labelRotate === undefined) ? null : barStyle.labelRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            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) }
                                    }
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
                            let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                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) }
                                        }
                                    });
                                }
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>}
            <Divider>横轴名称</Divider>
            <FormItem label={<Tooltip title="名称相对横轴显示位置">位置</Tooltip>} {...formItemLayout}>
                <Select
                    defaultValue={barStyle.xNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameLocation: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: { 
                                nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value
                             }} } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='start'>头部</Select.Option>
                    <Select.Option value='center'>中间</Select.Option>
                    <Select.Option value='end'>尾部</Select.Option>
                </Select>
            </FormItem>
            <FormItem label={<Tooltip title="横轴名称与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.xNameGap === '' || barStyle.xNameGap === null || barStyle.xNameGap === undefined) ? null : barStyle.xNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameGap: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                nameGap: (value === '' || value === null || value === undefined) ? 15 : 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, { bar: { xNameGap: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="横轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.xNameRotate === '' || barStyle.xNameRotate === null || barStyle.xNameRotate === undefined) ? null : barStyle.xNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xNameRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                nameRotate: (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, { bar: { xNameRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <Divider>横轴标签</Divider>
            <FormItem label={<Tooltip title="当横轴标签文本全部显示会相互覆盖时可以隐藏部分标签文本">隐藏重叠标签</Tooltip>} {...formItemLayout}>
                <Checkbox
                    checked={barStyle.xLabelHiddenCover === undefined ? true : barStyle.xLabelHiddenCover}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelHiddenCover: checked } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
                                axisLabel: {
                                    interval: checked ? 'auto' : 0
                                }
                            } } } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.xLabelMargin === '' || barStyle.xLabelMargin === null || barStyle.xLabelMargin === undefined) ? null : barStyle.xLabelMargin}
                    placeholder={8}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { 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, { bar: { 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={(barStyle.xLabelRotate === '' || barStyle.xLabelRotate === null || barStyle.xLabelRotate === undefined) ? null : barStyle.xLabelRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { xLabelRotate: 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, { bar: { xLabelRotate: 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
                    defaultValue={barStyle.yNameLocation || 'end'}
                    onChange={(value, item) => {
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameLocation: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: { 
                                nameLocation: (value === '' || value === null || value === undefined) ? 'end' : value,
                             }} } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                >
                    <Select.Option value='start'>头部</Select.Option>
                    <Select.Option value='center'>中间</Select.Option>
                    <Select.Option value='end'>尾部</Select.Option>
                </Select>
            </FormItem>
            <FormItem label={<Tooltip title="纵轴名称与纵轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.yNameGap === '' || barStyle.yNameGap === null || barStyle.yNameGap === undefined) ? null : barStyle.yNameGap}
                    placeholder={15}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameGap: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                nameGap: (value === '' || value === null || value === undefined) ? 15 : 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, { bar: { yNameGap: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                    nameGap: (value === '' || value === null || value === undefined) ? 15 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            <FormItem label={<Tooltip title="纵轴名称旋转度数，正值是逆时针">旋转</Tooltip>} {...formItemLayout}>
                <InputNumber
                    defaultValue={(barStyle.yNameRotate === '' || barStyle.yNameRotate === null || barStyle.yNameRotate === undefined) ? null : barStyle.yNameRotate}
                    placeholder={0}
                    onBlur={e => {
                        let value = e.target.value;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { yNameRotate: value } }) }];
                        if(!!chartOption.baseOption) {
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                nameRotate: (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, { bar: { yNameRotate: value } }) }];
                            if(!!chartOption.baseOption) {
                                fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { yAxis: { 0: {
                                    nameRotate: (value === '' || value === null || value === undefined) ? 0 : Number(value)
                                } } } }) });
                            }
                            dispatch({ type: 'chartDesigner/setFields', fields });
                        }
                    }}
                />
            </FormItem>
            {!!groupBy && !!groupBy.key && <Divider>数据堆叠</Divider>}
            {!!groupBy && !!groupBy.key && <FormItem label='启用' {...formItemLayout}>
                <Checkbox
                    checked={!!barStyle.stack}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { stack: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let seriesArr = [];
                            for(let i = 0; i < chartOption.baseOption.series.length; i++) {
                                seriesArr.push({
                                    stack: checked
                                });
                            }
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { series: seriesArr } }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>}
            <Divider>区域缩放</Divider>
            <FormItem label='启用' {...formItemLayout}>
                <Checkbox
                    checked={!!barStyle.dataZoomVisible}
                    onChange={e => {
                        let checked = e.target.checked;
                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { bar: { dataZoomVisible: checked } }) }];
                        if(!!chartOption.baseOption) {
                            let legendVisible = chartOption.baseOption.legend ? chartOption.baseOption.legend.show : false;
                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, {
                                baseOption: { dataZoom: { show: checked } },
                                media: EChartsMedia('bar', legendVisible, checked)
                            }) });
                        }
                        dispatch({ type: 'chartDesigner/setFields', fields });
                    }}
                />
            </FormItem>
        </Form>
    }
}

export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(BarStyle);