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

戚弘和
2023-12-01

一个比较正确的使用方法: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)

 类似资料: