NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.22k stars 241 forks source link

how to use echarts in NativeScript-Angular #1851

Closed tsonevn closed 5 years ago

tsonevn commented 5 years ago

@Wanglianwei commented on Wed Jun 05 2019

Hello, I want to use echarts in the framework. According to the echart and Angular tutorials, I imported echarts, but echarts needs to be called with div tags, what should I do to make it display to the page. html: <div echarts [options]="chartOption" style="height: 100%;width: 100%;"></div>

module.ts: import { NgxEchartsModule } from 'ngx-echarts'; imports: [ ... NgxEchartsModule ] package.js: "echarts": "^4.2.1", "ngx-echarts": "^4.1.1",

Error: ERROR ReferenceError: window is not defined JS: ERROR CONTEXT { JS: "view": { JS: "def": { JS: "nodeFlags": 375379969, JS: "rootNodeFlags": 33554433, JS: "nodeMatchedQueries": 2, JS: "flags": 0, JS: "nodes": [ JS: { JS: "nodeIndex": 0, JS: "parent": null, JS: "renderParent": null, JS: "bindingIndex": 0, JS: "outputIndex": 0, JS: "checkIndex": 0, JS: "flags": 33554433, JS: "childFlags": 49152, JS: "directChildFlags": 49152, JS: "childMatchedQueries": 0, JS: "matchedQueries": {}, JS: "matchedQueryIds": 0, JS: "references": {}, JS: "ngContentIndex": null, JS: "childCount": 1, JS: "bindings": [], JS: "bindingFlags": 0, JS: "outputs": [], JS: "element": { JS: "ns": "", JS: "name": "ActionBar", JS: "attrs": [ JS: [ JS: "", JS: "class", JS: "action-bar" JS: ], JS: [ JS: "", JS: "title", JS: "My App" JS: ] JS: ...

tsonevn commented 5 years ago

Hi @Wanglianwei, The echarts is DOM-related and cannot be used inside a NativeScript project. I would suggest reviewing our nativescript-ui-chart, that allows you displaying charts inside the app.

n0mer commented 5 years ago

Are there still any options to utilize SVG rendering capabilities of echarts on mobile ?