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]
          }]
        }
      }]
    });
  }
});

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