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="[e-mail]"
  [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]	[optionsInit]options更新的回调	(options: EChartsOption) => void	-

支持

• 如果项目对你有帮助，请点颗星:star:，谢谢。
• 如果你对项目有想法、问题、BUG，欢迎讨论。