echart 组件支持 直接赋值option

one_stop_public/tableCompon/Split_Index/EchartsDiy/index.js

+import React, { useMemo } from 'react';
+import ReactEcharts from 'echarts-for-react';
+
+export default function EchartsDiy(props){
+  const { json, uuid, option, value } = props;
+  const opt = useMemo(() => {
+    return (value && typeof value === 'object' && Object.keys(value).length) ? value : option;
+  }, [value, option]);
+  // console.log(opt);
+  if(!opt){
+    return null;
+  }
+  return (
+    <ReactEcharts
+      style={{ height: json.height || 500 }}
+      key={uuid}
+      option={opt}
+      notMerge={true}
+      lazyUpdate={true}
+      theme={'theme_name'}
+      onEvents={{}}
+    />
+  )
+}

one_stop_public/tableCompon/index.jsx

@@ -83,6 +83,7 @@ import ButtonDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/Butto
 import giveVarcharRules from '@/webPublic/one_stop_public/tableCompon/Split_Index/giveVarcharLength';
 import getPopupContainer from '@/webPublic/one_stop_public/tableCompon/Split_Index/getPopupContainer';
 import StepDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/StepDiy';
+import EchartsDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/EchartsDiy';
 
 /**
  * 日期组件antd3.x有bug 详情见禅道 27152 毕业跟踪调查管理 毕业时间改为年级筛选
@@ -162,9 +163,11 @@ export default class TableCom extends Component {
     const { dispatch } = this.props;
     const x = this.props.DataColumn.isShowModal;
     x[fk] = true;
-    this.setState({
+    this.setState(
+      {
         modalInit: data,
-    }, () => {
+      },
+      () => {
         dispatch({
           type: 'DataColumn/showModal',
           payload: { isShowModal: x },
@@ -176,8 +179,8 @@ export default class TableCom extends Component {
             });
           },
         });
-    })
-
+      },
+    );
   };
 
   /**
@@ -312,7 +315,7 @@ export default class TableCom extends Component {
       return;
     }
     if (
-      !(this.dataFilter.includes(json.comName) || json.comName == 'TableSelect') &&
+      !(this.dataFilter.includes(json.comName) || json.comName === 'TableSelect') &&
       json.isFormulaOnce
     ) {
       return;
@@ -320,7 +323,7 @@ export default class TableCom extends Component {
     if (
       !(
         this.dataFilter.includes(json.comName) ||
-        json.comName == 'TableSelect' ||
+        json.comName === 'TableSelect' ||
         (json.formula != null && json.formula != '')
       )
     ) {
@@ -404,7 +407,7 @@ export default class TableCom extends Component {
       }
     }
 
-    if (this.dataFilter.includes(json.comName) || json.comName == 'TableSelect') {
+    if (this.dataFilter.includes(json.comName) || json.comName === 'TableSelect') {
       const obj2 = {
         ...obj,
         ...props.form.getFieldsValue(),
@@ -713,7 +716,7 @@ export default class TableCom extends Component {
       if (callback) {
         const data = reqUrls[url].data;
 
-        if (json.optionType && json.optionType == 'func') {
+        if (json.optionType && json.optionType === 'func') {
           const res = callback(data);
 
           if (res != null && !(typeof res === 'function')) {
@@ -727,7 +730,7 @@ export default class TableCom extends Component {
               },
             );
           }
-        } else if (json.comName == 'Button') {
+        } else if (json.comName === 'Button') {
           try {
             callback(data);
           } catch (e) {
@@ -903,7 +906,7 @@ export default class TableCom extends Component {
     if (!isChange) {
       if (callback) {
         const data = sqlKeys[sqlKey].data;
-        if (json.optionType && json.optionType == 'func') {
+        if (json.optionType && json.optionType === 'func') {
           const res = callback(data);
           if (res != null && !(typeof res === 'function')) {
             this.setState(
@@ -916,7 +919,7 @@ export default class TableCom extends Component {
               },
             );
           }
-        } else if (json.comName == 'Button') {
+        } else if (json.comName === 'Button') {
           try {
             callback(data);
           } catch (e) {
@@ -1045,7 +1048,6 @@ export default class TableCom extends Component {
     return 'norefeshxxxxxxxxxxxxxxxxxxxx';
   };
 
-
   getObjValues = () => {
     const { isEdit, fatherObj, defaultValues, formKey, form, fatherCode } = this.props;
     let obj = {};
@@ -1064,7 +1066,7 @@ export default class TableCom extends Component {
       };
     }
     return obj;
-  }
+  };
 
   functionArguments = (column, callback) => {
     const base52 = column.base52;
@@ -1619,18 +1621,12 @@ export default class TableCom extends Component {
       }
       return <QRCode {...this.state.option} key={uuid} />;
     }
-    if (json.comName == 'Echart') {
-      return (
-        <ReactEcharts
-          style={{ height: json.height || 500 }}
-          key={uuid}
-          option={this.state.option || {}}
-          notMerge={true}
-          lazyUpdate={true}
-          theme={'theme_name'}
-          onEvents={{}}
-        />
-      );
+    if (json.comName === 'Echart') {
+      return this.props.form.getFieldDecorator(uuid, {
+        initialValue: '',
+      })(
+       <EchartsDiy json={json} uuid={uuid} option={this.state.option}/>
+      )
     }
     if (json.comName === 'Graph') {
       return <Neo4jD3Com key={uuid} json={json} option={this.state.option || []} />;
@@ -2115,9 +2111,9 @@ export default class TableCom extends Component {
     if (dataColumn.isNull != null && !dataColumn.isNull) {
       required = true;
     }
-    if(Array.isArray(json.vlds)){
-      for(let item of json.vlds){
-        if(item.required){
+    if (Array.isArray(json.vlds)) {
+      for (let item of json.vlds) {
+        if (item.required) {
           required = true; // 验证里面填了必填 则必填
         }
       }
@@ -2590,12 +2586,8 @@ ${obj[dataColumn.base52]}
                   style={{
                     marginLeft: 5,
                     minHeight: get === 'mobile' ? '200px' : 'auto',
-                    width:
-                      get === 'mobile'
-                        ? 'auto'
-                        : json.width,
+                    width: get === 'mobile' ? 'auto' : json.width,
                     height: get === 'mobile' ? '' : json.height,
-
                   }}
                 />
               );
@@ -3175,8 +3167,12 @@ ${obj[dataColumn.base52]}
             }
           }
 
-          const optDiy = Array.isArray(json?.options) ? json.options : Array.isArray(options) ? options : [];
-          if(dataColumn.base52 === 'KjWXQFIprRc'){
+          const optDiy = Array.isArray(json?.options)
+            ? json.options
+            : Array.isArray(options)
+            ? options
+            : [];
+          if (dataColumn.base52 === 'KjWXQFIprRc') {
             // console.log(json, required, dataColumn, optDiy);
           }
 
@@ -3192,7 +3188,9 @@ ${obj[dataColumn.base52]}
                     },
                   ],
           })(
-            !optDiy.length ? <Input disabled={true} style={{ width: json.width }}/>:
+            !optDiy.length ? (
+              <Input disabled={true} style={{ width: json.width }} />
+            ) : (
               <Select
                 allowClear
                 showSearch
@@ -3225,16 +3223,15 @@ ${obj[dataColumn.base52]}
                 }
                 {...otherProps}
               >
-              {
-                optDiy.map(r => {
+                {optDiy.map(r => {
                   return (
                     <Option key={r.value} value={r.value}>
                       {r.label}
                     </Option>
                   );
-                })
-              }
-            </Select>,
+                })}
+              </Select>
+            ),
           );
           if (
             get === 'mobile' &&
@@ -3441,13 +3438,12 @@ ${obj[dataColumn.base52]}
                   json.vlds && json.vlds.length > 0
                     ? json.vlds
                     : [
-
                         {
                           required: required,
                           message: '请选择起止时间',
                           validator: (rule, value, callback) => {
                             let errors = [];
-                            if(!value || !Array.isArray(value) || value.length !== 2){
+                            if (!value || !Array.isArray(value) || value.length !== 2) {
                               // 移动端起止时间必须是个数组 且 length = 2
                               errors.push(new Error('请选择', rule.field));
                             }