In the era of big data, the demand for data visualization based on big screen is increasing day by day, and the big screen has become a form of enterprise performance display, report display, business monitoring and so on. React + Echarts to implement a large screen data display system. Make a note of the things you use:

Use REM units for various screens

To fit the screen without distorting the overall picture, the REM unit allows the page to be adjusted to the size of the browser.

The adaptation algorithm is as follows: Assume that the aspect ratio of the design draft is 16:9.

H device is the height of the display device, W device is the width of the display device, Wp is the effective width of the page, Hp is the effective height of the page. When the aspect ratio of the device is greater than 16:9, the left and right are left blank; when the width ratio is smaller than 16:9, the upper and lower are left blank. After calculating Wp, set it in JS:

1 rem = Wp / 100
Copy the code

Based on the above reasoning, we can calculate the actual size in rem corresponding to the size of an element in the design draft.

Using a Grid Layout

Grid layout is a powerful two – dimensional Grid layout system. Grid layout is a good solution for large screen projects that display data charts in regular or irregular chunks. Here’s a summary of some common Grid layouts.

  • Grid containers and grid elements:

We create a grid container by declaring display: grid or display: inline-grid on the element. Once we do this, all direct descendants of this element will become grid elements.

  • Grid track:

We use grid-template-columns and grid-template-rows attributes to define rows and columns in the grid. These properties define the tracks of the grid. A grid track is the space between any two lines in a grid.

  • Fr units:

An orbit can be defined in any unit of length. Grids also introduce an additional unit of length to help us create flexible grid tracks. The new FR unit represents an equal portion of the available space in the grid container. The next grid definition creates three tracks of equal width that grow and contract with the available space.

  • Used in the track inventoryrepeat():

Large grids with multiple tracks can use the repeat() tag to repeat part or the entire track list. The grid definition is as follows:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
Copy the code

It can also be written as:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
Copy the code

The Repeat statement can be used to Repeat part of a list of tracks.

  • Grid lines:

It should be noted that when we define grids, we define grid tracks, not grid lines. Grid creates numbered Grid lines for us to locate each Grid element. For example, the following grid has four vertical gridlines in three columns and two rows.

The order in which grid lines are numbered depends on the writing pattern of the article. In languages written from left to right, the grid line numbered 1 is at the far left. In languages written from right to left, the grid line numbered 1 is at the far right. Grid lines can also be named, and we will see how to do this later in the tutorial.

  • Use grid lines to position elements:

Use grid-column-start, grid-column-end, grid-row-start, grid-row-end attributes to locate child elements. The corresponding values are the grid line numbers that start and end the column of the element position.

  • Grid spacing:

Grid horizontal or grid vertical spacing between two grid cells can be created using grid-column-gap and grid-row-gap attributes, or directly using the two combined abbreviations grid-gap.

  • Use grid-area to determine an area:

The grid-area attribute specifies which areas the project will be placed in. This attribute is typically used in conjunction with the grid-template-areas attribute of a grid element. Grid-template-areas defines areas, and an area consists of one or more cells.

When we define a grid area with grid lines, we do so by specifying four lines surrounding the grid area. We can also name an area first and then specify its location in the grid-template-Areas attribute value. You can name any region you want. Each of these areas is assigned a name through the grid-area attribute, which does not affect the layout.

That’s the basic use of grid layout. See the GRID layout MDN documentation for more

Using echarts

Use the Echarts visual chart library to present the data. According to the tutorial on the website:

  1. The installation
NPM install echarts --save //Copy the code
  1. The introduction of ECharts
import * as echarts from 'echarts'; Var myChart = echarts.init(document.getelementById ('main')); Mychart.setoption ({title: {text: 'ECharts starting example '}, Tooltip: {}, xAxis: {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]})Copy the code
  1. You can customize the chart by changing the option option from the sample with the desired style, depending on your needs.

In this main record how to achieve the map and simple annotation.

① Introduce map files

import china from './china.json';
Copy the code

② Register available maps

echarts.registerMap('CN', china);
Copy the code

③ Map drawing through the GEO coordinate system component.

geo: {
  map:'CN',
},
Copy the code

(4) Modify the default style as required

Geo: {map:'CN', itemStyle: {// The polygon graphic style of the map area. Color: '#010D3D', borderColor: '#01A7F7',}, Emphasis: {// Highlight polygons and tag styles. label: {color: 'white'}, itemStyle: { areaColor: '#5470C6', } }, },Copy the code

⑤ Use effectScatter with ripple effect to mark on the map. Add a Series array.

Const colors = {' qinghai province: cedd8 '# 1', 'the gansu province' : '# bb2ff5', 'the xinjiang uygur autonomous region' : '# 17 b1fd'}; Series: [{type: 'effectScatter', // specify graphic type: the scatter map with the ripple effect is 'geo', // specify that it is drawn on the geo coordinateSystem color: Colors [' xinjiang Uygur Autonomous Region '], data:[{name: 'Xinjiang ', value: [84.9023,42.148]}]}, {type: 'effectScatter', coordinateSystem: 'geo', color: colors[' gansu '], data:[{name: 'Gansu ', value: [103.73,36.03],}]}, {type: 'effectScatter', coordinateSystem: 'geo', color: colors[' Qinghai '], data:[{name: Value: [95.2402,35.4199]},]}]Copy the code

End result:

Refer to the Apache ECharts documentation for more uses of ECharts.

Reference for this article:

  • Grid layout MDN documents
  • CSS Grid layout tutorial Ruan Yifeng network log
  • The Grid layout is the most powerful CSS layout
  • Use Echarts to achieve a simple map annotation effect