Angular13引入Echarts图表操作实录

前言

由于毕设的软件需要前端绘图，所以果断选择知名度较高的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
一般情况下是这样引入的：

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

本能的想到跟模块引入，也就是在AppModule引入，但问题并没有解决。

查了一下解决方法很简单，改为如下方式引入：

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