echarts 桑基图实现缩放和拖拽功能

echarts + vue2 桑基图鼠标滚动缩放和拖拽

实现效果

QQ录屏20230208093114

产品让桑基图实现缩放的功能，看了下echarts配置项，dataZoom:"inside"只支持坐标系的图，不支持画布的，只能自己用鼠标事件写，然后全网只搜到一篇关于这个效果的，参考原文 https://blog.csdn.net/ztwelve/article/details/128649174

我的实现代码

DOM


滚轮事件

if (myChart) {
myChart.dispose(this.$refs.chart);
myChart = this.$echarts.init(this.$refs.chart);myChart.setOption(option);
this.chart = myChart;
let box = document.getElementsByClassName("chart")[0]; 
window. onmousewheel = (event) =>{let opt = myChart.getOption();
//容器位置，{ x, y}为鼠标位置，{ top,bottom，left，right }容器边界位置let { x,y } = event,
 { top, bottom，left，right } = this.chartBox.getClientRects()[0];// console.log(x, y, top, bottom,left, right,opt);
//画布DOM
if (x> left && x< right && y > top && y < bottom){//判断鼠标滚动事件是否在容器内
if (event.deltaY <0){
//小于o，向上滚动
box.style.height = box.clientHeight + 20 + "px";//画布高度+20opt.series[0].nodeGapt= 1;//桑基图节点间距+2，默认为8
}else {
box.style.height = box.clientHeight - 20 + "px";
opt.series[0].nodeGap = opt.series[0].nodeGap < 10 ? 8 : opt.series[ 0].nodeGap - 1;}
//console.log(opt.series[o].nodeGap);//画布高度小于容器高度后，节点间距不再缩小
if (box.style.height.split("px")[0] - this.chartBox.style.maxHeight.split("px")[0]<= 0){opt.series[o].nodeGap = 8;
myChart.setOption(opt);
myChart.resize();
 复制

拖拽事件

//拖拽事件
let dragging = false;let position = null;
box.addEventListener( "mousedown", function (e){dragging = true;
position = [e.clientx,e.clientY];});
document.addEventListener( "mousemove", function (e){if (dragging === false) return;
const x = e.clientX;
const y = e.clientY;
//const deltaX = x - position[O];const deltaY = y - position[1];
// const left = parseInt(box.style.left  O);const top = parseInt(box.style.top ll 0);
box.style.left = left + deltaX +“px";box.style.top = top + deltaY + "px" ;
position =[x，y];
});
document.addEventListener( "mouseup", function ( {dragging = false;
});
},},
 
 复制