【Practice】Angular6.x introduces echarts chart tutorial

Little scum · Posted on 4/24/2019 3:27:55 PM

preface

Because Angular2+ is developed using TypeScript, if you want to use echarts, you must install the Angular plugin NGX-echarts. The renderings are as follows:

GitHub address:The hyperlink login is visible.
echarts related knowledge and API:The hyperlink login is visible.

Installation

npm installation command:

npm install module_name -S i.e. npm install module_name --save write-dependenciesnpm install module_name-D --d, i.e. npm install module_name --save-dev writes devDependencies

Login is visible.

Introduced the ngx-echarts module

Introduce NgxEchartsModule in the app.modules.ts root module

Login is visible.

Since my page is a subcomponent, I need to import it in a submodule，It does not need to be imported in the app.modules.ts parent module, the code is as follows:

Submodules cannot import components from the parent module, if you want to share the header component, import the header component into each module you want to use.
Shared modules are also parent modules that can export things from child modules, you add what needs to be shared into a module, and then import it in other modules

Reference links:The hyperlink login is visible.

Login is visible.

Component HTML page itsvse.component.html introduced:

Login is visible.

CSS Stylesheet Set Height:

Login is visible.

itsvse.component.ts code (both TS codes below are acceptable)

Method 1:

Login is visible.

Method 2:

Login is visible.

Finally, run the project and you can see the echarts chart effect.