Shulou(Shulou.com)06/03 Report--

This article shows you the method tutorial of developing a visual large screen production platform from scratch, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

You will reap

Design idea of visual large screen product

Technology selection of mainstream visual chart library

Design idea of large screen Editor

Design of large screen Visualization Editor Schema

Exploration of user data Autonomy

Before the introduction, let's take a look at the effect of the implementation.

Effect preview

Scheme realization

Design idea of visual large screen product

At present, many enterprises are more or less faced with the problem of "isolated island of information". The data between various system platforms can not be shared, and it is difficult to achieve integrated data analysis and real-time presentation.

Compared with the traditional hand-customized charts and data dashboards, the emergence of the visual large screen production platform can break the customized development of offsetting, the problem of data dispersion, and intuitive real-time data visualization through data collection, cleaning and analysis. able to multi-directional, multi-angle, panoramic display of various indicators, real-time monitoring, dynamic at a glance.

To meet the above requirements, we have designed a visual large screen solution, which includes the following points:

The above picture is the basic sketch designed by the author 4 months ago, which will be continuously updated in the later stage. Through the above design decomposition, we can basically build a customizable data screen.

Technology selection of mainstream visual chart library

At present, the known mainstream visualization libraries investigated by the author are:

Echart, an old open source visualization chart library based on JavaScript.

D3.js is a data-driven visualization library that can run independently in modern browsers without any other framework. It combines powerful visualization components to drive DOM operations.

Antv contains a complete system of visual components.

Chart.js HTML5-based easy-to-use JavaScript chart library

Metrics-graphics is a visualization library based on D3, optimized for visualization and layout of time series data.

C3.js wraps the code needed to construct the entire chart, making it easy to generate a D3-based chart

We can use any of the above libraries to achieve our visual large screen construction requirements, you can choose according to your preferences.

Design idea of large screen Editor

In the above analysis, we know that a large screen editor needs an editor core, which mainly consists of the following parts:

Component library

Drag (free drag, guide, automatic prompt)

Canvas renderer

Attribute Editor

As shown in the following figure:

We can use any component encapsulation method (react/vue, etc.) in the component library. Here, the visual component design method of H5-Dooring is used to optimize and design the component model.

A similar code is as follows:

Import {Chart} from'@ antv/f2'; import React, {memo, useEffect, useRef} from 'react'; import styles from'. / index.less'; import {IChartConfig} from'. / schema'; const XChart = (props:IChartConfig) = > {const {data, color, size, paddingTop, title} = props; const chartRef = useRef (null) UseEffect (() = > {const chart = new Chart ({el: chartRef.current | | undefined, pixelRatio: window.devicePixelRatio, / / specify resolution}); / / step 2: process data const dataX = data.map (item = > ({... item, value: Number (item.value)}); / / Step 2: load data source chart.source (dataX) / / Step 3: create the syntax of the graph, draw a bar chart, and the position of the graph is determined by the attributes genre and sold. Genre is mapped to the x-axis, and sold is mapped to the y-axis chart .interval () .position ('name*value') .color (' name'); / / Step 4: render the chart chart.render ();}, [data]) Return ({title});}; export default memo (XChart)

The above is just a simple example, we tend to do more control over the complexity of business requirements, such as animation, event, data inject and so on.

Component drag and drop can use existing plug-ins such as Dragable, or use H5-Dooring 's smart grid drag and drop. Here the author chooses free drag to achieve. The existing ones are:

Rc-drag

Sortablejs

React-dnd

React-dragable

Vue-dragable

Wait。 The specific drag-and-drop rendering process is as follows:

The specific drag and drop process is:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Use the H5 dragable API to drag the left component (component data) into the target container (targetBox)

Listen for the drag end event to get the data passed by the drag event to render the real visualization component

Visual component mount, schema injection edit panel, edit panel rendering component attribute editor

Drag and drop, property modification, update

Preview, publishin

Schema reference Dooring DSL design of component

Exploration of Visualization data Autonomy with large screen

At present, the platform we have implemented can either statically design data sources or inject third-party interfaces, as follows:

We can call the internal API to obtain data in real time. This is a common scenario used in the visual monitoring platform in the following ways:

Parameters (params) the editing area can customize the interface parameters. The author recommends two code editors here, which you can choose:

React-monaco-editor

React-codemirror2

Use one of the above to achieve mini version of vscode, you can also give it a try.

Auxiliary function

Visual large screen one-click screenshot and one-click screenshot function still follows H5-Dooring 's quick screenshot solution, which is mainly used for large screen sharing, poster production and other needs. We can use any of the following components:

Dom-to-image

Html2canvas

Undo redo

To undo redo, we can use existing libraries such as react-undo, or we can implement it ourselves. The principle is:

We store each state in an array and undo the redo function through pointers. If we want to be more robust, we can design a "state elimination mechanism" to set the maximum number of states that can be retained. Previous automatic elimination (delete, higher-end call stack). This can avoid a lot of state storage in complex operations and save browser memory.

Ruler guide ruler and reference line are implemented by ourselves here. Dynamic dom rendering is used to achieve the dynamic contraction of the reference line after scaling. The core of the solution is as follows:

Arr.forEach (el = > {let dom = [. Array.from (el.querySelectorAll ('.calibrationNumber')] [0] as HTMLElement; if (dom) {dom.style.transform = `translate3d (- 4px,-8px, 0px) scale (${(multiple + 0.1). ToFixed (1,)}) `;}}) The above content is the method tutorial of developing visual large screen production platform from zero. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.