只能在使用 “allowSyntheticDefaultImports“ 标志时进行默认导入

最新推荐文章于 2024-05-09 10:02:52 发布

-清风明月-

最新推荐文章于 2024-05-09 10:02:52 发布

阅读量4.4k

点赞数 2

分类专栏： angular2 前端文章标签： angular2

本文链接：https://blog.csdn.net/weixin_38296425/article/details/121611573

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

angular2

5 篇文章 0 订阅

订阅专栏

在一个项目中需要angular13使用echarts 3D曲面图，因此需要导入simplex-noise，用的是这个例子：Examples - Apache ECharts，

把这个案例下载到本地是一个单独的Html文件：bar3d-simplex-noise.html,经过一番鼓捣，修改了这个了文件中注释，启用了一些引用终于可以在本地浏览器显示3D图形了，修改后的代码是这样：

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar3d-simplex-noise&gl=1&theme=dark
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension-->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script>
        
        <!-- Uncomment this line if you want to use gl extension-->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>-->

        <!--手动引入了这个包-->
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};

                var option;



                $.getScript(
                  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
                ).done(function () {
                  var noise = new SimplexNoise(Math.random);
                  function generateData(theta, min, max) {
                    var data = [];
                    for (var i = 0; i <= 50; i++) {
                      for (var j = 0; j <= 50; j++) {
                        var value = noise.noise2D(i / 20, j / 20);
                        valMax = Math.max(valMax, value);
                        valMin = Math.min(valMin, value);
                        data.push([i, j, value * 2 + 4]);
                      }
                    }
                    return data;
                  }
                  var valMin = Infinity;
                  var valMax = -Infinity;
                  var data = generateData(2, -5, 5);
                  console.log(valMin, valMax);
                  myChart.setOption(
                    (option = {
                      visualMap: {
                        show: false,
                        min: 2,
                        max: 6,
                        inRange: {
                          color: [
                            '#313695',
                            '#4575b4',
                            '#74add1',
                            '#abd9e9',
                            '#e0f3f8',
                            '#ffffbf',
                            '#fee090',
                            '#fdae61',
                            '#f46d43',
                            '#d73027',
                            '#a50026'
                          ]
                        }
                      },
                      xAxis3D: {
                        type: 'value'
                      },
                      yAxis3D: {
                        type: 'value'
                      },
                      zAxis3D: {
                        type: 'value',
                        max: 10,
                        min: 0
                      },
                      grid3D: {
                        axisLine: {
                          lineStyle: { color: '#fff' }
                        },
                        axisPointer: {
                          lineStyle: { color: '#fff' }
                        },
                        viewControl: {
                          // autoRotate: true
                        },
                        light: {
                          main: {
                            shadow: true,
                            quality: 'ultra',
                            intensity: 1.5
                          }
                        }
                      },
                      series: [
                        {
                          type: 'bar3D',
                          data: data,
                          shading: 'lambert',
                          label: {
                            formatter: function (param) {
                              return param.value[2].toFixed(1);
                            }
                          }
                        }
                      ]
                    })
                  );
                });

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

        </script>
    </body>
</html>

因此打算把这个功能集成到angular10里面，我看demo里面用到了
https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js
因此需要把simplex-noise安装到本地，打开npm，查找simplex-noise
会找到simplex-noise.js，的结果，simplex-noise - npm

根据上述帮助文档里的提示：
npm i -S simplex-noise
用这个命令安装 simplex-noise

提示安装OK，在angular工程的package.json里面可以看到安装的结果：

然后在组件中引入SimplexNoise

import SimplexNoise  from 'simplex-noise';

居然有个这样的提示：
模块 ""d:/01-workspace/03-develop/01-angular/angulardemo2/node_modules/simplex-noise/dist/cjs/commonjs-wrapper"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入ts(1259)

commonjs-wrapper.d.ts(2, 1): 此模块是使用 "export =" 声明的，只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入。

解决方案：

在angualr工程的tsconfig.json里面compilerOptions新增配置：
"allowSyntheticDefaultImports": true

完整的tsconfig.json配置是这样：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

保存文件之后，错误提示消失，
allowSyntheticDefaultImports表示允许默认从没有默认导出的模块导入。这不会影响代码发出，只会影响类型检查。
echarts官网里提供的bar3d-simplex-noise.html其实不能原样移植到angualr13，需要进行调整，调整后的的代码如下：
引入相关包：

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import * as $ from 'jquery';
import 'echarts-gl';
import SimplexNoise  from 'simplex-noise';

定义绑定变量：

export class EcharsdemoComponent implements OnInit {
...
public bar3dSimplexNoise:any;
...
...

模板定义：

    <p>3D柱状图-2</p><br>
    <div echarts [options]="bar3dSimplexNoise" class="chart"></div>

构建模型：

buildBar3dSimplexNoise(){
    /*
    $.getScript(
      'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
    ).done(function () {
      */ 

      var valMin = Infinity;
      var valMax = -Infinity;
      var data = this.generateData(2, -5, 5);
      this.bar3dSimplexNoise = {      
          visualMap: {
            show: false,
            min: 2,
            max: 6,
            inRange: {
              color: [
                '#313695',
                '#4575b4',
                '#74add1',
                '#abd9e9',
                '#e0f3f8',
                '#ffffbf',
                '#fee090',
                '#fdae61',
                '#f46d43',
                '#d73027',
                '#a50026'
              ]
            }
          },
          xAxis3D: {
            type: 'value'
          },
          yAxis3D: {
            type: 'value'
          },
          zAxis3D: {
            type: 'value',
            max: 10,
            min: 0
          },
          grid3D: {
            axisLine: {
              lineStyle: { color: '#fff' }
            },
            axisPointer: {
              lineStyle: { color: '#fff' }
            },
            viewControl: {
              // autoRotate: true
            },
            light: {
              main: {
                shadow: true,
                quality: 'ultra',
                intensity: 1.5
              }
            }
          },
          series: [
            {
              type: 'bar3D',
              data: data,
              shading: 'lambert',
              label: {
                formatter: function (param:any) {
                  return param.value[2].toFixed(1);
                }
              }
            }
          ]
        }     
      
    //});

  }

  generateData(theta:number, min:number, max:number) {
    var data = [];
    var noise = new SimplexNoise(Math.random);
    for (var i = 0; i <= 50; i++) {
      for (var j = 0; j <= 50; j++) {
        var value = noise.noise2D(i / 20, j / 20);
        var valMax = Math.max(max, value);
        var valMin = Math.min(min, value);
        data.push([i, j, value * 2 + 4]);
      }
    }
    return data;
  }

这样就可以在angualr中显示3D柱状图了。

-清风明月-

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
只能在使用 “allowSyntheticDefaultImports“ 标志时进行默认导入

在一个项目中需要angular13使用echarts 3D曲面图，因此需要导入simplex-noise，用的是这个例子：Examples - Apache ECharts，把这个案例下载到本地是一个单独的Html文件：bar3d-simplex-noise.html,经过一番鼓捣，修改了这个了文件中注释，启用了一些引用终于可以在本地浏览器显示3D图形了，修改后的代码是这样：<!-- THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.
复制链接

扫一扫