13661186406 opened a new issue #8142: echarts-gl globe中baseTexture所对应的实例中绑定的事件在移动端无法触发
URL: https://github.com/apache/incubator-echarts/issues/8142
<!--
为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
-->
### One-line summary [问题简述]
echarts-gl globe中baseTexture属性所对应的实例上绑定的click事件在移动端无法触发，但是在PC端是没有问题的。如果不把这个实例裹在globe上单独渲染的话，事件也是可以的，唯独被裹在地球表面上之后，移动端就无法触发事件。
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: V4.0.4 GL-Version:1.1.0
+ Browser version [浏览器类型和版本]:各浏览器都不行
+ OS Version [操作系统类型和版本]:各手机操作系统都不行
### Expected behaviour [期望结果]
click事件在移动端可以触发
### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
option1 = {
geo: {
// 绘制坐标系上的散点图、线集
map: "world", // 地图类型
name: "world_map",
itemStyle: { // 地图图形样式
areaColor: "rgba(0,0,0,0.2)",
borderColor: "rgba(255, 253, 250, 0.6)"
},
emphasis: { //高亮时区域内的颜色
label:{
show: true,
color:'#02fd00'
},
itemStyle: {
areaColor: '#2a333d'
}
},
selectedMode: 'single',
regions: [
{
name: 'South Africa\n南非',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: '上海',
label:{
show:true,
fontSize:16,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Lao PDR\n老挝',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Singapore\n新加坡',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Suriname\n苏里南',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.5)'
}
},
{
name: 'Myanmar\n缅甸',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'United Kingdom\n英国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Spain\n西班牙',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'France\n法国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'South Africa\n南非',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'India\n印度',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Brazil\n巴西',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Canada\n加拿大',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Australia\n澳大利亚',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Pacific Ocean\n太平洋',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Mexico\n墨西哥',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Kazakhstan\n哈萨克斯坦',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Russia\n俄罗斯',
label:{
show:true,
fontSize:22,
color: '#b7c0c9',
position:[50,80]
}
},
{
name: 'Monygolia\n蒙古',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Saudi Arabia\n沙特阿拉伯',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Algeria\n阿尔及利亚',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'United State\n美国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
}
],
// 绘制完整尺寸的 echarts 实例
// top: 40,
top: '2%',
left: 0,
right: 0,
bottom: 0,
boundingCoords: [// 定义地图的左上角和右下角经纬度
[-180, 90],
[180, -90]
]
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 坐标系类型
zlevel: 3,
rippleEffect: { // 涟漪特效配置
brushType: "stroke"
},
label: {
show: true,
position: 'left',
fontSize:16,
color: '#02fd00',
formatter: "{b}" // 标签内容格式 {b}数据名
},
symbol: this.circleSymbol,
symbolSize: 22,
itemStyle: { // 特效颜色
color: '#02fd00',
shadowColor:'#101116'
},
data: this.geoCoordMap.slice(0,2)
},
{
type: "scatter",
coordinateSystem: "geo", // 坐标系类型
zlevel: 3,
rippleEffect: { // 涟漪特效配置
brushType: "stroke"
},
label: {
show: true,
position: 'left',
fontSize:16,
color: '#02fd00',
formatter: "{b}" // 标签内容格式 {b}数据名
},
symbol: this.circleSymbol,
symbolSize: 16,
itemStyle: { // 特效颜色
color: '#02fd00',
shadowColor:'#101116'
},
data: this.geoCoordMap.slice(2,21)
},
{
type: 'lines', //上海到苏里南飞线
coordinateSystem: "geo",
zlevel: 4,
effect: { // 飞线 特效
show: true,
period: 4,
color: "#02fd00",
symbol: this.lineSymbol,
symbolSize:13,
trailLength: 0
},
lineStyle: { //飞线的颜色
width: 1,
color: '#02fd00',
opacity: {
cuiveness: 0.2
}
},
data: this.singleLine
}
]
}
option2={
globe: {
left: 0,
// right: 100,
// top: 30,
right: '8%',
top: '4.5%',
bottom: 0,
globeRadius: 95,
baseTexture: this.worldEchart, // 地球的纹理，支持图片或canvas对象或echarts实例作为纹理
shading: "color", // 不受光照影响
light: {
main: {
color: '#fff',
intensity: 5
},
ambient: {
color: '#fff',
intensity:0.4
}
},
globeRadius: 97,
viewControl: {// 用于鼠标的旋转缩放控制
zoomSensitivity: 0, // 缩放灵敏度 0关闭缩放
rotateSensitivity: [2,0], //控制横、纵旋转灵敏度
autoRotate: true, // 控制地球是否自转
autoRotateDirection: "ccw", //控制自转方向
autoRotateAfterStill: 4,
targetCoord: [105.9526, 22.3017],
autoRotateSpeed:10
}
},
series: {
type: 'lines3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
effect: { // 飞线 特效
show: true,
peroid: 2,
trailColor: 'greenyellow'
},
lineStyle: { // 飞线颜色
width: 2,
color: '#02fd00',
opacity: 0.8
},
data: this.worldLine
}
}
```
### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
this.worldEchart = echarts.init(document.createElement("canvas"), null, {
width: 4000,
height: 2000
});
// 配置worldEchart
this.worldEchart.setOption({
geo: {
// 绘制坐标系上的散点图、线集
map: "world", // 地图类型
name: "world_map",
itemStyle: { // 地图图形样式
areaColor: "rgba(0,0,0,0.2)",
borderColor: "rgba(255, 253, 250, 0.6)"
},
emphasis: { //高亮时区域内的颜色
label:{
show: true,
color:'#02fd00'
},
itemStyle: {
areaColor: '#2a333d'
}
},
selectedMode: 'single',
regions: [
{
name: 'South Africa\n南非',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: '上海',
label:{
show:true,
fontSize:16,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Lao PDR\n老挝',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Singapore\n新加坡',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'Suriname\n苏里南',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.5)'
}
},
{
name: 'Myanmar\n缅甸',
label:{
show:true,
fontSize:22,
color: '#02fd00'
},
itemStyle:{
areaColor: 'rgba(0,0,0,0.3)'
}
},
{
name: 'United Kingdom\n英国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Spain\n西班牙',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'France\n法国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'South Africa\n南非',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'India\n印度',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Brazil\n巴西',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Canada\n加拿大',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Australia\n澳大利亚',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Pacific Ocean\n太平洋',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Mexico\n墨西哥',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Kazakhstan\n哈萨克斯坦',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Russia\n俄罗斯',
label:{
show:true,
fontSize:22,
color: '#b7c0c9',
position:[50,80]
}
},
{
name: 'Monygolia\n蒙古',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Saudi Arabia\n沙特阿拉伯',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'Algeria\n阿尔及利亚',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
},
{
name: 'United State\n美国',
label:{
show:true,
fontSize:22,
color: '#b7c0c9'
}
}
],
// 绘制完整尺寸的 echarts 实例
// top: 40,
top: '2%',
left: 0,
right: 0,
bottom: 0,
boundingCoords: [// 定义地图的左上角和右下角经纬度
[-180, 90],
[180, -90]
]
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 坐标系类型
zlevel: 3,
rippleEffect: { // 涟漪特效配置
brushType: "stroke"
},
label: {
show: true,
position: 'left',
fontSize:16,
color: '#02fd00',
formatter: "{b}" // 标签内容格式 {b}数据名
},
symbol: this.circleSymbol,
symbolSize: 22,
itemStyle: { // 特效颜色
color: '#02fd00',
shadowColor:'#101116'
},
data: this.geoCoordMap.slice(0,2)
},
{
type: "scatter",
coordinateSystem: "geo", // 坐标系类型
zlevel: 3,
rippleEffect: { // 涟漪特效配置
brushType: "stroke"
},
label: {
show: true,
position: 'left',
fontSize:16,
color: '#02fd00',
formatter: "{b}" // 标签内容格式 {b}数据名
},
symbol: this.circleSymbol,
symbolSize: 16,
itemStyle: { // 特效颜色
color: '#02fd00',
shadowColor:'#101116'
},
data: this.geoCoordMap.slice(2,21)
},
{
type: 'lines', //上海到苏里南飞线
coordinateSystem: "geo",
zlevel: 4,
effect: { // 飞线 特效
show: true,
period: 4,
color: "#02fd00",
symbol: this.lineSymbol,
symbolSize:13,
trailLength: 0
},
lineStyle: { //飞线的颜色
width: 1,
color: '#02fd00',
opacity: {
cuiveness: 0.2
}
},
data: this.singleLine
}
]
});
// 地球纹理组件上的点击事件
this.worldEchart.on("click", (params)=>{
alert('worldClick')
if ( params.componentType === 'geo' && params.name == '上海'){
this.openChinaMap()
}
})
// this.worldEchart.on('geoselectchanged', ()=>{
// alert('worldEchart')
// })
// 在echarts容器上创建地球实例
this.globalEchart = echarts.init(this.$refs.global);
// 在实例上绘制3d地球
this.globalEchart.setOption({
globe: {
left: 0,
// right: 100,
// top: 30,
right: '8%',
top: '4.5%',
bottom: 0,
globeRadius: 95,
baseTexture: this.worldEchart, // 地球的纹理，支持图片或canvas对象或echarts实例作为纹理
shading: "color", // 不受光照影响
light: {
main: {
color: '#fff',
intensity: 5
},
ambient: {
color: '#fff',
intensity:0.4
}
},
globeRadius: 97,
viewControl: {// 用于鼠标的旋转缩放控制
zoomSensitivity: 0, // 缩放灵敏度 0关闭缩放
rotateSensitivity: [2,0], //控制横、纵旋转灵敏度
autoRotate: true, // 控制地球是否自转
autoRotateDirection: "ccw", //控制自转方向
autoRotateAfterStill: 4,
targetCoord: [105.9526, 22.3017],
autoRotateSpeed:10
}
},
series: {
type: 'lines3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
effect: { // 飞线 特效
show: true,
peroid: 2,
trailColor: 'greenyellow'
},
lineStyle: { // 飞线颜色
width: 2,
color: '#02fd00',
opacity: 0.8
},
data: this.worldLine
}
})
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org