ngx-echarts-net v1.0.2

ngx-echarts-net

简介

基于angular(v2+)的echarts组件

安装

npm install ngx-echarts-net --save

安装依赖包

npm install echarts  --save

npm install @types/echarts --save-dev

使用

• 在module导入NgxEchartsModule

import { NgxEchartsModule } from 'ngx-echarts-net';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgxEchartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 准备图表数据

option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

• 在模板页面使用

<ngx-echarts [option]="option"></ngx-echarts>

文档

属性(Attributes)

事件(Events)

Mouse events

Action events