Data Visualization

Data visualization is a low-code data analysis and dashboard service. It provides reusable visual components and secondary-development capabilities, helping developers turn complex data into charts and dashboards through graphical editing and interactive operations.

It is suitable for smart city, smart park, security monitoring, business operations, risk warning, and other large-screen visualization scenarios.

Product Features

• Rich visualization and industry components.
• Custom component integration.
• Built-in examples for quick dashboard creation.
• Multiple data-source support.
• Drag-and-drop editing without code.

Technical Characteristics

• fastbee-view is an efficient low-code drag-and-drop visualization platform.
• Charts and page elements are encapsulated as base components.
• Typical scenarios include exhibitions, business monitoring, risk warning, and operation dashboards.
• Technology stack: Vue3, TypeScript 4, Vite 2, Naive UI, ECharts 5, Axios, Pinia 2, and PlopJS.
• Basic workflow: create project -> rename project -> drag components -> save -> preview -> publish.

Run And Deploy

Configure backend API address in .env.development:

VITE_DEV_PATH = 'http://localhost:8080'

Install dependencies. pnpm is recommended, and Node.js around 16.14.x is preferred.

npm install -g pnpm
pnpm install

Start the development service:

pnpm dev

Build the project:

pnpm run build

For Nginx deployment, upload the built files to /var/data/nginx/view/ and add a location rule:

location ^~/view/ {
  alias /var/data/nginx/view/;
  index index.html;
  try_files $uri $uri/ /index.html last;
}

Access address:

https://[domain]/view/

You can also add an external-link menu in the system, for example:

https://iot.fastbee.cn/view/#/project/items

API Reference

API	Method	Description
/goview/project/list	GET	Project list
/goview/project	POST	Create project
/goview/project/save/data	POST	Save project content
/goview/project/	PUT	Update basic information or publish status
/goview/project/{ids}	DELETE	Delete project
/goview/project/upload	POST	Upload file
/goview/project/getData	GET	Get project data for preview

Add Menu Entries

Tips

The commercial edition contains both built-in large screens and the visualization platform. They can be accessed by adding external-link menus.

Fixed large-screen menu example:

Enterprise Management -> Menu Management -> Add
Parent menu: Data Visualization
Menu type: Menu
Menu icon: monitor
Menu name: Large Screen
External link: Yes
Route: https://iot.fastbee.cn/bigScreen
Status: Visible / Normal

Visualization platform menu example:

Enterprise Management -> Menu Management -> Add
Parent menu: Data Visualization
Menu type: Menu
Menu icon: monitor
Menu name: Visualization Platform
External link: Yes
Route: https://iot.fastbee.cn/view
Status: Visible / Normal

Notes

• Use Node.js 16.14.x or later.
• If npm install fails, use pnpm.
• If nrm ls reports an open package error, install the compatible package version:

npm i nrm -g open@8.4.2 --save
nrm ls

• If Node.js memory is insufficient during build, increase the heap size:

export NODE_OPTIONS="--max-old-space-size=8192"