共价电荷

埃克萨斯是什么?

图表 是一个大型的可视化图书馆, 由Baidu建于画布上.

为什么是共价画?

Covalent Echarts是一个由Teradata所建的Angular库,目的是在Angular最佳做法和标准中揭露强大的Echarts API. 共价Echarts还包括了自动再大小,事件输出等易用功能.

共价UI平台不需要使用共价Echarts.

为什么是坎瓦斯?

Teradata客户在大型数据集工作,是地球上最大的数据集. 像D3.js这样的SVG图表对于灵活性和定制性来说是巨大的,但对实时数据和大数据来说却没有那么有效. 共价Echarts消除了在极其强大和灵活的Echarts API的基础上自定义画图的复杂性,这些画图提供了你所能想象的每一个定制.

安装共价图

npm install --save echarts

npm install --save @covalent/echarts

要测试( 仅用于测试 !) 开发中的最新更改, 请安装夜建 :

npm install --save https://github.com/Teradata/covalent-echarts-nightly.git

设置

在您的 NgMudule 中导入 [CovalentBaseEchartsMudule] :

import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
import { CovalentBarEchartsModule } from '@covalent/echarts/bar';
import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip';
@NgModule({
  imports: [
    CovalentBaseEchartsModule,
    CovalentBarEchartsModule,
    CovalentTooltipEchartsModule,
    ...
  ],
  ...
})
export class MyModule {}

使用量

基本示例:

<td-chart [style.height.px]="300">
  <td-chart-tooltip
    [trigger]="'item'"
    [textStyle]="{ color: '#818181' }"
    [backgroundColor]="'#ffffff'"
  >
    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
      <ng-container *ngIf="params">
        <div layout="row" layout-align="start center">
          <mat-icon>
            <span [style.color]="params.color">people</span>
          </mat-icon>
          <span class="mat-caption pad-left-sm">
            {{params.seriesName + ': ' + params.value}}
          </span>
        </div>
      </ng-container>
    </ng-template>
  </td-chart-tooltip>
  <td-chart-x-axis
    [show]="true"
    [position]="'bottom'"
    [type]="'category'"
    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']"
    [boundaryGap]="true"
  >
  </td-chart-x-axis>
  <td-chart-y-axis
    [show]="true"
    [type]="'value'"
    [position]="'right'"
    [max]="200"
  >
  </td-chart-y-axis>
  <td-chart-series
    td-bar
    [data]="[150, 130, 150, 120, 150, 120]"
    [name]="'Today'"
    [color]="'#F2724B'"
  >
  </td-chart-series>
</td-chart>

运行单元测试

运行 nx test angular-echarts 执行单元测试.