只能在使用 “allowSyntheticDefaultImports“ 标志时进行默认导入
在一个项目中需要angular13使用echarts 3D曲面图，因此需要导入simplex-noise，用的是这个例子：Examples - Apache ECharts，把这个案例下载到本地是一个单独的Html文件：bar3d-simplex-noise.html,经过一番鼓捣，修改了这个了文件中注释，启用了一些引用终于可以在本地浏览器显示3D图形了，修改后的代码是这样：<!--THIS
·
在一个项目中需要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
0- 0
已为社区贡献1条内容
所有评论(0)