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 如何可以拖动markline

Echarts 中的 markline 组件默认是不能拖动的，但是我们可以通过监听鼠标事件和 markline 的位置属性，手动实现 markline 的拖动。

具体实现步骤如下：

1. 在 option 中定义 markline 组件，设置其相关属性，例如起点、终点、样式等。

2. 监听鼠标事件，当鼠标按下时，记录鼠标在图表中的位置和 markline 的起始位置。

3. 监听鼠标事件，当鼠标移动时，计算鼠标在图表中的位置与起始位置的差值，并将其加到 markline 的起始位置上。

4. 在 markline 上添加 draggable 属性，使其能够被拖动。同时，设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。

下面是一个示例代码：

option = {
    // 其他配置项
    series: [{
        type: 'line',
        data: [10, 20, 30, 40, 50],
        markLine: {
            silent: true, // 取消鼠标点击事件
            symbol: 'none',
            label: {
                position: 'middle',
                formatter: 'Markline'
            },
            lineStyle: {
                color: '#333'
            },
            data: [{
                yAxis: 30
            }]
        }
    }]
};

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

var markline = chart.getModel().getComponent('series', 0).getMarkLineModel(0);

var start = null;

chart.getZr().on('mousedown', function(params) {
    start = chart.convertFromPixel({
        gridIndex: 0
    }, [params.offsetX, params.offsetY]);
});

chart.getZr().on('mousemove', function(params) {
    if (!start) {
        return;
    }
    var end = chart.convertFromPixel({
        gridIndex: 0
    }, [params.offsetX, params.offsetY]);
    var diff = end[1] - start[1];
    markline.option.data[0].yAxis += diff;
    start = end;
    chart.setOption({
        series: [{
            markLine: markline.option
        }]
    });
});

chart.getZr().on('mouseup', function(params) {
    start = null;
});

markline.option.label.show = true;
markline.option.draggable = true;

在上述代码中，我们首先定义了一个 markline，设置其样式和位置。然后监听了鼠标事件，当鼠标按下时，记录 markline 的起始位置。当鼠标移动时，计算鼠标位置与起始位置的差值，并将其加到 markline 的起始位置上，从而实现 markline 的拖动。在 markline 上添加了 draggable 属性，使其能够被拖动，同时设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。最后，我们将 markline 的 option 通过 setOption 方法设置到图表中。