安装echarts命令_Angular 集成 Typescript 版本 Echarts （附代码）

前言

由于本人之前在开发数据分析，机器学习类产品的时候经常用到百度开源的 echarts 数据可视化库从此爱不释手。恰好公司项目最近涉及到统计、数据展示的模块，于是才有了写这篇文章的动力，并打算靠 echarts 和 Event Sourcing 后台开发一个流式、实时、交互性强的前端数据产品。

与 echarts 同样经典的框架还有 d3，但后者的前端技术门槛明显要高出 echarts 很多，如果前端不是你的主业，或者不需要做许多特定偏底层的个性化开发，那我还是建议你使用 echarts。由于它出色的设计理念可以使你达到事半功倍的效果，而且在性能上也满足日常大数据分析的要求，可以同时在前端渲染 200万个数据点。且整个框架遵守 “Convention Over Configuration”的规范，也就是说，在开发中大部分工作都会专注在配置上，这让我们有更多的时间去关心如何做数据而不是艺术（美术）。

本文会以一个经典的例子开头，再在后面的篇幅中介绍一下 ngx-echarts 的特殊 API。

1 安装 & 配置

假设你已经安装了 ng 的命令行工具，首先我们创建一个新项目：

$ ng new angular-echarts-example
$ 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": "^4.7.0" , "ngx-echarts": "^4.2.2" 和 "@types/echarts": "^4.6.0"

在 module.ts 文件中引用 ngx-echarts 模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxEchartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 html 中添加：

<h1>angular works!</h1>

<div echarts [options]="chartOption" class="demo-chart"></div>

有需要的话也可以使用 [initOpts] 等 API，这些会在后面介绍

然后写一个被广泛流传的 echarts-typescript 例子：

import { Component } from '@angular/core';
import { EChartOption } from 'echarts'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-echarts-example';

  chartOption: EChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'cross',
          crossStyle: {
              color: '#999'
          }
      }
    },
    toolbox: {
        feature: {
            dataView: {
              show: true,
              readOnly: false,
              title: 'Datensicht'
            },
            magicType: {
              show: true,
              type: ['line', 'bar'],
              title: 'migic type'
            },
            restore: {
              show: true,
              title: 'Zurücksetzen'
            },
            saveAsImage: {
              show: true,
              title: 'Speichern'
            }
        }
    },
    legend: {
        data: ['蒸发量', '降水量', '平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
  }
}

储存并启动 Angular 程序：

$ ng serve --open

会看到如下页面，并且可以用鼠标与其进行交互式操作

echarts 前端

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 功能可参考官方文档。