antdesign pro 或react项目集成dragact和echarts实现图表动态布局的面板

1.安装依赖
npm install --save dragact
npm install --save echarts-for-react
npm install --save echarts
嫌npm慢可以自行使用cnpm安装
2.项目中引用
import ReactEcharts from ‘echarts-for-react’;
import { Dragact } from ‘dragact’;
3.主要代码

<Row>
          <Col span={2} onClick={this.addDragact}>新增</Col>
          <Col span={2} onClick={this.saveLayOut}>保存</Col>
          <Col span={2}>回退</Col>
        </Row>
        <div style={{height:'600px',width:'1000px', border:'1px solid #ccc'}}>
            <Dragact
            layout={this.state.fakeData}//必填项
            col={12}//必填项
            width={1000}//必填项
            rowHeight={40}//必填项
            margin={[5, 5]}//必填项
            className='plant-layout'//必填项
            style={{ height:'300px' }}//非必填项
            placeholder={true}//非必填项
            ref={node => node ? this.state.dragactNode = node : null}
            onDragEnd={this.handleOnDragEnd}
            >
                {(item, provided) => {
                    return (
                        <div
                            {...provided.props}
                            {...provided.dragHandle}
                            style={{ ...provided.props.style,border:'1px solid #ccc',color:'#fff'}}>
                        <div style={{position: 'absolute', width: 10,height: 10,right: 15,top: 5, cursor: 'pointer',color:'#333',zIndex:'1000'}} onClick={() => this.onDelete(item.key)}>❌</div>
                        <ReactEcharts
                          ref={(e) => { this.echarts_react = e; }}
                          option={item.option}
                          notMerge={true}
                          style={{width:'100%',height:'100%'}}
                        />
                        <span {...provided.resizeHandle}
                          style={{
                              position: 'absolute',
                              width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
                              borderRight: '2px solid red',
                              borderBottom: '2px solid red'
                          }}/>
                        </div>
                    )
                }}
            </Dragact>
        </div>



//state代码
    state = {
        fakeData : [
          { GridX: 0, GridY: 0, w: 3, h: 4, key: '0',option:{
            title: { text: 'ECharts 示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        } },
          { GridX: 3, GridY: 0, w: 3, h: 4, key: '1' ,option:{
            title: { text: 'ECharts 示例222' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }},
          { GridX: 6, GridY: 0, w: 3, h: 4, key: '2' ,option:{
            title: { text: 'ECharts 示例333' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }}
        ],
        dragactNode:Dragact
      };



    //新增拖拽DIV
      addDragact(){
        this.state.fakeData.push({ GridX: 0, GridY: 1, w: 3, h: 2, key: '3',option:{
          title: { text: 'ECharts 示例444' },
          tooltip: {},
          xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      } });
        this.setState({
          fakeData: this.state.fakeData
        });
      }
      //删除DIV
      onDelete(key){
        let newFakeData = this.state.fakeData.filter((item)=>{
            return item.key != key;
        });
        this.setState({
          fakeData: newFakeData
        });
      }
      //保存拖拽信息
      saveLayOut () {
        const newLayout = this.state.dragactNode.getLayout();
        const parsedLayout = JSON.stringify(newLayout);
        console.log(parsedLayout);
      }
      //拖拽完成的回调函数
      handleOnDragEnd(){
        // let echarts_instance = this.echarts_react.getEchartsInstance();
        // echarts_instance.resize({opts: {width: 'auto', height: 'auto'}})
    
      }

效果：
1，可以新增，删除，保存，回退暂时没有做，因为可以拿到每一次的布局信息this.state.dragactNode.getLayout()
2，每一个div可以缩放拖拽，动态布局，并且里面的图表也会跟着自适应