With the recent development and landing of several important national conferences. Enterprise transformation and visual control ushered in a boom. So it is necessary to have a visual editor that can work for the management team and reduce maintenance costs. The point is, it’s lightweight.

Here’s an example of a recently completed project:

The project realized the real-time observation of the core indicators of the enterprise and the overall control. It’s also easy to get started. And it’s done in conjunction with 3D (the digital twin concept). So without further ado, let’s get to the point. I will take a developer’s perspective and prototype the project. Take a look at the editor through a series of articles. 支那

The main idea of this article: data source configuration

The editor designs three data source configurations for different topics: 1, specific business data, 2, table data, and 3, chart data for data source configuration. Developers only need to understand basic Ajax requests and data parsing.

Business specific data

After we draw the basic area from the design, we bind the data object. Then the data drive can be completed by selecting and matching the corresponding relation of array. As shown below – drawing

Bind data objects

Data Source Configuration

Final rendering

As shown in the figure above, the data source configuration includes the following configurations: interface description, interface address, refresh time, data parsing, and associated fields, greatly enhancing the flexibility of front-end configuration. The core code is as follows:

Start () {// Get interface configuration const dataPlans = this._network.getdataPlans () const timer = this._timer dataPlans. ForEach (async) (dataPlan, index) => { if (dataPlan.type ! InvokeData (dataPlan) // Data refresh timer[index] = setInterval(async () => {await this.invokeData(dataPlan) }, dataPlan.refreshTime) }) }Copy the code

The above is the core code for data acquisition and refresh. There is no description here. Please look forward to the following series of articles on the principle of code level.

Tabular data

Configure in the property panel (the configuration details are in the property panel, and the principle is the same as data source configuration). The three points are emphasized here: 1, table header configuration 2, CSS style configuration 3, linkage

Header configuration

Title Configures the properties and title bar of corresponding dataCopy the code

CSS Style Configuration

Use native writing to ensure effectiveness.Copy the code

The linkage function is completed by defining event distribution or event listening. In screenshot scenarios, this table does not provide linkage function. Later source section will show the linkage effect.

Final rendering

The chart data

Configure in the Properties panel (the configuration details are in the properties panel, and the principle is the same as data source configuration). The important point here is that the properties panel provides common chart configuration.

JSON Panel configuration

Even more powerful is the options configuration that perfectly interconnects with ECHATS. Achieve true seamless docking. If you already have a diagram configuration, migrate it directly to the project.

Final rendering

As you can see, refer to the project screenshots for the above understanding. In the case of adequate resources. The developer’s task can be accomplished quickly. As you can see, the learning curve is very smooth. This is the end of sharing this article, if you are interested, please pay attention to the next sharing article. Strong disclaimer: This article is intended to share a mature, lightweight visual editor.

If you are interested in visualization, you can communicate with me on wechat 541002349. In addition, you can receive more valuable articles in time through the public account “ITMan Biao Shu”.