@covalent/echarts v8.12.0
Covalent ECharts
What's Echarts?
Echarts is a massive visualization library built on canvas by Baidu and open-sourced under the Apache License as an official Apache Incubator.
Why Covalent Echarts?
Covalent Echarts is an Angular library built by Teradata with the goal of exposing the powerful Echarts APIs in Angular best practices and standards. Covalent Echarts also includes ease of use features such as auto resizing, event outputs, etc.
The Covalent UI Platform is not required to use Covalent Echarts.
Why Canvas?
Teradata customers work in massive datasets, the largest on the planet. SVG charts such as D3.js are great for flexibility and customization, but aren't nearly as effective for realtime data and big data. Covalent Echarts removes the complexity in customizing canvas charts building on the incredibly powerful and flexible Echarts APIs, which have provided just about every customization you can imagine.
Installing Covalent Echarts
npm install --save echarts
npm install --save @covalent/echarts
To test (only for testing!) the latest changes from develop, install the nightly build:
npm install --save https://github.com/Teradata/covalent-echarts-nightly.git
Setup
Import the CovalentBaseEchartsModule in your NgModule:
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 {}
Usage
Basic Example:
<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>
Running unit tests
Run nx test angular-echarts
to execute the unit tests.
3 days ago
3 days ago
16 days ago
16 days ago
18 days ago
19 days ago
25 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
10 months ago
9 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
8 months ago
6 months ago
8 months ago
9 months ago
8 months ago
8 months ago
9 months ago
7 months ago
7 months ago
6 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
10 months ago
10 months ago
1 year ago
12 months ago
1 year ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago