vue 中 echarts-gl 应该怎么用?

Question

下面是 vue 组件下的代码

<template>
    <div ref="containerRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from 'echarts'; 
import 'echarts-gl'
const containerRef = ref<HTMLElement>()

onMounted(function () {
  const charts = echarts.init(containerRef.value as HTMLElement)
  charts.setOption({
    // grid3D: {},
    // xAxis3D: {},
    // yAxis3D: {},
    // zAxis3D: {},
    backgroundColor: '#000',
    globe: {
    }
  })
})
</script>

发现 canvas 压根没有渲染出来

这是官方示例

上面使用了全部引入的方式,也使用了 use 的按需引入的方式,也是无法正确渲染出 canvas 元素。
这是使用的版本

"echarts": "^5.4.2",
"echarts-gl": "^2.0.9",

请问在 vue 中应该怎么使用 echarts-gl

Answer 1

没效果的原因是题主压根没写配置呀

<template>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import * as echarts from 'echarts';
    import 'echarts-gl';

    const chartRef = ref();

    onMounted(() => {
        const chart = echarts.init(chartRef.value);
        // 官方示例可能会跨域，建议下载本地或者用自己的图，我就不按官方案例写了
        // const ROOT_PATH = 'https://echarts.apache.org/examples';

        // 这个是我本地的文件服务器，仅供参考
        const ROOT_PATH = 'http://127.0.0.1:10086';

        // 设置ECharts配置项
        const option = {
            backgroundColor: '#000',
            globe: {
                // 地球基础地图纹理贴图
                baseTexture: ROOT_PATH + '/world.topo.bathy.200401.jpg',
                // 地球高度纹理贴图
                heightTexture: ROOT_PATH + '/world.topo.bathy.200401.jpg',
                // 地球表面的位移比例系数
                displacementScale: 0.04,
                // 着色方式
                shading: 'realistic',
                // 环境光背景图
                environment: ROOT_PATH + '/starfield.jpg',
                realisticMaterial: {
                    roughness: 0.9
                },
                postEffect: {
                    enable: true
                },
                light: {
                    main: {
                        intensity: 5,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: ROOT_PATH + 'pisa.hdr',
                        diffuseIntensity: 0.2
                    }
                }
            }
        };

        chart.setOption(option);
    });
</script>

最终效果

补充回答：三维柱状图也正常

附上纹理图：

• 地球纹理
  
• 天空盒（背景）
  

Answer 2

这里有个demo,可以参考下
https://blog.csdn.net/m0_59962820/article/details/126016580