angular 中引入echarts 的方式

最新推荐文章于 2023-06-20 09:51:28 发布

原创最新推荐文章于 2023-06-20 09:51:28 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

angular

当前文章被收录于：

angular

3 篇文章 0 人学习

订阅专栏查看详情

echarts

当前文章被收录于：

echarts

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在Angular项目中引入ECharts的两种常见方式：一是直接引用echarts.js文件，二是通过npm安装并导入。文章详细展示了如何在项目中进行配置及使用。

1、直接引用echarts.js 文件

首选需要把echarts.js文件放到项目静态资源文件夹中，然后在angular.json 文件中scripts里面去引用，路径不要找错了，我这里拿我引的jquery给你看

然后就是在用到的地方，在文件最上面定义变量echarts,就可以正常用了

// 用到的组件里面定义
import { Component } from '@angular/core';
declare const echarts: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  // echarts.init('XXXXX');
}

2、通过npm install echarts 安装，安装成功后，在用到的组件里面直接导入就行

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  // echarts.init('XXXX')
}

两种引入方式，不仅是echarts ,其它js库引入都是同样的引法。

（完结）

下面是我的小程序，扫码给个支持下吧，还有奖励奥