Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

This article was published in cloud + Community column by Tencent Cloud database TencentDB

I. The beauty of Tencent Cloud Map data

Before we understand Tencent Cloud map, let’s take a look at data visualization?

This is the nebula map, he represents QQ online number at the same time, see this map you think of what? QQ, blue diamond, green diamond, the sun, the moon and chat with my classmates at school, to know the net friend, you are about this which one of the many shining stars, further analysis can see coastal areas relatively bright, combined with the reality, the network is relatively developed coastal areas equipment, high degree of younger, active users, and so on. That’s the beauty of data visualization, telling a particular story to a particular character in a particular scene. The purpose of data visualization is to make data speak, and to make complex and abstract data more accurately and quickly conveyed in the form of vision

Tencent Cloud Map is a one-stop data visualization platform, supporting a variety of data sources, covering multiple field templates, drag and drop free layout, zero threshold to quickly create a professional large screen. In human terms, even if I am not a professional engineer, I can use Tencent Yuntu to display a bunch of abstract and boring data in an awesome way.

The client cases that Tencent Yuntu has access to include yonghui Super Species, Elong national IDC network export traffic monitoring, And Gering Deep Iris face feature big data analysis, etc.

The large screen of Yonghui Super Species Shenzhen Venture Capital store consists of two vertical screens, showing the heat of customer flow in business circle, time-sharing customer flow, the most popular drinks in the store, the most popular fruit items, etc. One day, it was counted that the passenger flow in the surrounding business district exceeded 300,000 people. The most popular drinks are Nongfu Spring and Coca Cola, and the favorite fruit is Flaming red grape.

Stores can intuitively observe the surrounding customer flow and shopping intentions, and guide stores to stock up.

Customers can also see the most popular products immediately after entering the store and buy what they are satisfied with.

At the same time, we can further analyze user portraits and dig more valuable data according to the surrounding environment and customer consumption.

Tencent Cloud Map templates the above professional valuable content and provides the smart retail industry template. Users in other similar scenarios can directly use this template to quickly build their own large visual screen.

Tencent Cloud Map not only provides industry templates in smart retail, but also in many other fields, such as monitoring, government work and so on.

Users can also customize their own large screen according to the template according to the specific scene. Tencent Cloud Map provides a variety of components, such as bar chart, bar chart, broken line chart, pie chart and area chart, scatter chart and histogram of distribution, as well as a variety of maps related to geographical location. Most of these components are independently developed by Tencent Yuntu, but also connected to third-party open source components such as Echarts.

Large screen design page, mainly divided into toolbar, layer, canvas, configuration panel (properties, data). Toolbars, layers, and configuration panels can be rolled back and forth freely, making the canvas area larger and allowing users to drag components more accurately for immersive manipulation.

It’s like the future world in the Three-Body Problem. It describes the world as clean and empty, with almost no facilities in sight, only when they are needed, and wherever they are needed. The world is becoming simple again after being complicated by technology, which is deeply hidden behind reality.

Ii. Tencent Cloud Map scheme design

So cool, can let the data talk Tencent cloud how to achieve it? The main modules of Tencent Cloud Map include component library, large screen design, attribute management and data management. The component library includes basic component, Map component, chart component, decorative component, text component, media component, widget, etc. Each component has its own property definition and is loaded asynchronously by bundle-loader. Large screen design includes toolbars, canvas, layers, properties, data, etc. Property management includes basic components (such as text input boxes, number input boxes, switch buttons, etc.), composite components (such as title components, location components, etc.), and data mapping configuration.

Data sources include static data, CSV files, API, Tencent Cloud/public network database, and Tencent Cloud monitoring.

Concrete implementation process: a component area map in the canvas, it is composed of data, code, attributes, through the control panel adjustment of any attributes or data, you can change the area map. Use react Redux classics action, Store, reducer implementation. When the user changes attributes or data, an action will be initiated, and the Store will call the dispatch method to deliver this action to a specific Reducer. After the reducer receives the action, the reducer executes the corresponding update logic and returns a new state. The state update is eventually passed to the root Reducer, returning a new complete state, which is then passed to the component for update.

Third, Tencent cloud map component combat

A progress bar can be seen everywhere in life concrete implementation process. Component implementation process generally includes requirements analysis, attribute analysis, model building, development implementation, test delivery. The properties of a simple progress bar include progress bar styles (border style, fill style, start color, end color, density), text styles (font size, text color, spacing, precision, etc.)

Component modeling: The progress bar consists of a bubble and a progress bar. The bubble consists of a border and text, and the progress bar consists of an outer box, a mask layer, a clipping layer, and a gradient layer. The following is the implementation of the specific code

Component realization is complete, how to access Tencent Cloud map. Each component needs to define its own properties. This includes component name, version, properties, and so on. The platform generates the corresponding control panel from this property, along with default property values. In this way, components can be connected to Tencent Cloud map for free drag-and-drop layout.

Tencent Yuntu, one-stop data visualization platform, zero threshold to create a professional large screen data display!

Question and answer

Where can data visualization be used in life?

reading

Meet big Data visualization: [Cloud] Make data visible

Redis extortion outbreak, how to avoid from deleting library to run away?

Redis cloud architecture is simple

Machine learning in action! Quick introduction to online advertising business and CTR knowledge

This article has been authorized by the author to Tencent Cloud + community, more original text pleaseClick on the

Search concern public number “cloud plus community”, the first time to obtain technical dry goods, after concern reply 1024 send you a technical course gift package!

Massive technical practice experience, all in the cloud plus community!