// 1
. 获取目标元素和图表容器
const target
Element = document
.get
ElementById
('draggable-
element'
);
const chartContainer = document
.get
ElementById
('echarts-container'
);
let chartInstance = echarts
.init
(chartContainer
);
// 2
. 初始化元素位置监听器
function initPositionTracker
() {
// 使用ResizeObserver监听元素尺寸变化
const resizeObserver = new ResizeObserver
(() => updateChartLayout
());
resizeObserver
.observe
(target
Element);
// 监听窗口大小变化
window
.addEventListener
('resize',
() => {
throttle
(updateChartLayout, 200
)();
}
);
// 3
. 实现拖拽功能
let isDragging = false;
let offsetX, offsetY;
target
Element.addEventListener
('mousedown',
(e
) => {
isDragging = true;
offsetX = e
.clientX - target
Element.getBoundingClientRect().left;
offsetY = e
.clientY - target
Element.getBoundingClientRect().top;
target
Element.style
.cursor = 'grabbing';
}
);
document
.addEventListener
('mousemove',
(e
) => {
if
(!isDragging
) return;
const x = e
.clientX - offsetX;
const y = e
.clientY - offsetY;
// 更新元素位置（限制在可视区域内）
target
Element.style
.left = `${Math
.max
(0, Math
.min
(x, window
.innerWidth - target
Element.offsetWidth
))}px`;
target
Element.style
.top = `${Math
.max
(0, Math
.min
(y, window
.innerHeight - target
Element.offsetHeight
))}px`;
}
);
document
.addEventListener
('mouseup',
() => {
if
(isDragging
) {
isDragging = false;
target
Element.style
.cursor = 'grab';
updateChartLayout
(); // 拖拽结束时更新图表
}
}
);
}
// 4
. 更新ECharts布局
function updateChartLayout
() {
//
获取元素相对于视口的位置
const rect = target
Element.getBoundingClientRect();
// 计算新布局参数（示例：将图表置于元素右侧）
const newLayout = {
left: rect
.right + 20,
top: rect
.top,
width: window
.innerWidth - rect
.right - 40,
height: rect
.height
};
// 更新图表布局
chartInstance
.setOption
({
grid: newLayout
}
);
// 重绘图表
chartInstance
.resize
();
}
// 5
. 节流函数优化性能
function throttle
(fn, delay
) {
let lastCall = 0;
return function
(...args
) {
const now = new Date
().getTime
();
if
(now - lastCall < delay
) return;
lastCall = now;
fn
.apply
(this, args
);
}
}
// 初始化
initPositionTracker
();
<div class="dashboard">
<!-- 可拖拽控制面板 -->
<div id="draggable-
element" style="position: absolute; cursor: grab;">
<h3>控制面板</h3>
<!-- 控制组件
... -->
</div>
<!-- ECharts容器 -->
<div id="echarts-container" style="height: 600px;"></div>
</div>
<script>
// 初始化图表
const option = {
grid: { left: 300 }, // 初始布局
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar', data: [120, 200, 150] }]
};
chartInstance
.setOption
(option
);
</script>
扫一扫
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
