@farris/ui-charts v0.1.0

Charts

Demo

线上 Demo：http://10.110.85.202:5200/ng7-farris-ui/index.html#/charts

仓库地址

https://git.iec.io/webadp/ng7-farris-ui

介绍

按照封装程度不同，分为 2 类：

1. 通用图表组件（目前推荐）
   • farris-chart
2. 分类型图表组件
   • 饼图（farris-pie-chart）
   • 折线图（farris-line-chart）
   • 柱形图（farris-bar-chart）
   • 地图（farris-geo-chart）

分类型图表组件传入少量数据相关配置属性即可用，但通用图表组件有更类贴近于 EchartsOption 的灵活配置项。

使用

1. 安装：

npm i @farris/ui-charts

2. 引入 FarrisChartsModule:

import { FarrisChartsModule } from '@gspwidget/portlet';

@NgModule({
  imports: [
    FarrisChartsModule
  ]
})
export class YourModule {}

3. 在模板里使用组件：

<!-- 通用图表组件 -->
<farris-chart
	[option]="commonDemoOption"
></farris-chart>

<!-- 分类型图表组件 -->
<farris-pie-chart
  [data]="data"
  [legend]="legend" 
  [tooltip]="tooltip"               
  [seriesRadius]="seriesRadius"        
  [labelShow]="labelShow"
  [options]="options"
  [angleField]="angleField"
  [nameField]="nameField"
  (click)="onclick($event)"
></farris-pie-chart>

API

farris-chart（目前推荐）

通用图表组件。

farris-pie-chart

饼图组件。

更多文档待补充。