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)

 

版权声明：本文为博主原创文章，未经博主允许不得转载。