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