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

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

html中中,引入:

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

你可能感兴趣的:(echarts,echarts)