如何在angular使用echarts

最新推荐文章于 2024-09-06 10:41:19 发布

晓晓是个打字员

最新推荐文章于 2024-09-06 10:41:19 发布

阅读量656

点赞数

分类专栏： Angular 文章标签： angular echarts 图表

本文链接：https://blog.csdn.net/qq_32490291/article/details/87284871

版权

Angular 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

背景/框架：Angular 7 + echarts

在做项目的过程中，经常能遇到有些信息需要用图表来展示；这时候，我们就会想起百度的echarts，方便快捷好用…

那如何在angular中使用echarts呢？

首先，我们得install相关模块：

npm install echarts -S

npm install ngx-echarts -S

npm install @types/echarts -D

按以上顺序安装完之后，我们要在app.module.ts文件按中引入该模块：

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

然后，在需要用到echarts的Home页面：

home.component.html

<div echarts [options]="chartOption" (chartInit)="chartInit($event)"  class="demo-chart"></div>

home.component.ts

import { EChartOption } from 'echarts';

export class component implements OnInit{
	chartIntance;
	chartOption: EChartOption = {
	  xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [{
	    data: [820, 932, 901, 934, 1290, 1330, 1320],
	    type: 'line'
	  }]
	}
	
	constructor(){
	
	}
	
	chartInit(ev){
		this.chartIntance = ev;
	}


}
 
// ...

到此，echarts已经被运用在项目中…