echarts怎么禁止鼠标拖动

可以通过设置echarts中的toolbox来禁止鼠标拖动：

option = {
    // ...
    toolbox: {
        feature: {
            dataZoom: {
                zoomLock: true // 禁止鼠标拖动
            },
            // ...
        }
    },
    // ...
};

或者通过设置echarts中的dataZoom来禁止鼠标拖动：

option = {
    // ...
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100,
        zoomLock: true // 禁止鼠标拖动
    }],
    // ...
};

相关问题

echarts实现鼠标左右键拖动

Echarts 提供了图表实例的 `setOption` 方法中可以配置事件处理函数，通过监听鼠标事件实现拖动功能。

具体实现方法如下：

1. 创建一个全局变量 `mousedown`，用于标记鼠标左键是否按下，初始值为 `false`。

2. 在 `option` 中配置 `grid` 的 `containLabel` 属性为 `true`，表示网格区域包含坐标轴标签。

3. 在 `option` 中配置 `dataZoom` 组件，设置 `type` 为 `'inside'`，表示内置的数据区域缩放组件。

4. 在 `option` 中配置 `toolbox` 工具箱组件，设置 `feature` 属性中的 `dataZoom` 为 `{}`，表示数据区域缩放工具。

5. 在 `option` 中配置 `series` 的 `itemStyle` 属性的 `normal` 属性中，设置 `opacity` 属性为 `0.8`，表示图表项的透明度。

6. 在 `option` 中配置 `series` 的 `label` 属性的 `normal` 属性中，设置 `show` 属性为 `true`，表示显示图表项的标签。

7. 在 `option` 中配置 `series` 的 `emphasis` 属性的 `label` 属性中，设置 `show` 属性为 `false`，表示不显示图表项的标签。

8. 在 `option` 中配置 `series` 的 `itemStyle` 属性的 `emphasis` 属性中，设置 `opacity` 属性为 `1`，表示图表项的透明度。

9. 在 `option` 中配置 `series` 的 `markPoint` 属性，用于标记拖动区域的起始点和结束点。

10. 在 `option` 中配置 `tooltip` 组件，设置 `triggerOn` 属性为 `'mousemove'`，表示鼠标移动时触发提示框。

11. 在 `option` 中配置 `brush` 组件，用于选择图表项或拖动区域。

12. 在 `option` 中配置 `brush` 组件的 `toolbox` 属性，表示在工具箱中显示选择和清除按钮。

13. 在 `option` 中配置 `brush` 组件的 `brushLink` 属性，表示与数据区域缩放组件联动。

14. 在 `option` 中配置 `brush` 组件的 `seriesIndex` 属性，表示选择或拖动的系列索引。

15. 在 `option` 中配置 `brush` 组件的 `throttleType` 属性为 `'debounce'`，表示拖动过程中节流处理。

16. 通过监听 `mousedown`、`mousemove` 和 `mouseup` 事件实现鼠标左右键的拖动功能。

具体代码实现如下：

var myChart = echarts.init(document.getElementById('myChart'));

var mousedown = false; // 鼠标左键是否按下
var start, end; // 拖动区域的起始点和结束点

myChart.setOption({
  grid: {
    containLabel: true
  },
  dataZoom: {
    type: 'inside'
  },
  toolbox: {
    feature: {
      dataZoom: {}
    }
  },
  series: [{
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ],
    itemStyle: {
      normal: {
        opacity: 0.8
      },
      emphasis: {
        opacity: 1
      }
    },
    label: {
      normal: {
        show: true
      },
      emphasis: {
        show: false
      }
    },
    markPoint: {
      symbolSize: 50,
      label: {
        formatter: function(params) {
          var x = params.value[0];
          var y = params.value[1];
          return '(' + x.toFixed(2) + ', ' + y.toFixed(2) + ')';
        }
      },
      data: [{
        name: '起始点',
        coord: [0, 0]
      }, {
        name: '结束点',
        coord: [0, 0]
      }]
    }
  }],
  tooltip: {
    triggerOn: 'mousemove'
  },
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    brushLink: 'all',
    seriesIndex: 0,
    throttleType: 'debounce'
  }
});

