SOURCE

var charts = new Map();
var char1dom = document.getElementById('chart1');
var chart1 = echarts.init(char1dom);
var option1 = {
	grid: {
  	left: 0,
    right: 0,
    top: '10%',
    bottom: 0,
    containLabel: true,
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
chart1.setOption(option1);
//利用map集合绑定节点对应图表关系
charts.set(char1dom, chart1);


var char2dom = document.getElementById('chart2');
var chart2 = echarts.init(char2dom);
var option2 = {
	grid: {
  	left: 0,
    right: 0,
    top: '10%',
    bottom: 0,
    containLabel: true,
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
chart2.setOption(option2);
charts.set(char2dom, chart2);

//拖动缩放控件设置基于控件Moveable
//控件地址： https://github.com/daybrush/moveable/tree/master
const moveable = new Moveable(document.body, {
    // If the container is null, the position is fixed. (default: parentElement(document.body))
    container: document.querySelector(".panel"),
    target: document.querySelector(".box"),
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
    // Enabling pinchable lets you use events that
    // can be used in draggable, resizable, scalable, and rotateable.
    pinchable: true, // ["resizable", "scalable", "rotatable"]
    origin: true,
    keepRatio: true,
    // Resize, Scale Events at edges.
    edge: false,
    throttleDrag: 0,
    throttleResize: 0,
    throttleScale: 0,
    throttleRotate: 0,
});

//通过事件委托绑定需要操作的盒子
document.querySelector(".panel").addEventListener("mousedown", e => {
	let box = e.target.closest(".box");
  moveable.setState({
        target: box,
    }, () => {
        moveable.dragStart(e);
    });
});

/* draggable */
moveable.on("dragStart", ({ target, clientX, clientY }) => {
    console.log("onDragStart", target);
}).on("drag", ({
    target, transform,
    left, top, right, bottom,
    beforeDelta, beforeDist, delta, dist,
    clientX, clientY,
}) => {
    console.log("onDrag left, top", left, top);
    target.style.transform = transform;
}).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onDragEnd", target, isDrag);
});

/* resizable */
moveable.on("resizeStart", ({ target, clientX, clientY }) => {
    console.log("onResizeStart", target);
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => {
    console.log("onResize", target);
    delta[0] && (target.style.width = `${width}px`);
    delta[1] && (target.style.height = `${height}px`);
    charts.get(target).resize();
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onResizeEnd", target, isDrag);
});

<div class="panel">
  <div class="box" id="chart1"></div>
  <div class="box" id="chart2"></div>
</div>

.panel {
  width: 800px;
  height: 700px;
  background: #ffffff;
  border: 4px solid #eeeeee;
}
.box {
  position: absolute;
  border: 1px solid #ff6600;
}
#chart1 {
  width: 200px;
  height: 200px;
  left: 50px;
  top: 150px;
}
#chart2 {
  width: 250px;
  height: 150px;
  left: 350px;
  top: 350px;
}