“

Echarts chart library is used for web big data visualization. Echarts provides conventional broken line charts, bar charts, scatter charts, pie charts, K-charts, box charts for statistics, maps, thermal maps, graphs for geographic data visualization, diagrams for relational data visualization, Treemap, rising sun charts, Parallel coordinates for multidimensional data visualization, funnel plots for BI, dashboards, and support for mash-ups between graphs.

“

No more words, first on the renderings!

Big data Presentation

Online demo address

Information display system

Online demo address

Display of order Information

Online demo address

Profile data

Online demo address

---

Vue big data visualization platform

I. Project Description

• A “data big screen project” based on Vue, Datav, Echart framework, through Vue components to achieve dynamic data refresh rendering, internal chart can be realized free replacement. Some charts can be modified using DataV components. For details, please click the DataV documentation below.
• Projects need to be displayed in full screen (press F11).
• In some areas of the project, global registration is used to increase the packaging volume. Please use on-demand introduction in practical application.
• After pulling the project, it is recommended to rename the file according to its functional area, now separated by a simple location.
• Project environment: VUE-CLI-3.0, DatAV-2.7.3, Echarts-4.6.0(if there is a problem with 5.x version, please switch to 4.x version), WebPack-4.0, NPM-6.13, Node-v12.16.

Links:

1. Vue official document
2. DataV official documentation
3. Echarts instance, Echarts API documentation

File directory

Ii. Introduction of main documents

Iii. Introduction to use

Start the project

Nodejs and NPM must be installed in advance. After downloading the project, run NPM/CNPM install in the project home directory to pull the dependency packages. After installing the dependency packages and using vue-CLI or directly using the command NPM run serve, you can start the project. After starting the project, you need to manually start the project in full screen (press F11). If there is no DataV framework dependency when compiling the project, type NPM install @jiaminghi/data-view or yarn add @jiaminghi/data-view to manually install the project.

Encapsulate component rendering diagrams

All ECharts charts are created based on the Common/Echart/Index.vue package, already listen for data and screen changes, and can dynamically render chart data and sizes. In the module of monitor window, anti – shake function is used to control update frequency and save browser performance.

The project is configured with the default ECharts chart style and file address: common/echart/theme.json.

The encapsulated render chart component supports passing in the following parameters, which can be added/removed according to business requirements.

The parameter name	type	Function/function
id	String	Unique ID, render chart node (optional, $el is used)
className	String	Class style name (optional)
options	Object	ECharts Configuration (Mandatory)
height	String	Chart height (suggested)
width	String	Chart width (suggested)

React Big data visualization platform

I. Project Description

• React, Dva, DataV, ECharts framework based on “big screen data project”. Support dynamic data refresh rendering, screen adaptation, data request simulation, local style, free chart replacement/reuse and other functions.
• Projects need to be displayed in full screen (press F11).
• Project environment: React ^16.2, WebPack-4.0, NPM-6.13, Node-v12.16
• Please pull the code from the master branch, the rest is the development branch.

1. Vue official document
2. DataV official documentation
3. Echarts instance, Echarts API documentation
4. Styled – Components Official documentation
5. Think about the relevant teaching articles

2. Introduction to files and directories

Project

├─ Mock out data

├ ─ ─ the SRC

│ ├─ Assets

│ ├─ Components

│ ├─ Models Dva Management

│ ├─ Routes Main interface definition

│ ├─ Services

│ ├─ Style

│ ├ ─ ├ ─ garbage

│  │

│ ├─ Index.js main function file

│ ├ ─ garbage ─ router. JSX

│

└─.roadhogrc.mock

Copy the code

Iii. Details

Start the project

Nodejs and NPM must be installed in advance. After downloading the project, run NPM install in the project home directory to pull out the dependency packages. Run the NPM run start command to start the project.

Data request simulation

The project adopts the Dva built-in mock data method. The data is stored in the mock folder, which needs to be exported in.roadhogrc.mock.js and registered in the main file index.js.

The Api request functions are written in services/index.js and are made by the asynchronous functions of the Effects object in the Models /* file. Due to the listening on routes triggering the asynchronous functions in the Subscriptions, Therefore, the corresponding function will be automatically triggered when the interface is opened. Please refer to the Dva document for specific writing method.

Request functions use Dva utils/request.js to use Get requests. POST is not supported by default and you need to modify it by yourself.

Mock data obtained by the interface is similar to that written by react-Redux. The connect higher-order function is used in components/* to receive mock data and pass it into Chart components.

The chart component

The chart component is primarily developed using the ECharts and DataV visualization frameworks. The chart file is in components/*/ Charts, the configuration file is in charts/options.js, and the dynamic data is accepted and imported by each page/index.js. The ECharts rendering functions are encapsulated in utils/chart.js.

Style to write

Style writing uses the Styled – Components plug-in to implement style componentation similar to scoped in Vue. Styles in the interface do not affect each other. The simplest example is as follows:

Style file style:

import styled from 'styled-components';



