![292b44e8545b7a95ca136312327ea9d2.png](https://i-blog.csdnimg.cn/blog_migrate/be0c93aa026298195a1152a871961527.png)
前言
由于本人之前在开发数据分析,机器学习类产品的时候经常用到百度开源的 echarts 数据可视化库从此爱不释手。恰好公司项目最近涉及到统计、数据展示的模块,于是才有了写这篇文章的动力,并打算靠 echarts 和 Event Sourcing 后台开发一个流式、实时、交互性强的前端数据产品。
与 echarts 同样经典的框架还有 d3,但后者的前端技术门槛明显要高出 echarts 很多,如果前端不是你的主业,或者不需要做许多特定偏底层的个性化开发,那我还是建议你使用 echarts。由于它出色的设计理念可以使你达到事半功倍的效果,而且在性能上也满足日常大数据分析的要求,可以同时在前端渲染 200万个数据点。且整个框架遵守 “Convention Over Configuration”的规范,也就是说,在开发中大部分工作都会专注在配置上,这让我们有更多的时间去关心如何做数据而不是艺术(美术)。
本文会以一个经典的例子开头,再在后面的篇幅中介绍一下 ngx-echarts 的特殊 API。
1 安装 & 配置
假设你已经安装了 ng 的命令行工具,首先我们创建一个新项目:
cd angular-echarts-example
安装程序需要的 angular echarts 的依赖,这样你才能在 typescript 和 angular 中配置 echarts :
$ npm install echarts -S
$ npm install ngx-echarts -S
$ npm install @types/echarts -D
如果需要 GL(比如 3D 效果)还要特殊安装:
$ npm install echarts-gl -S
之后发现 package.json 文件中 在 dependencies 和 devDependencies 多了:
"echarts":
在 module.ts 文件中引用 ngx-echarts 模块:
import
在 html 中添加:
<
然后写一个被广泛流传的 echarts-typescript 例子:
import
储存并启动 Angular 程序:
$ ng serve --open
会看到如下页面,并且可以用鼠标与其进行交互式操作
![d67b671f1fe2790b71eac2da15ac4374.png](https://i-blog.csdnimg.cn/blog_migrate/47e0864ae5e2182cc5e5705868e2c73f.jpeg)
2 ngx-echarts 文档
2.1 echarts API 指令
在 HTML 的 echarts 模板中可以可以使用如下指令:
- [options]:与官方 options 设置一致
- [merge]:用于更新部分 options,比如需要更新图表数据的时候,且通常 echartsInstance.setOption() 与 notMerge = false 联用,具体看原文
- [loading]:用于在数据未加载完成时的过渡阶段效果
- [autoResize]:图表的大小与其所在的容器宽度自动调整尺寸
- [initOpts]:用于图表初始化配置,比如包括 devicePixelRatio, renderer, width 或 height 属性
- [theme]:用于设置图表主题背景(需要首先引入主题文件)
- [loadingOpts]:定义加载渲染,详细见官方文档
- [detectEventChanges]:定义是否需要捕获鼠标的 event handler,避免不必要的事件捕获
2.2 事件(Event)
原生 echarts 支持丰富地鼠标事件,如:click, dbclick, mousedown, mouseup, mouseover, mouseout, globalout,这些事件同样包含在 ngx-echarts 指令中,但在命名上加了 chart 前缀,比如: click 在 ngx-echarts 中叫做 chartClick,其用法与原生的 echarts event 是一样的。
例如 HTML:
<div echarts class="demo-chart" [options]="chartOptions" (chartClick)="onChartClick($event)"></div>
chartClick 会捕获鼠标在前端点击的事件,然后我们就可以用 typescript 将捕获的事件进行处理。
3 结束语
本文配置、实现了一个迷你版的 Augular 集成 echarts 数据展示的例子。在真实项目中可以考虑使用 rxjs polling 的技术动态地获取流式数据变化,并将其渲染给前端 echarts。
如果想了解更多 echarts 功能可参考官方文档。