Overview of canvas editor on PCs - DataV - Alibaba Cloud Documentation Center

The PC canvas editing page, provided by the system, offers tools for canvas configuration and component management. This topic outlines the PC canvas editor's layout and features, facilitating the rapid development of data dashboards.

Enter the canvas editor

Access the DataV console.
In the All Applications interface, hover over the desired dashboard and click Edit to access the dashboard canvas editor.

To effectively manage the canvas and configure components, familiarize yourself with the interface layout and feature overview of the canvas editor.

Interface layout and feature overview

The DataV-Board 7.0 PC canvas editor's interface layout and features are detailed below.

Ordinal number	Name	Description
1	Toolbar	The toolbar, located at the top of the editor, includes features for canvas and blueprint switching, beautification, filtering, global layer/instruction/component/design library searching, canvas refreshing, right settings panel visibility control, theme switching, error message viewing, snapshot generation, and data dashboard previewing/publishing.
2	Left tab list	The left tab list displays features such as layers, component library, design library, global variables, filters, history, and data management. For detailed information, refer to the feature introduction pages.
3	Canvas settings	The canvas settings, situated in the center of the editor, allow for dashboard layout control and interaction mode setting: Dashboard layout: Utilize canvas features to arrange component styles, set the zoom ratio, manage thumbnail visibility, and access shortcut key functions. Interaction mode: Simulate component interactions in preview mode and test temporary effects, such as highlighting and hovering styles. While in interaction mode, you can temporarily adjust styles on the editor page (e.g., dragging the map component, clicking to activate interactive components, and configuring styles). User-generated behaviors in interaction mode are not triggered in the editor. Note Changes made in interaction mode are not saved. To revert styles, refresh the page as guided by the interface after exiting interaction mode. The canvas scaling feature is unavailable in interaction mode. To use scaling, exit interaction mode manually. For instance, activate the click dropdown selector in the canvas editor via interaction mode.
4	Page configuration	The Page configuration panel appears on the right when no component is selected on the canvas. Here, you can modify screen size, set background transparency and color, choose screen scaling methods, and create thumbnails.
5	Help page	Access the help panel by clicking the icon in the canvas's lower-left corner. This panel provides a beginner's guide, quick links, and an editor feature introduction.
6	Component settings	Select any component on the canvas to configure its Style, Data Source, and Advanced settings in the dialog box on the right. For configuration methods, see the configuration item description.