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.主要代码

          新增
          保存
          回退
        
        

             node ? this.state.dragactNode = node : null}
            onDragEnd={this.handleOnDragEnd}
            >
                {(item, provided) => {
                    return (
                        

                        
 this.onDelete(item.key)}>❌
                         { this.echarts_react = e; }}
                          option={item.option}
                          notMerge={true}
                          style={{width:'100%',height:'100%'}}
                        />
                        
                        
                    )
                }}
            
        



//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可以缩放拖拽，动态布局，并且里面的图表也会跟着自适应