From 49f09cc6f8ff8c30a75ed1a9d6f510b69b73962a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 12 十二月 2023 21:05:37 +0800 Subject: [PATCH] 2023-12-12 --- src/menu/components/chart/antv-bar/chartcompile/index.jsx | 95 +++++++++++++++++++++-------------------------- 1 files changed, 43 insertions(+), 52 deletions(-) diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.jsx b/src/menu/components/chart/antv-bar/chartcompile/index.jsx index e0536d6..8b6a146 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/index.jsx @@ -193,18 +193,22 @@ }) } - enabledChange = (e) => { - const { plot } = this.state - let val = e.target.value + optionChange = (val, key) => { + let _plot = {...this.state.plot, [key]: val} + + if (key === 'ramp' && val === 'true') { + _plot.colors = _plot.colors || [] + _plot.colors = _plot.colors.map(item => { + item.color1 = item.color1 || item.color + return item + }) + } - this.setState({plot: {...plot, enabled: val}}) - } - - 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) => { @@ -245,10 +249,10 @@ children: [ { value: 'rect', label: 'rect锛堢煩褰級' }, { value: 'hollow-rect', label: 'hollow-rect锛堢┖蹇冪煩褰級' }, - { value: 'line', label: 'line锛堢嚎鏉★級' }, - { value: 'tick', label: 'tick锛堟尝鍔級' }, - // { value: 'funnel', label: 'funnel' }, - { value: 'pyramid', label: 'pyramid锛堣閿ワ級' } + // { value: 'line', label: 'line锛堢嚎鏉★級' }, + // { value: 'tick', label: 'tick锛堟尝鍔級' }, + // { value: 'funnel', label: 'funnel锛堟紡鏂楀浘锛�' }, + { value: 'pyramid', label: 'pyramid锛堥噾瀛楀锛�' } ], } ] @@ -345,35 +349,6 @@ } 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 = () => { @@ -507,6 +482,22 @@ resetPlot = (_plot) => { const { config } = this.props + if (_plot.axis) { + _plot.grid = _plot.axis.includes('grid') ? 'show' : 'hidden' + _plot.x_line = _plot.axis.includes('x_line') ? 'show' : 'hidden' + _plot.y_line = _plot.axis.includes('y_line') ? 'show' : 'hidden' + _plot.tick = _plot.axis.includes('tick') ? 'show' : 'hidden' + + delete _plot.axis + } + + if (_plot.tickVals) { + _plot.x_label = _plot.tickVals.includes('x_label') ? 'show' : 'hidden' + _plot.y_label = _plot.tickVals.includes('y_label') ? 'show' : 'hidden' + + delete _plot.tickVals + } + if (_plot.datatype === 'statistics') { _plot.enabled = 'false' _plot.customs = [] @@ -638,14 +629,14 @@ <Modal wrapClassName="mk-pop-modal" visible={visible} - width={1100} + width={1200} maskClosable={false} onOk={this.onSubmit} onCancel={() => { this.setState({ visible: false }) }} destroyOnClose > {config.name ? <div className="mk-com-name">{config.name} - 缂栬緫</div> : null} - <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}> + <Tabs activeKey={view} className="menu-chart-line-edit-box" onChange={this.changeTab}> <TabPane tab="缁勪欢璁剧疆" key="base"> <ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> </TabPane> @@ -657,7 +648,7 @@ <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> @@ -667,7 +658,7 @@ {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> @@ -678,7 +669,7 @@ {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null} {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampColorColumns : colorColumns} onChange={this.changeColor}/> : null} {plot.chartType === 'bar' && plot.datatype === 'query' ? <div className="mk-bar-colors"> - <p>鏌卞舰棰滆壊锛氬彲鏍规嵁鏌卞浘搴忓彿璁剧疆棰滆壊锛堣璁剧疆鏌卞舰瀹藉害锛夈�傛敞锛氫娇鐢ㄨ嚜瀹氫箟鍥惧舰璁剧疆鎴栧鏍规煴鍥炬椂鏃犳晥銆�</p> + <p>鏌卞舰棰滆壊锛氬彲鏍规嵁鏌卞浘搴忓彿璁剧疆棰滆壊銆傛敞锛氫娇鐢ㄨ嚜瀹氫箟鍥惧舰璁剧疆鎴栧鏍规煴鍥炬椂鏃犳晥銆�</p> <div className="bar-color-add"><PlusOutlined onClick={this.addbarColor}/></div> <EditTable actions={['edit', 'move', 'del']} data={plot.barcolors || []} columns={barColorColumns} onChange={this.changebarColor}/> </div> : null} @@ -688,7 +679,7 @@ <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> @@ -698,7 +689,7 @@ <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> @@ -709,7 +700,7 @@ <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> -- Gitblit v1.8.0