【实战】angular6.x 引入echarts图表教程

小渣渣

前言

因为angular2+ 使用 typescript开发，所以想要使用echarts，必须安装echarts针对angular的插件 ngx-echarts。效果图如下：



GitHub地址：https://github.com/xieziyu/ngx-echarts
echarts相关知识及API：https://echarts.baidu.com/api.html#echarts

安装

npm安装命令：

npm install module_name -S    即    npm install module_name --save    写入dependenciesnpm install module_name -D    即    npm install module_name --save-dev 写入devDependencies

登录可见。

引入ngx-echarts模块

在 app.modules.ts根模块中引入 NgxEchartsModule

登录可见。

由于我的页面是子组件，需要在子模块导入，并不需要在app.modules.ts父模块导入，代码如下：

子模块是不能导入父模块里面的组件的，你想要共享header组件的话，就在每个要用的模块里面导入header组件。
共享模块也是父模块可以使用子模块里面exports出来的东西，你把需要共享的东西加入到一个模块里面，然后在其他模块导入

参考链接：https://segmentfault.com/q/1010000014131113

登录可见。

组件html页面itsvse.component.html引入：

登录可见。

css样式表设置高度：

登录可见。

itsvse.component.ts 代码（以下两种ts代码都可以）

方式一：

登录可见。

方式二：

登录可见。

最后，运行项目，即可看到echarts图表效果。

小渣渣

https://xieziyu.github.io/ngx-echarts/#/home

小渣渣

https://www.echartsjs.com/gallery/vendors/echarts/echarts.min.js
https://www.echartsjs.com/gallery/vendors/echarts/map/js/china.js
https://www.echartsjs.com/galler ... tension/bmap.min.js