Hi all!
I’m trying to integrate ECharts into an Ionic (4) app following this guide:
https://golb.hplar.ch/2017/02/Integrate-ECharts-into-an-Ionic-2-app.html
I installed all the modules as follows (i add “ionic info” output):
D:\e-charts-debug>ionic info
√ Gathering environment info - done!
Ionic:
ionic (Ionic CLI) : 4.1.1
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)
System:
NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10
D:\e-charts-debug>npm install echarts -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ echarts@4.2.0-rc.2
added 2 packages in 176.695s
D:\e-charts-debug>npm install ngx-echarts -S
npm WARN ngx-echarts@4.0.0 requires a peer of @angular/common@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-echarts@4.0.0 requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-echarts@4.0.0 requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ ngx-echarts@4.0.0
added 1 package in 108.986s
D:\e-charts-debug>npm install @types/echarts -D
npm WARN ngx-echarts@4.0.0 requires a peer of @angular/common@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-echarts@4.0.0 requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-echarts@4.0.0 requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @types/echarts@4.1.1
added 1 package in 108.858s
I also modified tsconfig.json
and app.module.ts
as follows:
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
...
"baseUrl": ".",
"paths": {
"echarts": ["node_modules/echarts/dist/echarts.min.js"]
}
}
app.module.ts:
import {NgxEchartsModule} from "ngx-echarts";
...
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
NgxEchartsModule,
IonicModule.forRoot(MyApp)
],
...
In home.ts and home.html i just added a single chart like the example does:
home.ts:
import { EChartOption } from 'echarts';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
chartOption: EChartOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
home.html:
<ion-content padding>
<div echarts [options]="chartOption" class="demo-chart"></div>
</ion-content>
However, when i serve the app i get this error:
Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at ChangeFilter.notFirstAndEmpty (http://localhost:8101/build/vendor.js:181834:67)
at NgxEchartsDirective.ngOnChanges (http://localhost:8101/build/vendor.js:181941:16)
at checkAndUpdateDirectiveInline (http://localhost:8101/build/vendor.js:13831:19)
at checkAndUpdateNodeInline (http://localhost:8101/build/vendor.js:15359:20)
at checkAndUpdateNode (http://localhost:8101/build/vendor.js:15302:16)
at debugCheckAndUpdateNode (http://localhost:8101/build/vendor.js:16195:76)
at debugCheckDirectivesFn (http://localhost:8101/build/vendor.js:16136:13)
at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:40:5)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8101/build/vendor.js:16121:21)
at checkAndUpdateView (http://localhost:8101/build/vendor.js:15268:14)
at c (http://localhost:8101/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8101/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8101/build/vendor.js:74789:16)
at NavControllerBase._failed (http://localhost:8101/build/vendor.js:74782:14)
at http://localhost:8101/build/vendor.js:74829:59
at t.invoke (http://localhost:8101/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8101/build/vendor.js:6184:33)
at t.invoke (http://localhost:8101/build/polyfills.js:3:14916)
at r.run (http://localhost:8101/build/polyfills.js:3:10143)
at http://localhost:8101/build/polyfills.js:3:20242
Is it just an import or version issue? If so, how can i solve it?
Thanks for your help!