javascript - 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

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

Answer 2

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

<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>

最终效果

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

附上纹理图：

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