/ / generateddivThe label

export const Index = styled.div`

  display: flex;

  flex-direction: column;

  align-items: center;

`;



Copy the code

Usage:

import { Index } from/ '.style';



/ /...



 render() {

   return (

// The content is wrapped in the div tag after compilation

< Index > content < / Index >

   )

 }

Copy the code

Styled – Components also has functions such as parameter transmission, inheritance and attribute definition. For further learning, please visit the official website.

The global style is imported to router.jsx and registered globally via styled- Components — > createGlobalStyle, as described in icon import below.

The icon file

Icon files use the iconfont icon, and are also registered using Styled – Components, requiring an additional processing step.

• Download Unicode files into projects such as Assets /icon, and remove excess demo* and iconfont.
• Change the iconfont. CSS file to iconfont. Js.
• Open the iconfont. CSS file and change it to the following format:

import { createGlobalStyle } from 'styled-components';



// Wrap the content and export it using the gravitation-Components global registry function

export const Iconstyle = createGlobalStyle`

  @font-face {font-family: "iconfont";

.



- Same as global style in 'router.jsx'to register.



Copy the code

Screen adaptation

This project uses utils/ flexive. js plug-in to adapt by changing the rem value. The original design is 1920px. The adaptation range is 1366px ~ 2560px. The project has changed the source file according to the actual situation. The small screen (for example, the width is 1366px) needs to discard some dynamic components for adaptation.

// flexible file location: 'common/ flexibility.js', modified as follows

function refreshRem() {

  var width = docEl.getBoundingClientRect().width;

  // Minimum 1366px, maximum 2560px

  if (width / dpr < 1366) {

    width = 1366 * dpr;

  } else if (width / dpr > 2560) {

    width = 2560 * dpr;

  }

  // the original project was 1920px and I set it to 24 equal parts so that 1rem is 80px

  var rem = width / 24;

  docEl.style.fontSize = rem + 'px';

  flexible.rem = win.rem = rem;

}

Copy the code

Fix Dva history error

Go to the dVA package in node_modules and modify lib/index.js.

Line 22:

var _createHashHistory = _interopRequireDefault(

  require('history').createHashHistory

);

Copy the code

Modifying the Boot Port

During project compilation, if a port conflict occurs and a new port is agreed to open, there may be a deadlock situation, and the startup port needs to be modified. Modify the command content in package.json, such as changing the port to 9000:

 "start": "set PORT=9000 && roadhog server".

Copy the code

Using Hook

If you need to write code using Hook instead of Class, uninstall react first and then install Hook supported React (>=16.8).

❉ 1. See here on [thumbs up + praise + collection] support it, your “thumbs up, praise, collection” is the power of my creation.

❉ 2. Pay attention to me ~ take you to learn every day: a variety of front-end plug-ins, 3D cool effect, picture display, text effect, as well as the whole station template, college students graduation design template! “There are a lot of front-end developers here, talking about front-end Node and learning from each other”!

❉ 3. The above content technology related issues can leave a message/private communication, you can also pay attention to ↓ below the public number to obtain the source code!

❉

❤ Girlfriend’s birthday ❤ HTML+ CSS3 + JS realize Douyin cool CHERRY blossom 3D album (including background music) programmer profession necessary

HTML + CSS + JS Flying snow 3D album (including music custom text) programmer vexpress necessary

Put on a romantic fireworks show (including music) programmer confession

HTML + CSS + JS cool 3D album (including music can be customized text) programmer confession necessary

HTML + CSS3 + JS realize 3D album switch closed rotation (Valentine’s Day birthday confession) necessary

Html5 + CSS3 + JS to achieve full-screen Qixi Festival confession page (can customize the text photo)

❤[Front-end permanent free deployment online tool] To solve the problem of online project deployment without server!

Fire trill ❤ ultra | HTML + CSS + javascript meteor shower 3 d albums (profession) necessary tutorial come!

Front-end ❤ HTML + CSS + JS to achieve 1000 super cool effects (attached source code)

Web front end ❤ BASED on HTML + CSS + JS imitation JD Tmall e-commerce platform fully functional (free attached source code)

HTML + CSS + JS implementation cool 3D cube image library (free attached source code)

HTML + CSS + JS to achieve cool 3D Rubik’s Cube

HTML + CSS + JS (free attached source code)

Compass clock HTML + CSS + JS

Close to measure effective ❤ shaking audio and video to the watermark | (with source code for educational purposes only)

Css3 implements 3D rotating cubes

Css3 implementation of 3D stereo clock

HTML + CSS + JS implementation of 2021 New Year countdown special effects

This winter, I like this confession ❉ HTML + CSS +js❉ draw winter snow 3D album (521 programmers confession code large public)

❤ HTML + CSS + J ❤ Realize full screen love effects (programmer’s expression)

White clouds fluttering 3D album (including music) Programmer confession essential

A universe gossip feng shui compass rotation CSS3 animation, giving a person a sense of the heavy mystery (attached source code)