This section explains you the steps required to create a TreeMap and demonstrate its basic usage.
System requirements for Syncfusion Vue UI components
The following list of minimum dependencies are required to use the treemap:
|-- @syncfusion/ej2-treemap
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-svg-baseYou can use Vue CLI to setup your Vue applications. To install Vue CLI use the following command.
npm install -g @vue/cli
npm install -g @vue/cli-initStart a new project using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm installAll the available Essential JS 2 packages are published in npmjs.com registry. You can choose the component that you want to install. For this application, we are going to use TreeMap component.
To install TreeMap component, use the following command
npm install @syncfusion/ej2-vue-treemap –saveFor Registering Vue Component two ways are available. They are as follows.
Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.
Refer the code snippet given below.
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.use(TreeMapPlugin);By Registering Component Plugin in Vue, all child directives are also globally registered.
Import the Component and Component Plugin from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.
Refer the code snippet given below.
import { TreeMapComponent, TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.component(TreeMapPlugin.name, TreeMapComponent);Note: By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.
Add the EJ2 Vue TreeMap using <ejs-treemap> to the <template> section of the App.vue file in src directory, the content attribute of the TreeMap component is provided as name in data option in the <script> section.
<template>
<div id="app">
<ejs-treemap></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.use(TreeMapPlugin);
export default Vue.extend ({});
</script>Now run the npm run dev command in the console, it will build your application and open in the browser.
The following example shows a basic TreeMap.
<template>
<ejs-treemap id="treemap"></ejs-treemap>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.use(TreeMapPlugin);
export default Vue.extend ({});
</script>Since any data source has not been bound to the tree map, no shape will be rendered. Only an empty SVG element is appended to the tree map container.
The tree map control is segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the provide option on component creation. Find the modules available in tree map and their descriptions as follows.
In the current application, the above basic tree map is modified to visualize international airport count in South America.
In this demo, the tree map is just rendered with labels. For this, you need not to import any modules.
This section explains how to render the tree map with data source.
<template>
<div class="control_wrapper">
<ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);
export default {
data: function() {
return {
height:'350px',
dataSource: [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands",Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count:1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
],
weightValuePath: 'Count',
leafItemSettings: {
labelPath: 'State',
}
}
}
}
</script>export var data = [
{
Continent: [
{
Name: "Africa", Population: 1216130000, States: [
{
Name: "Eastern Africa", Population: 410637987, Region: [
{ Name: "Ethiopia", Population: 107534882 },
{ Name: "Tanzania", Population: 59091392 },
{ Name: "Kenya", Population: 50950879 },
{ Name: "Uganda", Population: 44270563 },
{ Name: "Mozambique", Population: 30528673 },
{ Name: "Madagascar", Population: 26262810 },
{ Name: "Malawi", Population: 19164728 },
{ Name: "Zambia", Population: 17609178 },
{ Name: "Zimbabwe", Population: 16913261 },
{ Name: "Somalia", Population: 15181925 },
{ Name: "South, Sudan", Population: 12919053 },
{ Name: "Rwanda", Population: 12501156 },
{ Name: "Burundi", Population: 11216450 },
{ Name: "Eritrea", Population: 5187948 },
{ Name: "Mauritius", Population: 1268315 },
{ Name: "Djibouti", Population: 971408 },
{ Name: "Réunion", Population: 883247 },
{ Name: "Comoros", Population: 832347 },
{ Name: "Mayotte", Population: 259682 },
{ Name: "Seychelles", Population: 95235 },
]
},
{
Name: "Middle Africa", Population: 158562976, Region: [
{ Name: "Democratic, Republic of the Congo", Population: 84004989 },
{ Name: "Angola", Population: 30774205 },
{ Name: "Cameroon", Population: 24678234 },
{ Name: "Chad", Population: 15353184 },
{ Name: "Congo", Population: 5399895 },
{ Name: "Central African, Republic", Population: 4737423 },
{ Name: "Gabon", Population: 2067561 },
{ Name: "Equatorial Guinea", Population: 1313894 },
{ Name: "Sao Tome and Principe", Population: 208818 },
]
},
{
Name: "Northern Africa", Population: 229385603, Region: [
{ Name: "Egypt", Population: 99375741 },
{ Name: "Algeria", Population: 42008054 },
{ Name: "Sudan", Population: 41511526 },
{ Name: "Morocco", Population: 36191805 },
{ Name: "Tunisia", Population: 11659174 },
{ Name: "Libya", Population: 6470956 },
{ Name: "Western, Sahara", Population: 567421 },
]
},
{
Name: "Southern Africa", Population: 64292365, Region: [
{ Name: "South Africa", Population: 57398421 },
{ Name: "Namibia", Population: 2587801 },
{ Name: "Botswana", Population: 2333201 },
{ Name: "Lesotho", Population: 2263010 },
{ Name: "Swaziland", Population: 1391385 },
]
},
{
Name: "Western Africa", Population: 362201579, Region: [
{ Name: "Nigeria", Population: 195875237 },
{ Name: "Ghana", Population: 29463643 },
{ Name: "Côte d'Ivoire", Population: 24905843 },
{ Name: "Niger", Population: 22311375 },
{ Name: "Burkina Faso", Population: 19751651 },
{ Name: "Mali", Population: 19107706 },
{ Name: "Senegal", Population: 16294270 },
{ Name: "Guinea", Population: 13052608 },
{ Name: "Benin", Population: 11485674 },
{ Name: "Togo", Population: 7990926 },
{ Name: "Sierra Leone", Population: 7719729 },
{ Name: "Liberia", Population: 4853516 },
{ Name: "Mauritania", Population: 4540068 },
{ Name: "Gambia", Population: 2163765 },
{ Name: "Guinea-Bissau", Population: 1907268 },
{ Name: "Cabo Verde", Population: 553335 },
{ Name: "Saint Helena", Population: 4074 },
]
},
]
}]
},
{
Continent: [
{
Name: "Asia", Population: 4436224000, States: [
{
Name: "Central Asia", Population: 69787760, Region: [
{ Name: "Uzbekistan", Population: 32364996 },
{ Name: "Kazakhstan", Population: 18403860 },
{ Name: "Tajikistan", Population: 9107211 },
{ Name: "Kyrgyzstan", Population: 6132932 },
{ Name: "Turkmenistan", Population: 5851466 },
]
},
{
Name: "Eastern Asia", Population: 1641908531, Region: [
{ Name: "China", Population: 1415045928 },
{ Name: "Japan", Population: 127185332 },
{ Name: "South Korea", Population: 51164435 },
{ Name: "North Korea", Population: 25610672 },
{ Name: "Taiwan", Population: 23694089 },
{ Name: "Hong Kong", Population: 7428887 },
{ Name: "Mongolia", Population: 3121772 },
{ Name: "Macao", Population: 632418 },
]
},
{
Name: "Southeastern Asia", Population: 641775797, Region: [
{ Name: "Indonesia", Population: 266794980 },
{ Name: "Philippines", Population: 106512074 },
{ Name: "Viet Nam", Population: 96491146 },
{ Name: "Thailand", Population: 69183173 },
{ Name: "Myanmar", Population: 53855735 },
{ Name: "Malaysia", Population: 32042458 },
{ Name: "Cambodia", Population: 16245729 },
{ Name: "Laos", Population: 6961210 },
{ Name: "Singapore", Population: 5791901 },
{ Name: "Timor-Leste", Population: 1324094 },
{ Name: "Brunei Darussalam", Population: 434076 },
]
},
{
Name: "Southern Asia", Population: 1846266634, Region: [
{ Name: "India", Population: 1354051854 },
{ Name: "Pakistan", Population: 200813818 },
{ Name: "Bangladesh", Population: 166368149 },
{ Name: "Iran", Population: 82011735 },
{ Name: "Afghanistan", Population: 36373176 },
{ Name: "Nepal", Population: 29624035 },
{ Name: "Sri Lanka", Population: 20950041 },
{ Name: "Bhutan", Population: 817054 },
{ Name: "Maldives", Population: 444259 },
]
},
{
Name: "Western Asia", Population: 262938009, Region: [
{ Name: "Turkey", Population: 81916871 },
{ Name: "Iraq", Population: 39339753 },
{ Name: "Saudi Arabia", Population: 33554343 },
{ Name: "Yemen", Population: 28915284 },
{ Name: "Syria", Population: 18284407 },
{ Name: "Azerbaijan", Population: 9923914 },
{ Name: "Jordan", Population: 9903802 },
{ Name: "United Arab Emirates", Population: 9541615 },
{ Name: "Israel", Population: 8452841 },
{ Name: "Lebanon", Population: 6093509 },
{ Name: "State of Palestine", Population: 5052776 },
{ Name: "Oman", Population: 4829946 },
{ Name: "Kuwait", Population: 4197128 },
{ Name: "Georgia", Population: 3907131 },
{ Name: "Armenia", Population: 2934152 },
{ Name: "Qatar", Population: 2694849 },
{ Name: "Bahrain", Population: 1566993 },
{ Name: "Cyprus", Population: 1189085 },
]
},
]
}]
},
{
Continent: [
{
Name: "North America", Population: 579024000, States: [
{
Name: "Central America", Population: 174988756, Region: [
{ Name: "Mexico", Population: 130759074 },
{ Name: "Guatemala", Population: 17245346 },
{ Name: "Honduras", Population: 9417167 },
{ Name: "El, Salvador", Population: 6411558 },
{ Name: "Nicaragua", Population: 6284757 },
{ Name: "Costa, Rica", Population: 4953199 },
{ Name: "Panama", Population: 4162618 },
{ Name: "Belize", Population: 382444 },
]
},
{
Name: "Northern America", Population: 358593810, Region: [
{ Name: "U.S.", Population: 3267667480 },
{ Name: "Canada", Population: 36953765 },
{ Name: "Bermuda", Population: 61070 },
{ Name: "Greenland", Population: 56565 },
{ Name: "Saint Pierre & Miquelon", Population: 6342 },
]
},
]
}]
},
{
Continent: [
{
Name: "South America", Population: 422535000, States: [
{ Name: "Brazil", Population: 204519000 },
{ Name: "Colombia", Population: 48549000 },
{ Name: "Argentina", Population: 43132000 },
{ Name: "Peru", Population: 31153000 },
{ Name: "Venezuela", Population: 30620000 },
{ Name: "Chile", Population: 18006000 },
{ Name: "Ecuador", Population: 16279000 },
{ Name: "Bolivia", Population: 10520000 },
{ Name: "Paraguay", Population: 7003000 },
{ Name: "Uruguay", Population: 3310000 },
{ Name: "Guyana", Population: 747000 },
{ Name: "Suriname", Population: 560000 },
{ Name: "French Guiana", Population: 262000 },
{ Name: "Falkland Islands", Population: 3000 },
]
},
]
},
{
Continent: [
{
Name: "Europe", Population: 738849000, States: [
{
Name: "Eastern Europe", Population: 291953328, Region: [
{ Name: "Russia", Population: 143964709 },
{ Name: "Ukraine", Population: 44009214 },
{ Name: "Poland", Population: 38104832 },
{ Name: "Romania", Population: 19580634 },
{ Name: "Crech, Republic", Population: 10625250 },
{ Name: "Hungary", Population: 9688847 },
{ Name: "Belarus", Population: 9452113 },
{ Name: "Bulgaria", Population: 7036848 },
{ Name: "Slovakia", Population: 5449816 },
{ Name: "Moldova", Population: 4041065 },
]
},
{
Name: "Northern Europe", Population: 103642971, Region: [
{ Name: "United Kingdom", Population: 66573504 },
{ Name: "Sweden", Population: 9982709 },
{ Name: "Denmark", Population: 5754356 },
{ Name: "Finland", Population: 5542517 },
{ Name: "Norway", Population: 5353363 },
{ Name: "Ireland", Population: 4803748 },
{ Name: "Lithuania", Population: 2876475 },
{ Name: "Latvia", Population: 1929938 },
{ Name: "Estonia", Population: 1306788 },
{ Name: "Iceland", Population: 337780 },
{ Name: "Channel Islands", Population: 166083 },
{ Name: "Isle of Man", Population: 84831 },
{ Name: "Faeroe Islands", Population: 49489 },
]
},
{
Name: "Southern Europe", Population: 152172107, Region: [
{ Name: "Italy", Population: 59290969 },
{ Name: "Spain", Population: 46397452 },
{ Name: "Greece", Population: 11142161 },
{ Name: "Portugal", Population: 10291196 },
{ Name: "Serbia", Population: 8762027 },
{ Name: "Croatia", Population: 4164783 },
{ Name: "Bosnia and Herzegovina", Population: 3503554 },
{ Name: "Albania", Population: 2934363 },
{ Name: "Macedonia", Population: 2085051 },
{ Name: "Slovenia", Population: 2081260 },
{ Name: "Montenegro", Population: 629219 },
{ Name: "Malta", Population: 432089 },
{ Name: "Andorra", Population: 76953 },
{ Name: "Gibraltar", Population: 34733 },
{ Name: "San Marino", Population: 33557 },
{ Name: "Holy, See", Population: 801 },
]
},
{
Name: "Western Europe", Population: 92746859, Region: [
{ Name: "Germany", Population: 82293457 },
{ Name: "France", Population: 65233271 },
{ Name: "Netherlands", Population: 17084459 },
{ Name: "Belgium", Population: 11498519 },
{ Name: "Austria", Population: 8751820 },
{ Name: "Switzerland", Population: 8544034 },
{ Name: "Luxembourg", Population: 590321 },
{ Name: "Monaco", Population: 38897 },
{ Name: "Liechtenstein", Population: 38155 },
]
},
]
}]
}
]Here, the tree map is created with data source and set with the [weightValuePath] as count. You can customize the leaf level tree map items using the [leafItemSettings]. The properties such as [fill], [border], and [labelPosition] can be changed using the [leafItemSettings].
The color mapping feature supports customization of item colors based on the underlying value of item received from bound data source. Specify the field name from the values that have to be compared for the item in the [equalColorValuePath] or [rangeColorValuePath] property.
<template>
<div class="control_wrapper">
<ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :equalColorValuePath='equalColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);
export default {
data: function() {
return {
height: '350px',
dataSource: [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
],
weightValuePath: 'Count',
equalColorValuePath: 'Count',
leafItemSettings: {
labelPath: 'State',
colorMapping: [
{
value: 25,
color: '#634D6F'
},
{
value: 12,
color: '#B34D6D'
},
{
value: 9,
color: '#557C5C'
},
{
value: 7,
color: '#44537F'
},
{
value: 6,
color: '#637392'
},
{
value: 3,
color: '#7C754D'
},
{
value: 2,
color: '#2E7A64'
},
{
value: 1,
color: '#95659A'
},
]
}
}
}
}
</script>export var data = [
{
Continent: [
{
Name: "Africa", Population: 1216130000, States: [
{
Name: "Eastern Africa", Population: 410637987, Region: [
{ Name: "Ethiopia", Population: 107534882 },
{ Name: "Tanzania", Population: 59091392 },
{ Name: "Kenya", Population: 50950879 },
{ Name: "Uganda", Population: 44270563 },
{ Name: "Mozambique", Population: 30528673 },
{ Name: "Madagascar", Population: 26262810 },
{ Name: "Malawi", Population: 19164728 },
{ Name: "Zambia", Population: 17609178 },
{ Name: "Zimbabwe", Population: 16913261 },
{ Name: "Somalia", Population: 15181925 },
{ Name: "South, Sudan", Population: 12919053 },
{ Name: "Rwanda", Population: 12501156 },
{ Name: "Burundi", Population: 11216450 },
{ Name: "Eritrea", Population: 5187948 },
{ Name: "Mauritius", Population: 1268315 },
{ Name: "Djibouti", Population: 971408 },
{ Name: "Réunion", Population: 883247 },
{ Name: "Comoros", Population: 832347 },
{ Name: "Mayotte", Population: 259682 },
{ Name: "Seychelles", Population: 95235 },
]
},
{
Name: "Middle Africa", Population: 158562976, Region: [
{ Name: "Democratic, Republic of the Congo", Population: 84004989 },
{ Name: "Angola", Population: 30774205 },
{ Name: "Cameroon", Population: 24678234 },
{ Name: "Chad", Population: 15353184 },
{ Name: "Congo", Population: 5399895 },
{ Name: "Central African, Republic", Population: 4737423 },
{ Name: "Gabon", Population: 2067561 },
{ Name: "Equatorial Guinea", Population: 1313894 },
{ Name: "Sao Tome and Principe", Population: 208818 },
]
},
{
Name: "Northern Africa", Population: 229385603, Region: [
{ Name: "Egypt", Population: 99375741 },
{ Name: "Algeria", Population: 42008054 },
{ Name: "Sudan", Population: 41511526 },
{ Name: "Morocco", Population: 36191805 },
{ Name: "Tunisia", Population: 11659174 },
{ Name: "Libya", Population: 6470956 },
{ Name: "Western, Sahara", Population: 567421 },
]
},
{
Name: "Southern Africa", Population: 64292365, Region: [
{ Name: "South Africa", Population: 57398421 },
{ Name: "Namibia", Population: 2587801 },
{ Name: "Botswana", Population: 2333201 },
{ Name: "Lesotho", Population: 2263010 },
{ Name: "Swaziland", Population: 1391385 },
]
},
{
Name: "Western Africa", Population: 362201579, Region: [
{ Name: "Nigeria", Population: 195875237 },
{ Name: "Ghana", Population: 29463643 },
{ Name: "Côte d'Ivoire", Population: 24905843 },
{ Name: "Niger", Population: 22311375 },
{ Name: "Burkina Faso", Population: 19751651 },
{ Name: "Mali", Population: 19107706 },
{ Name: "Senegal", Population: 16294270 },
{ Name: "Guinea", Population: 13052608 },
{ Name: "Benin", Population: 11485674 },
{ Name: "Togo", Population: 7990926 },
{ Name: "Sierra Leone", Population: 7719729 },
{ Name: "Liberia", Population: 4853516 },
{ Name: "Mauritania", Population: 4540068 },
{ Name: "Gambia", Population: 2163765 },
{ Name: "Guinea-Bissau", Population: 1907268 },
{ Name: "Cabo Verde", Population: 553335 },
{ Name: "Saint Helena", Population: 4074 },
]
},
]
}]
},
{
Continent: [
{
Name: "Asia", Population: 4436224000, States: [
{
Name: "Central Asia", Population: 69787760, Region: [
{ Name: "Uzbekistan", Population: 32364996 },
{ Name: "Kazakhstan", Population: 18403860 },
{ Name: "Tajikistan", Population: 9107211 },
{ Name: "Kyrgyzstan", Population: 6132932 },
{ Name: "Turkmenistan", Population: 5851466 },
]
},
{
Name: "Eastern Asia", Population: 1641908531, Region: [
{ Name: "China", Population: 1415045928 },
{ Name: "Japan", Population: 127185332 },
{ Name: "South Korea", Population: 51164435 },
{ Name: "North Korea", Population: 25610672 },
{ Name: "Taiwan", Population: 23694089 },
{ Name: "Hong Kong", Population: 7428887 },
{ Name: "Mongolia", Population: 3121772 },
{ Name: "Macao", Population: 632418 },
]
},
{
Name: "Southeastern Asia", Population: 641775797, Region: [
{ Name: "Indonesia", Population: 266794980 },
{ Name: "Philippines", Population: 106512074 },
{ Name: "Viet Nam", Population: 96491146 },
{ Name: "Thailand", Population: 69183173 },
{ Name: "Myanmar", Population: 53855735 },
{ Name: "Malaysia", Population: 32042458 },
{ Name: "Cambodia", Population: 16245729 },
{ Name: "Laos", Population: 6961210 },
{ Name: "Singapore", Population: 5791901 },
{ Name: "Timor-Leste", Population: 1324094 },
{ Name: "Brunei Darussalam", Population: 434076 },
]
},
{
Name: "Southern Asia", Population: 1846266634, Region: [
{ Name: "India", Population: 1354051854 },
{ Name: "Pakistan", Population: 200813818 },
{ Name: "Bangladesh", Population: 166368149 },
{ Name: "Iran", Population: 82011735 },
{ Name: "Afghanistan", Population: 36373176 },
{ Name: "Nepal", Population: 29624035 },
{ Name: "Sri Lanka", Population: 20950041 },
{ Name: "Bhutan", Population: 817054 },
{ Name: "Maldives", Population: 444259 },
]
},
{
Name: "Western Asia", Population: 262938009, Region: [
{ Name: "Turkey", Population: 81916871 },
{ Name: "Iraq", Population: 39339753 },
{ Name: "Saudi Arabia", Population: 33554343 },
{ Name: "Yemen", Population: 28915284 },
{ Name: "Syria", Population: 18284407 },
{ Name: "Azerbaijan", Population: 9923914 },
{ Name: "Jordan", Population: 9903802 },
{ Name: "United Arab Emirates", Population: 9541615 },
{ Name: "Israel", Population: 8452841 },
{ Name: "Lebanon", Population: 6093509 },
{ Name: "State of Palestine", Population: 5052776 },
{ Name: "Oman", Population: 4829946 },
{ Name: "Kuwait", Population: 4197128 },
{ Name: "Georgia", Population: 3907131 },
{ Name: "Armenia", Population: 2934152 },
{ Name: "Qatar", Population: 2694849 },
{ Name: "Bahrain", Population: 1566993 },
{ Name: "Cyprus", Population: 1189085 },
]
},
]
}]
},
{
Continent: [
{
Name: "North America", Population: 579024000, States: [
{
Name: "Central America", Population: 174988756, Region: [
{ Name: "Mexico", Population: 130759074 },
{ Name: "Guatemala", Population: 17245346 },
{ Name: "Honduras", Population: 9417167 },
{ Name: "El, Salvador", Population: 6411558 },
{ Name: "Nicaragua", Population: 6284757 },
{ Name: "Costa, Rica", Population: 4953199 },
{ Name: "Panama", Population: 4162618 },
{ Name: "Belize", Population: 382444 },
]
},
{
Name: "Northern America", Population: 358593810, Region: [
{ Name: "U.S.", Population: 3267667480 },
{ Name: "Canada", Population: 36953765 },
{ Name: "Bermuda", Population: 61070 },
{ Name: "Greenland", Population: 56565 },
{ Name: "Saint Pierre & Miquelon", Population: 6342 },
]
},
]
}]
},
{
Continent: [
{
Name: "South America", Population: 422535000, States: [
{ Name: "Brazil", Population: 204519000 },
{ Name: "Colombia", Population: 48549000 },
{ Name: "Argentina", Population: 43132000 },
{ Name: "Peru", Population: 31153000 },
{ Name: "Venezuela", Population: 30620000 },
{ Name: "Chile", Population: 18006000 },
{ Name: "Ecuador", Population: 16279000 },
{ Name: "Bolivia", Population: 10520000 },
{ Name: "Paraguay", Population: 7003000 },
{ Name: "Uruguay", Population: 3310000 },
{ Name: "Guyana", Population: 747000 },
{ Name: "Suriname", Population: 560000 },
{ Name: "French Guiana", Population: 262000 },
{ Name: "Falkland Islands", Population: 3000 },
]
},
]
},
{
Continent: [
{
Name: "Europe", Population: 738849000, States: [
{
Name: "Eastern Europe", Population: 291953328, Region: [
{ Name: "Russia", Population: 143964709 },
{ Name: "Ukraine", Population: 44009214 },
{ Name: "Poland", Population: 38104832 },
{ Name: "Romania", Population: 19580634 },
{ Name: "Crech, Republic", Population: 10625250 },
{ Name: "Hungary", Population: 9688847 },
{ Name: "Belarus", Population: 9452113 },
{ Name: "Bulgaria", Population: 7036848 },
{ Name: "Slovakia", Population: 5449816 },
{ Name: "Moldova", Population: 4041065 },
]
},
{
Name: "Northern Europe", Population: 103642971, Region: [
{ Name: "United Kingdom", Population: 66573504 },
{ Name: "Sweden", Population: 9982709 },
{ Name: "Denmark", Population: 5754356 },
{ Name: "Finland", Population: 5542517 },
{ Name: "Norway", Population: 5353363 },
{ Name: "Ireland", Population: 4803748 },
{ Name: "Lithuania", Population: 2876475 },
{ Name: "Latvia", Population: 1929938 },
{ Name: "Estonia", Population: 1306788 },
{ Name: "Iceland", Population: 337780 },
{ Name: "Channel Islands", Population: 166083 },
{ Name: "Isle of Man", Population: 84831 },
{ Name: "Faeroe Islands", Population: 49489 },
]
},
{
Name: "Southern Europe", Population: 152172107, Region: [
{ Name: "Italy", Population: 59290969 },
{ Name: "Spain", Population: 46397452 },
{ Name: "Greece", Population: 11142161 },
{ Name: "Portugal", Population: 10291196 },
{ Name: "Serbia", Population: 8762027 },
{ Name: "Croatia", Population: 4164783 },
{ Name: "Bosnia and Herzegovina", Population: 3503554 },
{ Name: "Albania", Population: 2934363 },
{ Name: "Macedonia", Population: 2085051 },
{ Name: "Slovenia", Population: 2081260 },
{ Name: "Montenegro", Population: 629219 },
{ Name: "Malta", Population: 432089 },
{ Name: "Andorra", Population: 76953 },
{ Name: "Gibraltar", Population: 34733 },
{ Name: "San Marino", Population: 33557 },
{ Name: "Holy, See", Population: 801 },
]
},
{
Name: "Western Europe", Population: 92746859, Region: [
{ Name: "Germany", Population: 82293457 },
{ Name: "France", Population: 65233271 },
{ Name: "Netherlands", Population: 17084459 },
{ Name: "Belgium", Population: 11498519 },
{ Name: "Austria", Population: 8751820 },
{ Name: "Switzerland", Population: 8544034 },
{ Name: "Luxembourg", Population: 590321 },
{ Name: "Monaco", Population: 38897 },
{ Name: "Liechtenstein", Population: 38155 },
]
},
]
}]
}
]You can show legend for the tree map by setting the [visible] property to true in [legendSettings] object and injecting the TreeMapLegend module using the provide option.
<template>
<div class="control_wrapper">
<ejs-treemap id="treemap" :dataSource='dataSource' :legendSettings='legendSettings' :weightValuePath='weightValuePath' :equalColorValuePath='equalColorValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin, TreeMapLegend } from "@syncfusion/ej2-vue-treemap";
Vue.use(TreeMapPlugin);
export default {
data: function() {
return {
dataSource: [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
],
legendSettings: {
visible: true,
position: 'Top',
shape: 'Rectangle'
},
weightValuePath: 'Count',
equalColorValuePath: 'Count',
leafItemSettings: {
labelPath: 'State',
colorMapping: [
{
value: 25,
color: '#634D6F'
},
{
value: 12,
color: '#B34D6D'
},
{
value: 9,
color: '#557C5C'
},
{
value: 7,
color: '#44537F'
},
{
value: 6,
color: '#637392'
},
{
value: 3,
color: '#7C754D'
},
{
value: 2,
color: '#2E7A64'
},
{
value: 1,
color: '#95659A'
},
]
}
}
},
provide:{
treemap:[TreeMapLegend]
}
}
</script>export var data = [
{
Continent: [
{
Name: "Africa", Population: 1216130000, States: [
{
Name: "Eastern Africa", Population: 410637987, Region: [
{ Name: "Ethiopia", Population: 107534882 },
{ Name: "Tanzania", Population: 59091392 },
{ Name: "Kenya", Population: 50950879 },
{ Name: "Uganda", Population: 44270563 },
{ Name: "Mozambique", Population: 30528673 },
{ Name: "Madagascar", Population: 26262810 },
{ Name: "Malawi", Population: 19164728 },
{ Name: "Zambia", Population: 17609178 },
{ Name: "Zimbabwe", Population: 16913261 },
{ Name: "Somalia", Population: 15181925 },
{ Name: "South, Sudan", Population: 12919053 },
{ Name: "Rwanda", Population: 12501156 },
{ Name: "Burundi", Population: 11216450 },
{ Name: "Eritrea", Population: 5187948 },
{ Name: "Mauritius", Population: 1268315 },
{ Name: "Djibouti", Population: 971408 },
{ Name: "Réunion", Population: 883247 },
{ Name: "Comoros", Population: 832347 },
{ Name: "Mayotte", Population: 259682 },
{ Name: "Seychelles", Population: 95235 },
]
},
{
Name: "Middle Africa", Population: 158562976, Region: [
{ Name: "Democratic, Republic of the Congo", Population: 84004989 },
{ Name: "Angola", Population: 30774205 },
{ Name: "Cameroon", Population: 24678234 },
{ Name: "Chad", Population: 15353184 },
{ Name: "Congo", Population: 5399895 },
{ Name: "Central African, Republic", Population: 4737423 },
{ Name: "Gabon", Population: 2067561 },
{ Name: "Equatorial Guinea", Population: 1313894 },
{ Name: "Sao Tome and Principe", Population: 208818 },
]
},
{
Name: "Northern Africa", Population: 229385603, Region: [
{ Name: "Egypt", Population: 99375741 },
{ Name: "Algeria", Population: 42008054 },
{ Name: "Sudan", Population: 41511526 },
{ Name: "Morocco", Population: 36191805 },
{ Name: "Tunisia", Population: 11659174 },
{ Name: "Libya", Population: 6470956 },
{ Name: "Western, Sahara", Population: 567421 },
]
},
{
Name: "Southern Africa", Population: 64292365, Region: [
{ Name: "South Africa", Population: 57398421 },
{ Name: "Namibia", Population: 2587801 },
{ Name: "Botswana", Population: 2333201 },
{ Name: "Lesotho", Population: 2263010 },
{ Name: "Swaziland", Population: 1391385 },
]
},
{
Name: "Western Africa", Population: 362201579, Region: [
{ Name: "Nigeria", Population: 195875237 },
{ Name: "Ghana", Population: 29463643 },
{ Name: "Côte d'Ivoire", Population: 24905843 },
{ Name: "Niger", Population: 22311375 },
{ Name: "Burkina Faso", Population: 19751651 },
{ Name: "Mali", Population: 19107706 },
{ Name: "Senegal", Population: 16294270 },
{ Name: "Guinea", Population: 13052608 },
{ Name: "Benin", Population: 11485674 },
{ Name: "Togo", Population: 7990926 },
{ Name: "Sierra Leone", Population: 7719729 },
{ Name: "Liberia", Population: 4853516 },
{ Name: "Mauritania", Population: 4540068 },
{ Name: "Gambia", Population: 2163765 },
{ Name: "Guinea-Bissau", Population: 1907268 },
{ Name: "Cabo Verde", Population: 553335 },
{ Name: "Saint Helena", Population: 4074 },
]
},
]
}]
},
{
Continent: [
{
Name: "Asia", Population: 4436224000, States: [
{
Name: "Central Asia", Population: 69787760, Region: [
{ Name: "Uzbekistan", Population: 32364996 },
{ Name: "Kazakhstan", Population: 18403860 },
{ Name: "Tajikistan", Population: 9107211 },
{ Name: "Kyrgyzstan", Population: 6132932 },
{ Name: "Turkmenistan", Population: 5851466 },
]
},
{
Name: "Eastern Asia", Population: 1641908531, Region: [
{ Name: "China", Population: 1415045928 },
{ Name: "Japan", Population: 127185332 },
{ Name: "South Korea", Population: 51164435 },
{ Name: "North Korea", Population: 25610672 },
{ Name: "Taiwan", Population: 23694089 },
{ Name: "Hong Kong", Population: 7428887 },
{ Name: "Mongolia", Population: 3121772 },
{ Name: "Macao", Population: 632418 },
]
},
{
Name: "Southeastern Asia", Population: 641775797, Region: [
{ Name: "Indonesia", Population: 266794980 },
{ Name: "Philippines", Population: 106512074 },
{ Name: "Viet Nam", Population: 96491146 },
{ Name: "Thailand", Population: 69183173 },
{ Name: "Myanmar", Population: 53855735 },
{ Name: "Malaysia", Population: 32042458 },
{ Name: "Cambodia", Population: 16245729 },
{ Name: "Laos", Population: 6961210 },
{ Name: "Singapore", Population: 5791901 },
{ Name: "Timor-Leste", Population: 1324094 },
{ Name: "Brunei Darussalam", Population: 434076 },
]
},
{
Name: "Southern Asia", Population: 1846266634, Region: [
{ Name: "India", Population: 1354051854 },
{ Name: "Pakistan", Population: 200813818 },
{ Name: "Bangladesh", Population: 166368149 },
{ Name: "Iran", Population: 82011735 },
{ Name: "Afghanistan", Population: 36373176 },
{ Name: "Nepal", Population: 29624035 },
{ Name: "Sri Lanka", Population: 20950041 },
{ Name: "Bhutan", Population: 817054 },
{ Name: "Maldives", Population: 444259 },
]
},
{
Name: "Western Asia", Population: 262938009, Region: [
{ Name: "Turkey", Population: 81916871 },
{ Name: "Iraq", Population: 39339753 },
{ Name: "Saudi Arabia", Population: 33554343 },
{ Name: "Yemen", Population: 28915284 },
{ Name: "Syria", Population: 18284407 },
{ Name: "Azerbaijan", Population: 9923914 },
{ Name: "Jordan", Population: 9903802 },
{ Name: "United Arab Emirates", Population: 9541615 },
{ Name: "Israel", Population: 8452841 },
{ Name: "Lebanon", Population: 6093509 },
{ Name: "State of Palestine", Population: 5052776 },
{ Name: "Oman", Population: 4829946 },
{ Name: "Kuwait", Population: 4197128 },
{ Name: "Georgia", Population: 3907131 },
{ Name: "Armenia", Population: 2934152 },
{ Name: "Qatar", Population: 2694849 },
{ Name: "Bahrain", Population: 1566993 },
{ Name: "Cyprus", Population: 1189085 },
]
},
]
}]
},
{
Continent: [
{
Name: "North America", Population: 579024000, States: [
{
Name: "Central America", Population: 174988756, Region: [
{ Name: "Mexico", Population: 130759074 },
{ Name: "Guatemala", Population: 17245346 },
{ Name: "Honduras", Population: 9417167 },
{ Name: "El, Salvador", Population: 6411558 },
{ Name: "Nicaragua", Population: 6284757 },
{ Name: "Costa, Rica", Population: 4953199 },
{ Name: "Panama", Population: 4162618 },
{ Name: "Belize", Population: 382444 },
]
},
{
Name: "Northern America", Population: 358593810, Region: [
{ Name: "U.S.", Population: 3267667480 },
{ Name: "Canada", Population: 36953765 },
{ Name: "Bermuda", Population: 61070 },
{ Name: "Greenland", Population: 56565 },
{ Name: "Saint Pierre & Miquelon", Population: 6342 },
]
},
]
}]
},
{
Continent: [
{
Name: "South America", Population: 422535000, States: [
{ Name: "Brazil", Population: 204519000 },
{ Name: "Colombia", Population: 48549000 },
{ Name: "Argentina", Population: 43132000 },
{ Name: "Peru", Population: 31153000 },
{ Name: "Venezuela", Population: 30620000 },
{ Name: "Chile", Population: 18006000 },
{ Name: "Ecuador", Population: 16279000 },
{ Name: "Bolivia", Population: 10520000 },
{ Name: "Paraguay", Population: 7003000 },
{ Name: "Uruguay", Population: 3310000 },
{ Name: "Guyana", Population: 747000 },
{ Name: "Suriname", Population: 560000 },
{ Name: "French Guiana", Population: 262000 },
{ Name: "Falkland Islands", Population: 3000 },
]
},
]
},
{
Continent: [
{
Name: "Europe", Population: 738849000, States: [
{
Name: "Eastern Europe", Population: 291953328, Region: [
{ Name: "Russia", Population: 143964709 },
{ Name: "Ukraine", Population: 44009214 },
{ Name: "Poland", Population: 38104832 },
{ Name: "Romania", Population: 19580634 },
{ Name: "Crech, Republic", Population: 10625250 },
{ Name: "Hungary", Population: 9688847 },
{ Name: "Belarus", Population: 9452113 },
{ Name: "Bulgaria", Population: 7036848 },
{ Name: "Slovakia", Population: 5449816 },
{ Name: "Moldova", Population: 4041065 },
]
},
{
Name: "Northern Europe", Population: 103642971, Region: [
{ Name: "United Kingdom", Population: 66573504 },
{ Name: "Sweden", Population: 9982709 },
{ Name: "Denmark", Population: 5754356 },
{ Name: "Finland", Population: 5542517 },
{ Name: "Norway", Population: 5353363 },
{ Name: "Ireland", Population: 4803748 },
{ Name: "Lithuania", Population: 2876475 },
{ Name: "Latvia", Population: 1929938 },
{ Name: "Estonia", Population: 1306788 },
{ Name: "Iceland", Population: 337780 },
{ Name: "Channel Islands", Population: 166083 },
{ Name: "Isle of Man", Population: 84831 },
{ Name: "Faeroe Islands", Population: 49489 },
]
},
{
Name: "Southern Europe", Population: 152172107, Region: [
{ Name: "Italy", Population: 59290969 },
{ Name: "Spain", Population: 46397452 },
{ Name: "Greece", Population: 11142161 },
{ Name: "Portugal", Population: 10291196 },
{ Name: "Serbia", Population: 8762027 },
{ Name: "Croatia", Population: 4164783 },
{ Name: "Bosnia and Herzegovina", Population: 3503554 },
{ Name: "Albania", Population: 2934363 },
{ Name: "Macedonia", Population: 2085051 },
{ Name: "Slovenia", Population: 2081260 },
{ Name: "Montenegro", Population: 629219 },
{ Name: "Malta", Population: 432089 },
{ Name: "Andorra", Population: 76953 },
{ Name: "Gibraltar", Population: 34733 },
{ Name: "San Marino", Population: 33557 },
{ Name: "Holy, See", Population: 801 },
]
},
{
Name: "Western Europe", Population: 92746859, Region: [
{ Name: "Germany", Population: 82293457 },
{ Name: "France", Population: 65233271 },
{ Name: "Netherlands", Population: 17084459 },
{ Name: "Belgium", Population: 11498519 },
{ Name: "Austria", Population: 8751820 },
{ Name: "Switzerland", Population: 8544034 },
{ Name: "Luxembourg", Population: 590321 },
{ Name: "Monaco", Population: 38897 },
{ Name: "Liechtenstein", Population: 38155 },
]
},
]
}]
}
]