The beginning of sad road of visual development



This series of articles will tell me that in the past year, I independently developed a project called data visualization, with a link […]. Welcome to star. We can see similar projects in the market at this stage,

  • Alibaba’s datav […]
  • Baidu’s sugar […]

Of course, there are other ones. I’ll just introduce them here.

What is data visualization? My personal understanding is that boring big data is displayed to users in a fast and easy to understand form through rich charts. General application scenarios are data display, alarm reminder, real-time message push, etc.
Of course, the planning of my project can also control the hardware equipment through chart control and IOT. Data visualization is just a module. It can also include component event interaction, customize industry components, and form a set of industry customization scheme. Similar to SCADA.

Project preparation

To organize requirements and build blueprints, let’s plan with mind map

The beginning of sad road of visual development


We think that a project is a system you are going to build, or a visualization project


If the whole project is compared to a system tree, then the project is the root node, then the page is the child node. As the name implies, the page is the page in the project.


Primitives are the most basic elements, and the basic elements that make up a page are primitives. They are rich, they can be charts, they can be basic graphs, they can be tables, they can be 3D graphs… Everything is primitives as long as you like.


Components are divided into built-in components and user components. The difference is that user components are generated and added by users, and built-in components are built in editors. Components are built from one or more element components.


Tools refer to the functions in the editor canvas, including history, pasteboard, deletion and other functions, which can improve the efficiency of building large screen projects.

Master Edition

The master is very similar to the component. The difference is that the master has the function of one change all change, similar to the static property.

Here is the general plan. We will rearrange the details of elements, components, pages, projects, etc. in the future, but this is the general direction.


We need to build a configuration visualization editor based on these foundations. Of course, if you want to do prototyping or UML, it can also be supported, because it is flexible enough.

In the next issue, I will show you how to build the basic model editor framework through Vue, and how to choose the framework.

Recommended Today

The first Python Programming challenge on the Internet (end)

Date of establishment: March 28, 2020Update Date: April 22, 2020 (end)Personal collection Tool.pywebsite: please quote or change this article at will, just mark the source and the author. The author does not guarantee that the content is absolutely correct. Please be responsible for any consequences Title: the first Python Programming challenge on the web Find […]