前言

因为毕设的软件须要前端绘图，所以果决抉择知名度较高的 Apache Echarts。
对于原生 JS 或 TS 来说，引入第三方库非常简略，只须要在 Header 处增加即可。
本文旨在介绍 Angular 尤其是最新的 Angular13 应用 Echarts 的一些不同之处。

一、装置 npm 依赖

在 Angular 我的项目的根目录执行：

npm install echarts --save
npm install ngx-echarts --save

其中 --save 的作用是将包写入到 package.json 中，下次一键装置。

二、引入 CSS 及 JS 文件

Angular.json

在 Angular.json 的 scripts 中引入 "node_modules/echarts/dist/echarts.js"
留神：build 和 test 中的 scripts 都要引入，否则单元测试中款式会生效。

模块 imports

在模块的 imports 中引入 NgxEchartsModule
个别状况下是这样引入的：

但这样会导致空注入器问题：

解决方案很简略，改为如下形式引入：

NgxEchartsModule.forRoot({echarts: () => import('echarts')  
})

接下来能够粘贴款式了。

三、粘贴款式

拜访 Apache Echarts 官网能够看到目不暇接的款式，而且每种款式都给了 JS 和 TS 示例代码：
https://echarts.apache.org/ex…

轻易点进去一个，就能看到它的代码：

接下来钻研的就是代码怎么用的问题。
尽管左边的选项卡中给出了残缺的代码，但这种代码也是不能间接往 Angular 我的项目中粘贴的（因为 Angular13 加强了语法查看）。

查了一下才发现其实用法非常简单，外围就是 options 这个变量。

在 V 层定义图表：

<div echarts [options]="options"></div>

其中 ”options” 是变量名。

在组件中申明变量

不能够这么写，因为新版本的语法查看强制变量赋初始值：

public options:{};

能够有这几种形式：

// 赋初始值为空数组
public options:{} = {};
// 加! 容许变量为空
public options!:{};
// 加? 容许变量为 undefined
public options?:{};

为 options 赋值

写一个办法为 options 赋值，此时就能够得心应手替换数组的值了：

  initChart(){
    this.options={
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7']
      },
      yAxis: {type: 'value'},
      series: [
        {data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    }
  }

最初一步在适合的机会调用办法即可，例如在 Oninit 生命周期：

  ngOnInit(): void {this.initChart();
  }

四、总结

于是表格就进去了：

参考资料：

官网：
https://echarts.apache.org/ex…

博客：
https://blog.csdn.net/Sunshin…
https://stackoverflow.com/que…

菜鸟教程：
https://www.runoob.com/echart…