Jg-angular-echarts NPM

jg-angular-echarts

简介

极光行业SaaS研发组封装的echarts（基于 Angular 的 Apache ECharts 组件）

安装

npm install echarts jg-angular-echarts --save
or
yarn add echarts jg-angular-echarts

使用

在项目app.module导入JgAngularEchartsModule

import { JgAngularEchartsModule } from 'jg-angular-echarts';

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

准备图表数据

 config = {
    key: 'month',
    value: 'value',
    children: 'result',
  };
  data = [
    {
      name: '大盘数据',
      key: 'value',
      result: [
        { month: '2022-1-12', value: 103 },
        { month: '2022-2-12', value: 113 },
        { month: '2022-3-12', value: 123 },
        { month: '2022-4-12', value: 133 },
        { month: '2022-5-12', value: 143 },
        { month: '2022-6-12', value: 153 },
        { month: '2022-7-12', value: 163 },
      ],
    },
  ];
  dataPie = [
    { month: '2022-1-12', value: 103 },
    { month: '2022-2-12', value: 113 },
    { month: '2022-3-12', value: 123 },
    { month: '2022-4-12', value: 133 },
    { month: '2022-5-12', value: 143 },
    { month: '2022-6-12', value: 153 },
    { month: '2022-7-12', value: 163 },
  ];

在模板页面使用

<jg-echarts-line
  height="175"
  [data]="data"
  watermark="abc@testcom.cn"
  [dataConfig]="config"
></jg-echarts-line>

<jg-echarts-bar
  height="175"
  [data]="data"
  [dataConfig]="config"
></jg-echarts-bar>

<jg-echarts-pie
  height="175"
  [data]="data2"
  [dataConfig]="config"
></jg-echarts-pie>

API

名称	说明	类型	默认值
`[height]`	图表的高度	number/string	-
`[dataConfig]`	数据的配置	any	-
`[data]`	数据	any	-
`[watermark]`	背景水印文案（email或iphone）	string	undefined	-
`[isLoading]`	是否显示加载动画	boolean	-
`[isShowEmpty]`	是否显示空数据ui	boolean	-
`(chartInit)`	图表初始化时的回调	(echartsInstance: EchartsInstance) => void	-
`[optionsInit]`	optionsInitoptions更新的回调	(options: EChartsOption) => void	-