| | |
| | | }) |
| | | } |
| | | |
| | | enabledChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | optionChange = (val, key) => { |
| | | let _plot = {...this.state.plot, [key]: val} |
| | | |
| | | this.setState({plot: {...plot, enabled: val}}) |
| | | if (key === 'ramp' && val === 'true') { |
| | | _plot.colors = _plot.colors || [] |
| | | _plot.colors = _plot.colors.map(item => { |
| | | item.color1 = item.color1 || item.color |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | zoomChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | |
| | | this.setState({plot: {...plot, zoomYaxis: val}, cusColumns: this.getCusColumns(val)}) |
| | | this.setState({plot: _plot}, () => { |
| | | if (key === 'zoomYaxis') { |
| | | this.setState({cusColumns: this.getCusColumns(val)}) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | getCusColumns = (zoomYaxis) => { |
| | |
| | | } |
| | | |
| | | return cusColumns |
| | | } |
| | | |
| | | mutilBarChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | |
| | | this.setState({plot: {...plot, mutilBar: val}}) |
| | | } |
| | | |
| | | rampChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | let colors = plot.colors || [] |
| | | |
| | | if (val === 'true') { |
| | | colors = colors.map(item => { |
| | | item.color1 = item.color1 || item.color |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | this.setState({plot: {...plot, colors, ramp: val}}) |
| | | } |
| | | |
| | | rampDirectionChange = (e) => { |
| | | const { plot } = this.state |
| | | let val = e.target.value |
| | | |
| | | this.setState({plot: {...plot, rampDirection: val}}) |
| | | } |
| | | |
| | | onSubmit = () => { |
| | |
| | | <Col span={8} style={{height: '40px', top: '-5px', zIndex: 1}}> |
| | | <Form {...formItemLayout}> |
| | | <Form.Item label="渐变色" style={{marginBottom: 10}}> |
| | | <Radio.Group value={plot.ramp || 'false'} onChange={this.rampChange}> |
| | | <Radio.Group value={plot.ramp || 'false'} onChange={(e) => this.optionChange(e.target.value, 'ramp')}> |
| | | <Radio value="false">不使用</Radio> |
| | | <Radio value="true">使用</Radio> |
| | | </Radio.Group> |
| | |
| | | {plot.chartType === 'line' ? <Col span={8} style={{height: '40px', top: '-5px', zIndex: 1}}> |
| | | <Form {...formItemLayout}> |
| | | <Form.Item label="渐变方向" style={{marginBottom: 10}}> |
| | | <Radio.Group value={plot.rampDirection || 'horizontal'} onChange={this.rampDirectionChange}> |
| | | <Radio.Group value={plot.rampDirection || 'horizontal'} onChange={(e) => this.optionChange(e.target.value, 'rampDirection')}> |
| | | <Radio value="horizontal">水平</Radio> |
| | | <Radio value="vertical">垂直</Radio> |
| | | </Radio.Group> |
| | |
| | | <Col span={8}> |
| | | <Form {...formItemLayout}> |
| | | <Form.Item label="是否启用" style={{marginBottom: 10}}> |
| | | <Radio.Group value={plot.enabled || 'false'} onChange={this.enabledChange}> |
| | | <Radio.Group value={plot.enabled || 'false'} onChange={(e) => this.optionChange(e.target.value, 'enabled')}> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group> |
| | |
| | | <Col span={8}> |
| | | <Form {...formItemLayout}> |
| | | <Form.Item label="多柱排列" style={{marginBottom: 10}}> |
| | | <Radio.Group value={plot.mutilBar || 'dodge'} onChange={this.mutilBarChange}> |
| | | <Radio.Group value={plot.mutilBar || 'dodge'} onChange={(e) => this.optionChange(e.target.value, 'mutilBar')}> |
| | | <Radio value="dodge">分组</Radio> |
| | | <Radio value="stack">堆叠</Radio> |
| | | <Radio value="overlap">重叠</Radio> |
| | |
| | | <Col span={8}> |
| | | <Form {...formItemLayout}> |
| | | <Form.Item label="Y轴区间" style={{marginBottom: 10}}> |
| | | <Radio.Group value={plot.zoomYaxis} onChange={this.zoomChange}> |
| | | <Radio.Group value={plot.zoomYaxis} onChange={(e) => this.optionChange(e.target.value, 'zoomYaxis')}> |
| | | <Radio value="default">默认</Radio> |
| | | <Radio value="custom">自定义</Radio> |
| | | <Radio value="adjust">自适应</Radio> |