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` 事件实现鼠标左右键的拖动功能。
具体代码实现如下：
```javascript
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]
}]
}
}]
});
}
});
```
上述代码实现了鼠标左键拖动选择区域，在选择区域内可以拖动鼠标右键进行平移，也可以使用内置的数据区域缩放组件或工具箱中的数据区域缩放工具进行缩放。
超级会员免费看
本文介绍了在Android 14.0系统中将USB鼠标右键功能修改为返回键的操作。核心在于分析InputReader.cpp和CursorButtonAccumulator.cpp的源码，通过修改getButtonState()方法来处理鼠标事件，特别是针对mBtnRight的判断。此外，还讨论了如何通过system.prop属性控制这一功能的开启和关闭。
订阅专栏 解锁全文
1698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
