Getting Started with Vue TreeMap

12 Aug 20268 minutes to read

This article provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue TreeMap component.

You can explore some useful features of the TreeMap component in the following video.

Prerequisites

Ensure that the development environment meets the system requirements for Syncfusion® Vue UI components.

Dependencies

The following packages are used by the Vue TreeMap package:

|-- @syncfusion/ej2-vue-treemap
    |-- @syncfusion/ej2-treemap
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-vue-base

Only the @syncfusion/ej2-vue-treemap package must be installed directly. Its required dependencies are installed automatically.

Use a package release that supports Vue 2. Before upgrading, check the Vue system requirements and package release notes.

Note: The TreeMap renders its visualization with SVG. This basic example does not require a separate TreeMap theme stylesheet.

Set Up the Vue 2 Project

Install Vue CLI globally using either npm or yarn, and create a project with the vue create command.

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When creating the project, select Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

After the project is created, navigate to its directory:

cd quickstart

Add the Syncfusion® Vue TreeMap Package

Syncfusion® packages are published on npm.

Install the @syncfusion/ej2-vue-treemap package using either npm or yarn.

npm

npm install @syncfusion/ej2-vue-treemap

yarn

yarn add @syncfusion/ej2-vue-treemap

Note: npm v5 and later save installed packages to dependencies by default, so the --save option is not required.

Add the Syncfusion® Vue TreeMap Component

Follow these steps to initialize an empty Vue TreeMap component. Data binding is added in the next section.

Step 1: Import and locally register the TreeMap component in the script section of src/App.vue.

<script>
import { TreeMapComponent } from '@syncfusion/ej2-vue-treemap';

export default {
  name: 'App',
  components: {
    'ejs-treemap': TreeMapComponent
  }
};
</script>

Step 2: Add an empty TreeMap component to the template section of src/App.vue.

<template>
  <div id="app">
    <ejs-treemap id="treemap"></ejs-treemap>
  </div>
</template>

At this stage, the component contains no data and does not display TreeMap items.

Step 3: Bind Data to TreeMap

The example uses the following properties:

  • dataSource specifies the array of data objects.
  • weightValuePath specifies the numeric field that determines each rectangle’s size.
  • leafItemSettings configures leaf labels and appearance.
  • labelPath specifies the data field displayed as the leaf label.

Replace the contents of src/App.vue with the below example.

<template>
    <div class="control_wrapper">
        <ejs-treemap id="treemap" :height='height' :dataSource='dataSource' :weightValuePath='weightValuePath' :leafItemSettings='leafItemSettings'></ejs-treemap>
    </div>
</template>
<script>
import { TreeMapComponent } from "@syncfusion/ej2-vue-treemap";

export default {
name: "App",
  components: {
    'ejs-treemap': TreeMapComponent
  },
  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>

Run the Project

Save src/App.vue, and then start the development server.

npm

npm run serve

yarn

yarn run serve

Open the URL displayed in the terminal, commonly http://localhost:8080, and verify that the TreeMap is displayed correctly.

Register Feature Modules

The TreeMap loads optional features through feature-specific modules. If a required module is not registered, the related feature is not rendered.

The following modules are commonly used:

  • TreeMapHighlight enables highlighting.
  • TreeMapSelection enables selection.
  • TreeMapLegend enables the legend.
  • TreeMapTooltip enables tooltips.

Register only the modules required by the application inside the component’s export default object, using the exact treemap key:

<script>
import { TreeMapComponent, TreeMapHighlight, TreeMapSelection, TreeMapLegend, TreeMapTooltip } from '@syncfusion/ej2-vue-treemap';

export default {
  components: {
    'ejs-treemap': TreeMapComponent
  },
  provide: {
    treemap: [TreeMapHighlight, TreeMapSelection, TreeMapLegend, TreeMapTooltip]
  }
};
</script>

Refer to the TreeMap API documentation and the related feature pages for configuration details.

Sample: Explore the Vue TreeMap getting-started sample.

Troubleshooting

  • The TreeMap is not rendered. Verify that TreeMapComponent is imported and registered, the data source contains records, and the browser console contains no component, package, or licensing errors.
  • The TreeMap is blank. Verify that weightValuePath matches a numeric field in every data object.
  • Labels are not displayed. Verify that leafItemSettings.labelPath matches a field in every data object.
  • A module-not-found error occurs. Verify that @syncfusion/ej2-vue-treemap is installed and restart the development server.
  • A package or Vue version error occurs. Confirm that the installed package release supports Vue 2 and that all Syncfusion packages use compatible versions.

For additional assistance, refer to the Vue TreeMap API documentation.

See Also