@covalent/echarts
Version:
Teradata UI Platform Echarts Module
186 lines (172 loc) • 7.54 kB
Markdown
# td-chart-series[td-treemap]
`td-chart-series[td-treemap]` element generates a treemap series echarts visualization inside a `td-chart`. Its the equivalent of creating a JS series object `type="treemap"` in echarts.
## API Summary
#### Inputs
- config?: any
- Sets the JS config object if you choose to not use the property inputs.
- Note: [config] input properties will override input values
There are also lots of property inputs like:
- id?: string
- It can be used to refer the component in option or API.
- name?: string
- Series name used for displaying in tooltip and filtering with legend.
- leafDepth?: number
- Represents how many levels are shown at most.
- roam?: boolean
- Whether to enable dragging roam (move and zoom).
And so many more.. for more info [click here](https://echarts.apache.org/en/option.html#series-treemap)
## Setup
Import the [CovalentTreemapEchartsModule] in your NgModule:
```typescript
import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
import { CovalentTreemapEchartsModule } from '@covalent/echarts/treemap';
@NgModule({
imports: [
CovalentBaseEchartsModule,
CovalentTreemapEchartsModule,
...
],
...
})
export class MyModule {}
```
## Usage
Basic Example:
```html
<td-chart>
<td-chart-series
td-treemap
[top]="'10%'"
[left]="'10%'"
[bottom]="'10%'"
[right]="'10%'"
[data]="[{
value: 40,
name: 'Accessibility',
path: 'Accessibility'
}, {
value: 180,
name: 'Accounts',
path: 'Accounts',
children: [{
value: 76,
name: 'Access',
path: 'Accounts/Access',
children: [{
value: 12,
name: 'DefaultAccessPlugin.bundle',
path: 'Accounts/Access/DefaultAccessPlugin.bundle'
}, {
value: 28,
name: 'FacebookAccessPlugin.bundle',
path: 'Accounts/Access/FacebookAccessPlugin.bundle'
}, {
value: 20,
name: 'LinkedInAccessPlugin.bundle',
path: 'Accounts/Access/LinkedInAccessPlugin.bundle'
}, {
value: 16,
name: 'TencentWeiboAccessPlugin.bundle',
path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle'
}]
}, {
value: 92,
name: 'Authentication',
path: 'Accounts/Authentication',
children: [{
value: 24,
name: 'FacebookAuthenticationPlugin.bundle',
path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle'
}, {
value: 16,
name: 'LinkedInAuthenticationPlugin.bundle',
path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle'
}, {
value: 20,
name: 'TencentWeiboAuthenticationPlugin.bundle',
path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle'
}, {
value: 16,
name: 'TwitterAuthenticationPlugin.bundle',
path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle'
}, {
value: 16,
name: 'WeiboAuthenticationPlugin.bundle',
path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle'
}]
}, {
value: 12,
name: 'Notification',
path: 'Accounts/Notification',
children: [{
value: 12,
name: 'SPAAccountsNotificationPlugin.bundle',
path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle'
}]
}]
}, {
value: 1904,
name: 'AddressBook Plug-Ins',
path: 'AddressBook Plug-Ins',
children: [{
value: 744,
name: 'CardDAVPlugin.sourcebundle',
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
children: [{
value: 744,
name: 'Contents',
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents'
}]
}, {
value: 28,
name: 'DirectoryServices.sourcebundle',
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
children: [{
value: 28,
name: 'Contents',
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents'
}]
}, {
value: 680,
name: 'Exchange.sourcebundle',
path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
children: [{
value: 680,
name: 'Contents',
path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents'
}]
}, {
value: 432,
name: 'LDAP.sourcebundle',
path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
children: [{
value: 432,
name: 'Contents',
path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents'
}]
}, {
value: 20,
name: 'LocalSource.sourcebundle',
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
children: [{
value: 20,
name: 'Contents',
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents'
}]
}]
}]"
[visibleMin]="300"
[label]="{
show: true,
formatter: '{b}'
}"
[itemStyle]="{
normal: {
borderColor: '#fff'
}
}"
[levels]="[{itemStyle: {normal: {borderWidth: 0, gapWidth: 5 }}},{itemStyle: {normal: {gapWidth: 1}}},{colorSaturation: [0.35, 0.5], itemStyle: {normal: {gapWidth: 1, borderColorSaturation: 0.6}}}]"
>
</td-chart-series>
</td-chart>
```