Angular2或Angular4使用echarts , ngx-echarts的方法

一个比较正确的使用方法:https://github.com/xieziyu/ngx-echarts

1、

npm install echarts --save

npm install ngx-echarts --save

如果网速差,可以使用淘宝镜像

2、项目中.angular-cli.json 中添加echarts

{
  "scripts": [
    // ...

    // add this:
    "../node_modules/echarts/dist/echarts.min.js"  // or echarts.js for debug purpose
  ],
}

3、在module 中调用

import { AngularEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    AngularEchartsModule
  ],
  ...
})
export class AppModule { }

4、html中

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

5、chartOption就是option


6、事件方法

  • chartClick: It emits the same params of 'click' event
  • chartDblClick: It emits the same params of 'dblclick' event
  • chartMouseDown: It emits the same params of 'mousedown' event
  • chartMouseUp: It emits the same params of 'mouseup' event
  • chartMouseOver: It emits the same params of 'mouseover' event
  • chartMouseOut: It emits the same params of 'mouseout' event
  • chartGlobalOut: It emits the same params of 'globalout' event
  • chartContextMenu: It emits the same params of 'contextmenu' event (since v1.2.1)
  • chartDataZoom: It emits the same params of 'dataZoom' event (thanks to averhaegen)


                
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Angular Echarts 是一个使用 Angular 框架与 Echarts 图表库集成的工具。它提供了一种简单而强大的方式来在 Angular 应用中创建交互式图表。通过 Angular Echarts,你可以轻松地将各种图表(如折线图、柱状图、饼图等)添加到你的 Angular 组件中,并对其进行配置和自定义。 要使用 Angular Echarts,首先需要在你的 Angular 项目中安装 echartsngx-echarts 库。然后,在你的组件中引入 ngx-echarts 模块,并使用相应的组件来创建和配置图表。 以下是一个简单的示例,展示如何在 Angular使用 Echarts: 1. 首先,安装 echartsngx-echarts: ``` npm install echarts ngx-echarts ``` 2. 在你的组件中引入 ngx-echarts 模块: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxEchartsModule } from 'ngx-echarts'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, NgxEchartsModule.forRoot()], bootstrap: [AppComponent] }) export class AppModule {} ``` 3. 在你的组件模板中使用 ngx-echarts 组件来创建图表: ```html <div> <ngx-echarts [options]="chartOptions" [theme]="chartTheme" [loading]="isLoading" (chartInit)="onChartInit($event)"></ngx-echarts> </div> ``` 4. 在你的组件类中定义图表的配置和数据: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions: any; chartTheme: string; isLoading: boolean; constructor() { this.chartOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'bar' }] }; this.chartTheme = 'light'; this.isLoading = false; } onChartInit(echartsInstance: any) { // 可以在这里对图表实例进行进一步的配置和操作 console.log('Chart initialized:', echartsInstance); } } ``` 以上示例演示了如何使用 ngx-echartsAngular 中创建一个简单的柱状图。你可以根据自己的需求进行配置和扩展,使用不同类型的图表和其他 Echarts 功能。 希望这个简单的示例能帮助你入门 Angular Echarts!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值