在ECharts中，我们可以通过监听鼠标移动事件和拖拽事件来实现拖拽功能。但是，拖拽时，图例、边框和网格线等会丢失。为了实现拖拽不还原，我们需要在鼠标移动时保存当前的状态，然后在拖拽时恢复这些状态。

以下是一个简单的示例：

```javascript var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Price', type: 'bar', data: [200, 150, 250, 300, 350, 400, 450] }] };

var areaChart = echarts.init(document.getElementById('main'));

areaChart.setOption(option);

// 按钮拖拽事件 document.getElementById('drag').addEventListener('click', function() { var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Price', type: 'bar', data: [200, 150, 250, 300, 350, 400, 450] }] }; option = echarts.util.extend(option, { draggable: { // 保持鼠标当前位置 start: { // 在鼠标移动前保存当前位置 x: 50 }, // 拖拽时恢复当前位置 end: { x: 50 } } }); areaChart.setOption(option); });

// 点击其他按钮释放鼠标 document.getElementById('release').addEventListener('click', function() { areaChart.setOption(option); }); ```

在这个示例中，我们创建了一个拖拽按钮和一个释放按钮。拖拽按钮点击时，会保存当前的鼠标位置，然后在拖拽时恢复这个位置。释放按钮点击时，会恢复到原始的鼠标位置。

请注意，这只是一个基本的示例，实际的拖拽功能可能会更复杂，包括更多的选项和更复杂的恢复策略。