mzrcsdn 2024-12-30 16:17 采纳率: 0%
浏览 57

为什么我运行echarts样例无法显示,但控制台没有任何报错放到我项目里面也没法显示

为什么我运行echarts样例无法显示,但控制台没有任何报错
放到我项目里面也没法显示。


```javascript


<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 600px; width: 800px;"></div>


  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.6.0/files/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.6.0/files/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = 'https://echarts.apache.org/examples';
    var option;

    option = {
  backgroundColor: '#000',
  globe: {
    baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
    heightTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
    displacementScale: 0.04,
    shading: 'realistic',
    environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
    realisticMaterial: {
      roughness: 0.9
    },
    postEffect: {
      enable: true
    },
    light: {
      main: {
        intensity: 5,
        shadow: true
      },
      ambientCubemap: {
        texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
        diffuseIntensity: 0.2
      }
    }
  }
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

```

  • 写回答

4条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-12-30 16:19
    关注
    让阿豪来帮你解答,本回答参考chatgpt3.5编写提供,如果还有疑问可以评论或留言
    问题分析:
    1. 可能是echarts相关资源加载失败导致样例无法显示
    2. 可能是echarts配置参数错误导致样例无法显示 解决方案:
    3. 确保echarts相关资源正确加载,可以通过浏览器开发者工具查看网络请求是否成功
    4. 检查echarts配置参数是否正确,确保代码中的option配置正确 示例代码修正:
    <!DOCTYPE html>
    <html lang="en" style="height: 100%">
    <head>
      <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
      <div id="container" style="height: 600px; width: 800px"></div>
      <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.6.0/files/dist/echarts.min.js"></script>
      <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.6.0/files/dist/extension/dataTool.min.js"></script>
      <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
      <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        var ROOT_PATH = 'https://echarts.apache.org/examples';
        var option = {
          backgroundColor: '#000',
          globe: {
            baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
            heightTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
            displacementScale: 0.04,
            shading: 'realistic',
            environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
            realisticMaterial: {
              roughness: 0.9
            },
            postEffect: {
              enable: true
            },
            light: {
              main: {
                intensity: 5,
                shadow: true
              },
              ambientCubemap: {
                texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
                diffuseIntensity: 0.2
              }
            }
          }
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
      </script>
    </body>
    </html>
    

    以上代码示例中修正了echarts样例中可能的资源加载问题和配置参数错误问题,如果仍然无法显示,建议检查浏览器开发者工具中的console输出,以便更好地定位问题。

    评论

报告相同问题?

问题事件

  • 创建了问题 12月30日