前言
因为毕设的软件须要前端绘图,所以果决抉择知名度较高的 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…