在有些使用 ECharts 库的 Angular 项目中,通常除了安装 npm 包之外,还会在 angular.json 中配置 “build.options.scripts”,将 “node_modules/echarts/dist/echarts.min.js”放入其中:

"projects": {
"<project-name>": {
"architect": {
"build": {
"options": {
//other config
"scripts": [
"node_modules/echarts/dist/echarts.min.js"
]
}
}
}
}
}

然后在需要使用的 TypeScript 单元顶部声明:

declare var echarts: any;

这样的做法看起来“不太像” TypeScript 的操作方式~

其实在使用 Angular 和 ECharts 的较新版本(ngx-echarts(ver >= 2.x),ECharts (ver >= 3.x))时,有更好的方式在 Angular 项目中引入 ECharts:

1、安装 npm 包:

 npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

2、在 module (比如 app.module.ts)中引入模块:

 import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
...,
NgxEchartsModule
],
})
export class AppModule { }

3、使用 ECharts:

 import * as echarts from "echarts";

 const echartsObject = echarts.init(document.getElementById("myChart"));

或者只导入必须的 API:

 import { init as echartsInit } from "echarts";

 const echartsObject = echartsInit(document.getElementById("myChart"));

参考

https://xieziyu.github.io/ngx-echarts/#/home
https://xieziyu.github.io/ngx-echarts/api-doc/

Angular 项目中如何使用 ECharts的更多相关文章

  1. gulp 在 angular 项目中的使用

    gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...

  2. angular项目中各个文件的作用

    原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...

  3. angular项目中遇到的问题

    一.angular项目中如何实现路由缓存 需要实现的效果,对请求的数据进行缓存,比如进入文章详情页之后点击返回,不会再调用后台数据接口:而是加载缓存中的数据,如何数据变动的情况下,可使用下拉刷新刷新页 ...

  4. 项目中是用eCharts

    1.首先在项目中引入echart.js库. <!DOCTYPE HTML> <%@page contentType="text/html; charset=UTF-8&qu ...

  5. angular项目中使用Primeng

    1.第一步把依赖添加到项目中 npm install primeng --save npm install @angular/animations --save npm install font-aw ...

  6. Angular项目中引入jQuery

    npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...

  7. 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程

    在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...

  8. angular项目中使用jquery的问题

    1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquer ...

  9. Angular项目中共享模块的实现

    创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 一.共享CommonModule 暂时只有CommonModule,以后会有一些需要共享 ...

随机推荐

  1. jq中attr()和prop() 属性的区别

    query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...

  2. Spark 学习笔记之 Streaming和Kafka Direct

    Streaming和Kafka Direct: Spark version: 2.2.0 Scala version: 2.11 Kafka version: 0.11.0.0 Note: 最新版本感 ...

  3. 【源码解析】自动配置的这些细节不知道,别说你会 springboot

    spring-boot 相对于 spring,很重要的一个特点就是自动配置,使约定大于配置思想成功落地.xxx-spring-boot-starter 一系列引导器能够开箱即用,或者只需要很少的配置( ...

  4. Spring5源码解析6-ConfigurationClassParser 解析配置类

    ConfigurationClassParser 在ConfigurationClassPostProcessor#processConfigBeanDefinitions方法中创建了Configur ...

  5. SQL server数据库系统部分常用的存储过程及说明

    --SQL server数据库系统常用的存储过程 exec sp_databases --能看到所有具有权限的数据库名,大小和备注 exec sp_helpdb --数据库名,大小,管理员,创建时间状 ...

  6. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  7. 初识域渗透利器Empire

    Empire 是一款类似Metasploit 的渗透测试框架,基于python 编写,Empire是一个纯粹的PowerShell 后开发代理,建立在密码安全通信和灵活的架构上.Empire 实现了无 ...

  8. [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

    1. 什么是 CompositionBrush CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔. 使UWP 应用时可以选择使用 XAML 画 ...

  9. [LUOGU1437] 敲砖块

    题目描述 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖 都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 33 33 7 ...

  10. [JZOJ5178]【NOIP2017提高组模拟6.28】So many prefix?

    Description