Angualr13 集成Echarts8.0 亲测可用
本文介绍了如何在 集成.0，真实案例、场景亲测可用。
本地环境：
_ _ ____ _ ___/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___||___/Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.4
OS: win32 x64Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, routerPackage Version
---------------------------------------------------------
@angular-devkit/architect 0.1300.3
@angular-devkit/build-angular 13.0.3
@angular-devkit/core 13.0.3
@angular-devkit/schematics 13.0.3
@angular/cli 13.0.3
@schematics/angular 13.0.3
rxjs 7.4.0
typescript 4.4.4Node: 16.13.0
: npm 8.1.4
OS: win32 x64 Win10
: 13.0.2
第1步:创建工程：
D:\01-workspace\03-develop\01-angular>ng new echartsdemo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE echartsdemo/angular.json (3069 bytes)
CREATE echartsdemo/package.json (1075 bytes)
CREATE echartsdemo/README.md (1057 bytes)
CREATE echartsdemo/tsconfig.json (863 bytes)
CREATE echartsdemo/.editorconfig (274 bytes)
CREATE echartsdemo/.gitignore (620 bytes)
CREATE echartsdemo/.browserslistrc (600 bytes)
CREATE echartsdemo/karma.conf.js (1428 bytes)
CREATE echartsdemo/tsconfig.app.json (287 bytes)
CREATE echartsdemo/tsconfig.spec.json (333 bytes)
CREATE echartsdemo/src/favicon.ico (948 bytes)
CREATE echartsdemo/src/index.html (297 bytes)
CREATE echartsdemo/src/main.ts (372 bytes)
CREATE echartsdemo/src/polyfills.ts (2338 bytes)
CREATE echartsdemo/src/styles.css (80 bytes)
CREATE echartsdemo/src/test.ts (745 bytes)
CREATE echartsdemo/src/assets/.gitkeep (0 bytes)
CREATE echartsdemo/src/environments/environment.prod.ts (51 bytes)
CREATE echartsdemo/src/environments/environment.ts (658 bytes)
CREATE echartsdemo/src/app/app-routing.module.ts (245 bytes)
CREATE echartsdemo/src/app/app.module.ts (393 bytes)
CREATE echartsdemo/src/app/app.component.html (23364 bytes)
CREATE echartsdemo/src/app/app.component.spec.ts (1088 bytes)
CREATE echartsdemo/src/app/app.component.ts (215 bytes)
CREATE echartsdemo/src/app/app.component.css (0 bytes)执行完成后会创建一个名为的工程
第2步:安装必备的包：
需要进入到目录下：
D:\01-workspace\03-develop\01-angular>cd echartsdemoD:\01-workspace\03-develop\01-angular\echartsdemo>dir驱动器 D 中的卷是 Data卷的序列号是 A343-6455D:\01-workspace\03-develop\01-angular\echartsdemo 的目录2021/11/29 17:11 .
2021/11/29 17:11 ..
2021/11/29 17:10 600 .browserslistrc
2021/11/29 17:10 274 .editorconfig
2021/11/29 17:10 620 .gitignore
2021/11/29 17:10 3,069 angular.json
2021/11/29 17:10 1,428 karma.conf.js
2021/11/29 17:11 node_modules
2021/11/29 17:11 849,079 package-lock.json
2021/11/29 17:10 1,075 package.json
2021/11/29 17:10 1,057 README.md
2021/11/29 17:10 src
2021/11/29 17:10 287 tsconfig.app.json
2021/11/29 17:10 863 tsconfig.json
2021/11/29 17:10 333 tsconfig.spec.json11 个文件 858,685 字节4 个目录 255,937,089,536 可用字节D:\01-workspace\03-develop\01-angular\echartsdemo> 需要的包：
@8.0.0 see:
@5.2.2 see:
下面是具体的安装过程：
npm @7.0.7 --save--dev
npm ngx-@8.0.0 --save--dev
D:\01-workspace\03-develop\01-angular\echartsdemo>npm install echarts@5.2.2 --save--devadded 4 packages in 4s22 packages are looking for fundingrun `npm fund` for detailsD:\01-workspace\03-develop\01-angular\echartsdemo>npm install ngx-echarts@8.0.0 --save--devremoved 1 package, and changed 1 package in 3s22 packages are looking for fundingrun `npm fund` for detailsD:\01-workspace\03-develop\01-angular\echartsdemo>第3步:打开工程做设置：
用打开工程后找到.json，可以看到如下的内容：
表示已经安装OK，下面开始做设置：
第4步:修改app..ts
加入需要引用的包
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';在: [] 加入：
.({})
至此，完整的app..ts是这样：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,NgxEchartsModule.forRoot({echarts})],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
第4步，修改模板
找到src\app\.html，里面的东西全部清空,增加模板定义：
第5步，定义数据模型
public lineChart:any;然后创建一个方法名字随意，这里为了测试我用的方法是：(),然后创建，在这个方法里调用()，稍后给出完整代码，()用于获取输入属性后初始化组件，此方法是钩子方法，在()方法被调用之后使用，这样可以在页面初始化完成后就自动在界面上显示出图表。
.ts 完整的代码如下：
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'echartsdemo';// 定义绑定变量public barChart:any;ngOnInit():void{this.buildBarChartModule();}buildBarChartModule(){this.lineChart = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};}
}
第6步，测试
在浏览器访问:4200/可以看到如下界面表示以上处理成功
OK，到此为止可以在中显示2维的图表了,再增加个饼图看看,打开官网找到环饼图案例：
- , a , and for
