[echarts-gl] The on click event of the globe component in 3D Earth cannot be triggered. (中译：[echarts-gl] 3D地球中的globe组件的on click点击事件无法触发)

[crb011]

Issue: This is a situation where echarts is used in Vue 3. When configuring scatter3D in echarts-gl to create a 3D globe, the on("click", "series.scatter3D",function (object) {}) method is used to listen for user clicks on the points created by scatter3D on the 3D globe and trigger events. However, when there is only one data point in the scatter3D data array, the click event is not triggered. I tried to find a solution on the Issue page and found that this seems to be a longstanding problem.

Solution: The current workaround is to create three data points in the scatter3D data array. The last two data points are hidden using itemStyle: { opacity:0 } to temporarily address this issue. Hopefully, there will be a better solution in the future or the current problem will be fixed.

JavaScript code in Vue 3:
`
// useEchartsRender.js
import { ref } from "vue";
import { use, init } from "echarts";
import { VisualMapComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { Scatter3DChart } from "echarts-gl/charts";
import { GlobeComponent } from "echarts-gl/components";
import datavGlTexture from "./datav-gl-texture.jpg";
use([VisualMapComponent, GlobeComponent, Scatter3DChart, CanvasRenderer]);

export const useRenderEarth = () => {
let currentEartData = {};
let eartData = [];

const renderEarth = () => {
myEarth.value = init(earthContainer.value, null, {
width: 822,
height: 822,
});
const options = {
globe: {
shading: "color",
baseTexture: datavGlTexture,
viewControl: {
autoRotateAfterStill: 10,
zoomSensitivity: 0,
},
},
series: [
{
type: "scatter3D",
coordinateSystem: "globe",
symbolSize: [43, 50],
itemStyle: {
color: "rgba(197, 243, 118, 0.3)",
opacity: 1,
borderWidth: 1,
borderColor: "#C5F376",
},
data: [
{
name: currentEartData.regionsName, // test
value:
currentEartData.regionsCoordinate, // [20, 56]
},
{
name: "1",
value: [116, 20],
itemStyle:{
borderWidth: 0,
color: "transparent",
borderColor: "transparent",
opacity: 0,
},
},
{
name: "2",
value: [32,-117],
itemStyle:{
color: "transparent",
borderColor: "transparent",
borderWidth: 0,
opacity: 0,
},
},
],
},
],
};
myEarth.value.setOption(options);
};

return {
myEarth,
earthContainer,
renderEarth,
};
};

// index.vue

<script setup> import { watchEffect } from "vue"; import { useRenderEarth } from "./useEchartsRender"; const { myEarth, earthContainer, renderEarth } = useRenderEarth(); watchEffect(() => { if (myEarth.value) { myEarth.value.on("click", "series.scatter3D", function (object) { // 执行操作 }); } }); </script>

`

(中译：
问题：这是一个在Vue 3中使用echarts的情况。在echarts-gl中配置scatter3D来创建3D地球时，使用on("click", "series.scatter3D",function (object) {})方法监听用户在3D地球上点击scatter3D创建的点，并触发事件。然而，当scatter3D数据数组中只存在一个数据点时，点击事件不会被触发。我尝试在Issue页面上寻找解决方案，发现这似乎是一个长期存在的问题。

解决方案：当前的解决方法是在scatter3D数据数组中创建三个数据点。通过使用itemStyle: { opacity:0 }隐藏最后两个数据点来暂时解决这个问题。希望未来能有更好的解决方案或者修复当前问题。

Vue 3中的JavaScript代码：
省略...
)

[helgasoft]

workaround could be done also with a single invisible point value:[0,0,null] - Demo