Angular开发：第三方组件库的使用

发表于 更新于 分类于 阅读次数：
本文字数： 846 阅读时长 ≈ 1 分钟
开发时使用合适的组件库可以有效的避免重复造轮子

Echarts

Apache ECharts，一个基于 JavaScript 的开源可视化图表库

1.TS方式引入组件

前往 官网 按步骤在 TypeScript 文件中引入 Echarts

html中：

1
2
<div id="main" style="width: 600px;height:400px;" #demo></div>
<button (click)="click()">点击</button>

ts中：

1
2
3
4
5
@ViewChild('demo', {static:false}) demo!: ElementRef;
public click(): void{
    const myChart = echarts.init(this.demo.nativeElement);
    myChart.setOption(option);
}

2.Angular专用引入组件

前往 @BigDipper 进行查看

AntV-G6

G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用

报错

Property ‘getUpdateType’ in type ‘Node’ is not assignable to the same property in base type ‘INode’

报错信息：Property 'getUpdateType' in type 'Node' is not assignable to the same property in base type 'INode'.

报错原因：经检测是下载的 AntV-G6 依赖中出现的问题

解决办法：在 tsconfig.json 文件中添加 "skipLibCheck":true 配置项，参考 @973782523