echarts 3D图无法显示、空白的问题

最新推荐文章于 2024-01-21 08:13:22 发布

萧行之

最新推荐文章于 2024-01-21 08:13:22 发布

阅读量3.9k

点赞数 6

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_16381291/article/details/122339500

版权

echarts 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

学习echarts中，快速尝试官网3D charts案例，但无法在HTML中显示，尝试多种引用后，最快的方式可以尝试如下：

html中<head>中，引入：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

然后在官网案例中，切换至完整代码，复制除import之外的语句，可以正常显示。
如3d图表中的 Simple Surface，最终代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Simple Surface</title>
	<meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:800px;"></div>
</body>

<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      tooltip: {},
      backgroundColor: '#fff',
      visualMap: {
        show: false,
        dimension: 2,
        min: -1,
        max: 1,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        }
      },
      xAxis3D: {
        type: 'value'
      },
      yAxis3D: {
        type: 'value'
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
        viewControl: {
          // projection: 'orthographic'
        }
      },
      series: [
        {
          type: 'surface',
          wireframe: {
            // show: false
          },
          equation: {
            x: {
              step: 0.05
            },
            y: {
              step: 0.05
            },
            z: function (x, y) {
              if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                return '-';
              }
              return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
            }
          }
        }
      ]
    };
    
    option && myChart.setOption(option);
    </script>
</html>