myChart.on('mousedown', function(params) {
  if (params.event.which === 1) { // 鼠标左键按下
    mousedown = true;
    start = [params.event.offsetX, params.event.offsetY];
    end = [params.event.offsetX, params.event.offsetY];
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: myChart.convertFromPixel('grid', start)
          }, {
            name: '结束点',
            coord: myChart.convertFromPixel('grid', end)
          }]
        }
      }]
    });
  } else if (params.event.which === 3) { // 鼠标右键按下
    mousedown = false;
  }
});

myChart.on('mousemove', function(params) {
  if (mousedown) { // 鼠标左键按下
    end = [params.event.offsetX, params.event.offsetY];
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: myChart.convertFromPixel('grid', start)
          }, {
            name: '结束点',
            coord: myChart.convertFromPixel('grid', end)
          }]
        }
      }]
    });
  }
});

myChart.on('mouseup', function(params) {
  if (params.event.which === 1) { // 鼠标左键释放
    mousedown = false;
    end = [params.event.offsetX, params.event.offsetY];
    myChart.dispatchAction({
      type: 'brush',
      areas: [{
        brushType: 'rect',
        coordRange: [
          myChart.convertFromPixel('grid', start),
          myChart.convertFromPixel('grid', end)
        ]
      }]
    });
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: [0, 0]
          }, {
            name: '结束点',
            coord: [0, 0]
          }]
        }
      }]
    });
  }
});

上述代码实现了鼠标左键拖动选择区域，在选择区域内可以拖动鼠标右键进行平移，也可以使用内置的数据区域缩放组件或工具箱中的数据区域缩放工具进行缩放。

echarts 柱状图拖动

### 如何在 ECharts 中实现柱状图的可拖动交互效果

为了使 ECharts 柱状图具备拖动功能，可以通过自定义事件监听器以及利用 `echarts` 提供的行为扩展机制来完成这一目标。具体方法如下：

#### 1. 初始化图表并配置基础选项
先按照常规方式初始化 Echarts 实例，并设置好基本的系列和其他必要的属性。

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [
                        { offset: 0, color: '#00e7e0' },
                        { offset: 1, color: '#00d0c2' }
                    ]
                ),
            }
        },
        label: {
            show: true,
            position: 'inside',
            color: '#000'
        }
    }]
};

myChart.setOption(option);

#### 2. 添加拖拽逻辑
为了让柱子能够被用户点击后拖动改变位置或长度，需引入额外的功能模块如 `dataZoom` 或者编写特定的手势识别代码处理触摸/鼠标事件。这里采用后者的方式，即手动捕捉用户的操作行为来进行响应式的调整。

// 定义全局变量存储当前选中的条目索引
let selectedIdx = null;
document.addEventListener('mousedown', function (event) {
    const pointInPixel = [event.clientX, event.clientY];
    
    // 获取所有图形元素的信息
    let elements = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel);

    if (!elements || !Array.isArray(elements)) return;

    for (const element of elements) {
        if (element.componentType === 'series') {
            selectedIdx = element.dataIndex; // 记录下标
            
            break;
        }
    }

});

document.addEventListener('mousemove', function(event){
    if(selectedIdx !== null && typeof selectedIdx !== undefined){
        var newDataValue = Math.round((event.clientY - chartDom.getBoundingClientRect().top)*0.5); // 这里简单模拟数值变化
        
        updateSeriesData(newDataValue);
        
        myChart.resize(); // 更新视图大小适应新数据
    }
});

function updateSeriesData(value){
    let oldOpt = myChart.getOption();
    let updatedData = [...oldOpt.series[0].data]; 

    // 修改对应index处的数据值
    updatedData[selectedIdx] = value >= 0 ? value : 0 ;

    myChart.setOption({
      ...oldOpt,
      series:[{
          ...oldOpt.series[0],
          data:updatedData
      }]
    });
}

document.addEventListener('mouseup', ()=>{
    selectedIdx=null; // 清除记录当松开按钮时
});

上述脚本实现了简单的拖曳修改单个柱体高度的效果[^1]。需要注意的是这只是一个非常基础的例子，在实际应用中可能还需要考虑更多细节问题，比如边界条件判断、动画过渡等优化措施。