Angualr13 集成Echarts8.0 亲测可用

最新推荐文章于 2024-04-17 02:41:29 发布

-清风明月-

最新推荐文章于 2024-04-17 02:41:29 发布

阅读量581

点赞数

分类专栏： angular2 前端文章标签：前端 angular2 echarts

本文链接：https://blog.csdn.net/weixin_38296425/article/details/121614716

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

angular2

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Angualr13 集成Echarts8.0，真实案例、场景亲测可用。

本地环境：


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.4
OS: win32 x64

Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         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.4

Node: 16.13.0
Package Manager: npm 8.1.4
OS: win32 x64 Win10
Angular: 13.0.2

第1步:创建angular工程：

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)

执行完成后会创建一个名为echartsdemo的angular工程

第2步:安装必备的包：

需要进入到echartsdemo目录下：

D:\01-workspace\03-develop\01-angular>cd echartsdemo

D:\01-workspace\03-develop\01-angular\echartsdemo>dir
 驱动器 D 中的卷是 Data
 卷的序列号是 A343-6455

 D:\01-workspace\03-develop\01-angular\echartsdemo 的目录

2021/11/29  17:11    <DIR>          .
2021/11/29  17:11    <DIR>          ..
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    <DIR>          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    <DIR>          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.json
              11 个文件        858,685 字节
               4 个目录 255,937,089,536 可用字节

D:\01-workspace\03-develop\01-angular\echartsdemo>

需要的包：
echarts@8.0.0 see:https://www.npmjs.com/package/ngx-echarts
echarts@5.2.2 see:https://www.npmjs.com/package/echarts

下面是具体的安装过程：
npm install echarts@7.0.7 --save--dev
npm install ngx-echarts@8.0.0 --save--dev

D:\01-workspace\03-develop\01-angular\echartsdemo>npm install echarts@5.2.2 --save--dev

added 4 packages in 4s

22 packages are looking for funding
  run `npm fund` for details

D:\01-workspace\03-develop\01-angular\echartsdemo>npm install ngx-echarts@8.0.0 --save--dev

removed 1 package, and changed 1 package in 3s

22 packages are looking for funding
  run `npm fund` for details

D:\01-workspace\03-develop\01-angular\echartsdemo>

第3步:打开工程做设置：

用VSCode打开工程后找到package.json，可以看到如下的内容：

表示已经安装OK，下面开始做设置：

第4步:修改app.modules.ts

加入需要引用的包

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';

在imports: [] 加入：
NgxEchartsModule.forRoot({echarts})
至此，完整的app.modules.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\app.component.html，里面的东西全部清空,增加模板定义：

<div echarts [options]="barChart" class="chart"></div>

第5步，定义数据模型

打开src\app\app.component.ts定义绑定变量：lineChart

public lineChart:any;

然后创建一个方法名字随意，这里为了测试我用的方法是：buildLineChartModule(),然后创建ngOnInit，在这个ngOnInit方法里调用buildLineChartModule()，稍后给出完整代码，ngOnInit()用于Angular获取输入属性后初始化组件，此方法是钩子方法，在ngOnChanges()方法被调用之后使用，这样可以在页面初始化完成后就自动在界面上显示出图表。
app.component.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步，测试

在浏览器访问http://localhost:4200/ 可以看到如下界面表示以上处理成功

OK，到此为止可以在angular中显示2维的图表了,再增加个饼图看看,打开Echarts官网找到环饼图案例：
Examples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut然后根据上面的步骤，分别定义标签：

<div echarts [options]="doughnutChart" class="chart"></div>

定义绑定变量：

  // 环饼图绑定变量
  public doughnutChart:any;

定义创建数据模型的方法buildLineChartModule()并且加入到ngOnInit().创建数据模型时的代码主要是参考Echarts 官网的帮助里面给出详细的源码，比如上面的链接打开后会显示如下：

左侧红框中的代码就是需要移植的代码，直接复制到buildLineChartModule()里面并且修改一下被复制的变量名即可，完整的代码如下：
1.HTML模板：

<h2>Echarts Demo</h2>
<div echarts [options]="barChart" class="chart"></div>

<p>环饼图</p>
<div echarts [options]="doughnutChart" class="chart"></div>

2.组件模型定义：

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;

  // 环饼图绑定变量
  public doughnutChart:any;

  ngOnInit():void{
    this.buildBarChartModule();
    this.buildDoughnutChart();
  }

  // 构建柱状图数据模型
  buildBarChartModule(){
    this.barChart = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };
  }

  // 构建环饼图数据模型
  buildDoughnutChart(){
    this.doughnutChart = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
  }
}

然后查看http://127.0.0.1:4200,可以看到下面的界面：