Angular- 集成 -Typescript- 版本 -Echarts-（附代码）

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

1 安装 & 配置

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

$ngnewangular-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: 'Datensic

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

ht'},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]