This project is to learn the front-end visualization exercise project, imitation open source project production. Technology stacks used: React, ReactRouter, Echarts.

Here’s a preview of the address: Click to see what it looks like

GIF preview:

Fit the screen

algorithm

Wp is the effective width of the page, Hp is the effective height of the page.

The page is centered left and right, top and bottom.

If the width/height of the page is greater than 16/9, leave the left and right margins blank. If the width/height of the page is less than 16/9, leave the top and bottom blank.

The use of rem

# set the rem

Set it in head

Gets the device width and height and gets the page width and height

Const clientWidth = document. DocumentElement. ClientWidth / / get the device width const clientHeight = Document. The documentElement. ClientHeight / / to get equipment highly const pageWidth = clientWidth/clientHeight > 16/9? clientHeight * (16 / 9) : clientHeight; Const pageHeight = pageWidth/(16/9Copy the code

Set 1rem = Wp / 100

const string = `<style>html{font-size: ${pageWidth/100}px}</style>`
document.write(string)
Copy the code

# use REM to express page width

Suppose a div is 100px long and the overall width of the design is 2420px. Then the div will be 100/1920 * 100rem on the page.

#px()function

Using the formula above, create a new px.ts file, declare the global function px(), export it, and enjoy using px

export const px = (n) => n / 2420 * (window as any).pageWidth;
Copy the code

The page layout

The Grid layout is used for the page layout, because the Grid layout is convenient and suitable for “sliced” projects.

Direct code

// tsx
<div className="home">
  <main>
    <section className="section1">
      <Chart1/>
      <Chart2/>
      <Chart3/>
    </section>
    <section className="section2">
      <Chart4/>
      <Chart5/>
      <Chart6/>
    </section>
    <section className="section3">
      <Chart7/>
      <Chart8/>
      <Chart9/>
    </section>
  </main>
</div>
Copy the code
// scss .home { flex: 1; display: flex; flex-direction: column; > main { width: px(2420); margin: 0 auto; padding: px(74) px(70) px(70) px(70); flex: 1; display: grid; grid-template: "box1 box2 box3" 1219fr / 557fr 1133fr 557fr; grid-column-gap: px(19); grid-row-gap: px(19); > section { text-align: center } > .section1 { grid-area: box1; display: flex; flex-direction: column; justify-content: space-between; } > .section2 { grid-area: box2; display: flex; flex-direction: column; justify-content: space-between; } > .section3 { grid-area: box3; display: flex; flex-direction: column; justify-content: space-between; }}}Copy the code

echarts

To use the Echarts chart library, the main reference is the official configuration manual and the Term quick Reference manual

Chart1 source code, take charT1 module as an example, the main use of useEffect.

Hot map

The official example used Baidu maps, but for the overall effect, I found a map of China from the Internet without the South China Sea, of course, the map must be marked to show only part of China.

In Geo, set the registered JSON map ‘CN’ to map.

CoordinateSystem: ‘Geo’ can be used by setting it in the serues.

Ecahrts official example – Air quality of major cities in China – Baidu map

# Echarts combined with Geo to create a hot map

Update data in real time

The implementation of the update data is simple, just reset the echarts options.

Using charT1 as an example, let’s take a look at rewriting the code.

Export const Chart1 = () => {const divRef = useRef(null); useEffect(() => { var myChart = echarts.init(divRef.current); myChart.setOption({ ... . }) },[]) return( ... // write js)}Copy the code
// export const Chart1 = () => {const divRef = useRef(null); const myChart = useRef(null); Const data = [{value: 15, name: 'huaxin '}, {value: 14, name:' huaxin '}, {value: 13, name: 'huaxin '}, {value: 12, name:' huaxin '}, 'the southwest'}, {value: 11, name: 'northwest'}, {value: 10, name: },] useEffect(() => {setInterval(() => {const newData = [{value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (math.random () * 15), name: {value: 2 + math.round (Math.random() * 15), name: 'northwest'}, {value: 2 + math.h round (Math) random () * 15), name: 'the northeast'},]; x(newData) },1000) },[]) const x = (data) => { myChart.current.setOption(({ ... . })) } useEffect(() => { myChart.current = echarts.init(divRef.current); x(data) }, []); return( ... // write js)}Copy the code