前言

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

一、装置npm依赖

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

npm install echarts --savenpm 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!:{};// 加?容许变量为undefinedpublic 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...