web Big data visualization It uses echarts Chart Library ,ECharts , DataV Data visualization , Large screen visualization , Large screen adaptation ,
Provides a regular line chart 、 Histogram 、 Scatter plot 、 The pie chart 、K Line graph , Box chart for Statistics , Maps for visualization of geographic data 、 Heat map 、 Line graph , Diagram for visualization of relational data 、treemap、 Sunrise chart , Parallel coordinates of multidimensional data visualization , Also used
BI The funnel of , The dashboard , And support the mix and match between graphs .
DataV Data visualization aims to let more people see the charm of data visualization , Help non professional engineers easily build professional level visual application through graphical interface , Meet your conference and exhibition 、 Business monitoring 、 Risk early warning 、 Geographic Information Analysis and other business needs .

One is based on vue、datav、Echart Big data visualization of the framework （ Large screen display ） Templates , Recently updated detailed introduction , Realize big data visualization . adopt vue Component to achieve data dynamic refresh rendering , Internal charts are freely replaceable . Some charts use DataV Self contained components , Free to change , Continuous updating …

150 set Echarts Large screen visualization template file directory ↓↓↓

150 Set based Echarts Realize the source code of visual data large screen response display effect , total 150+ A page , It can be redeveloped on this basis .

Don't talk much , Pick a big data display directory , On the renderings ！

Big data display

Online demo address

Information display system

Online demo address

Order information display

Online demo address

Data overview

Online demo address

---

vue Big data visualization platform

One 、 Project description

• One is based on Vue、Datav、Echart Framework of the " Data big screen project ", adopt Vue Component to achieve data dynamic refresh rendering , The internal chart can be replaced freely . Some charts use DataV Self contained components , It can be changed , Please click below for details DataV file .
• The project needs full screen display （ Press F11）.
• Part of the project uses global registration , Increased packing volume , In practice, please use Introduce on demand .
• After pulling the project , It is recommended to rename the file according to your own functional area , Now it's a simple place to distinguish .
• Project environment ：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0( If 5.x There is a problem with the version , Please switch to 4.x edition )、Webpack-4.0、Npm-6.13、Node-v12.16.

link ：

1. Vue Official documents
2. DataV Official documents
3. echarts example ,echarts API file

File directory

Two 、 Introduction to main documents

3、 ... and 、 Introduction

Start project

It needs to be installed in advance nodejs And npm, Download the project and run it in the project home directory npm/cnpm install Pull dependency package . After installing the dependency package, use vue-cli Or use the command directly npm run serve, You can start the project , You need to start the project manually in full screen （ Press F11）. If there is no prompt when compiling the project DataV Framework dependence , Input npm install @jiaminghi/data-view perhaps yarn add @jiaminghi/data-view For manual installation .

Encapsulate components to render charts

be-all ECharts The charts are all based on common/echart/index.vue Encapsulation component created by , Data and screen changes have been monitored , Ability to dynamically render chart data and size . Small and large modules in the monitor window , The anti shake function is used to control the update frequency , Save browser performance .

The project is configured with the default ECharts Chart style , File address ：common/echart/theme.json.

The encapsulated render chart component supports passing in the following parameters , You can add it according to your business needs / Delete .

Parameter name	type	effect / function
id	String	only id, Render graph nodes （ Not required , Used $el）
className	String	class Style name （ Not required ）
options	Object	ECharts To configure （ Required ）
height	String	Chart height （ It is suggested to fill in ）
width	String	Chart width （ It is suggested to fill in ）

Dynamic rendering chart

The dynamic rendering chart case is components All chart components in the directory ,index Documents are responsible for data acquisition and processing ,chart Files are responsible for listening and data rendering .

chart The main logic of the file is ：

<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script> //  Introducing packaged components  import Echart from '@/common/echart' export default {
      //  Define configuration data  data(){
      return {
      options: {
     }}}, //  Declare components  components: {
      Echart}, //  receive data  props: {
      cdata: {
      type: Object, default: () => ({
     }) }, }, //  monitor , You can also use  computed  Calculate properties to achieve this function  watch: {
      cdata: {
      handler (newData) {
      this.options ={
      //  Write here  ECharts  To configure  } }, //  Monitor now  immediate: true, //  Deep monitoring  deep: true } } }; </script>

Reuse chart components

Reuse chart component case as the middle part of Mission passing rate and mission reaching rate modular , The two charts are similar , The difference is the color and the main rendering data . Just pass in the corresponding unique id And the style , And then in the reusable components components/echart/center/centerChartRate It can receive and assign value in the corresponding position .

Such as ： At the call point views/center.vue Define the data and pass it into the component

// Component calls 
<span> Today's mission pass rate </span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span> Today's mission attainment rate </span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
    
  return {
    
    rate: [
      {
    
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
    
        id: "centerRate2",
        tips: 40,
        colorData: {
    
          ...
        }
      }
    ]
  }
}

Change the border

The border is using DataV Built in components , Just go to views Find the corresponding location in the directory, find and replace it , Please go to DavaV Official website view
Such as ：

<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>

Change the chart

Go straight into components/echart Change the file below to what you want echarts Look like , You can go to echarts Official Community Check the cases in the official community .

Mixins Solve the adaptive adaptation function

Use mixins Injection solves the adaptive adaptation function of interface size change chart , Function in utils/resizeMixins.js in , Apply to common/echart/index.vue Package rendering component of , It's mainly about this.chart Function Injection .

Screen adaptation

The project draws on flexible plug-in unit , By changing rem To fit , The original design is 1920px. , The adaptation interval is ：1366px ~ 2560px, This project has to change the source file according to the actual situation , A small screen （ Such as : Wide for 1366px） We need to abandon some dynamic components for adaptation , Such as ’ Dynamic text transformation component ’ It will affect the layout , You need to manually switch to a normal node ,

// flexible file location : `common/flexible.js`, The revised part is as follows 
function refreshRem() {
    
  var width = docEl.getBoundingClientRect().width;
  //  Minimum 1366px, Maximum fit 2560px
  if (width / dpr < 1366) {
    
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
    
    width = 2560 * dpr;
  }
  //  The original project was 1920px I set it to 24 Equal parts , such 1rem Namely 80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

Request data

The current project does not use front-end and back-end data requests , It is recommended to use axios Make a data request , stay main.js Location for global configuration .

• axios Of main.js Configuration reference example （ Differ from man to man ）

import axios from 'axios';

// Put the method into vue On the prototype of , This allows you to use it globally 
Vue.prototype.$http = axios.create({
    
  // Set up 20 Second timeout 
  timeout: 20000,
  baseURL: 'http://172.0.0.1:80080', // Write the back end address here 
});

Four 、 Update

1. Added Echart The function of component reuse , Such as ： The two percentage charts of the target rate of intermediate tasks use the same component .
2. Fixed the asymmetry of the pattern bar on the right side of the head .
3. Fix screen adaptation issues , Changed all the dimensions , Unified use rem.
4. Use Mixins Inject diagram responsive code .
5. vue-awesome It's introduced on demand .
6. Encapsulating render functions , Pulling away the data makes the logic clearer .
7. New map component , And add automatic carousel function

5、 ... and 、 rest

I am also on the way of front-end learning , Welcome to exchange , Thank you very much ！

react Big data visualization platform

One 、 Project description

• One is based on React、Dva、DataV、ECharts Framework of the " Data big screen project ". Support data dynamic refresh rendering 、 Screen adaptation 、 Data request simulation 、 Local style 、 Charts are free to replace / Reuse and other functions .
• The project needs full screen display （ Press F11）.
• Project environment ：react^16.2、webpack-4.0、npm-6.13、node-v12.16.
• Please pull master Branch code , The rest are development branches .

1. Vue Official documents
2. DataV Official documents
3. echarts example ,echarts API file
4. styled-components Official documents
5. Think about related teaching articles

Two 、 File directory Introduction

Project
├── mock  Analog data 
├── src
│  │  ├── assets  Static resources 
│  │  ├── components  Each module component 
│  │  ├── models Dva Model management 
│  │  ├── routes  Route main interface definition 
│  │  ├── services  Get functions asynchronously 
│  │  ├── style  Global style 
│  │  └── utils  Tool function 
│  │
│  ├── index.js  Main function file 
│  └── router.jsx  Route definition file 
│
└── .roadhogrc.mock.js  Export simulation data 

3、 ... and 、 Details

Start project

It needs to be installed in advance nodejs And npm, Download the project and run it in the project home directory npm install Pull dependency package , Use command npm run start Start project , You need to start the project manually in full screen （ Press F11） To view the .

Data request simulation

Project adoption Dva With analog data mode , The data is placed in mock In the folder , Need to be in .roadhogrc.mock.js Export from , Then in the main file index.js Register in .

Interface Api The request function is written in services/index.js in , And by the models/* In the document effects Object to initiate the request , Because in subscriptions It monitors the route and triggers asynchronous functions , So when you open the interface, it will automatically trigger the corresponding function , Please refer to Dva file .

The request function uses Dva Self contained utils/request.js Unified use Get request , Not supported by default POST, Need to modify .

Interface access mock Data and react-redux The writing is similar to , stay components/* Use in connect Higher order functions receive and pass in each Chart Among the components .

Chart components

The chart component mainly uses ECharts and DataV Visualization framework to develop . The chart file is in components/*/charts in , Configuration file in charts/options.js in , The dynamic data is made up of each page/index.js Accept and import .ECharts The rendering function is encapsulated in utils/chart.js in .

Style writing

Style writing uses styled-components plug-in unit , Through the style of componentization to achieve similar Vue Medium scoped function , Styles in the interface don't affect each other , The simplest example is as follows ：

The style file style：

import styled from 'styled-components';

//  Generate  div  label 
export const Index = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

Usage mode ：

import {
     Index } from './style'; //...... render() {
    
   return (
    //   After compiling, the content is  div  Label the parcel 
     <Index>  Content  </Index>
   )
 }

styled-components It also has the Chuan Shen 、 Inherit 、 Define attributes and other functions , If necessary, please go to the official website for in-depth study .

Global style through styled-components —> createGlobalStyle Introduced to router.jsx And register to the global , See below for details icon Introduction mode .

icon file

icon Files use iconfont Icon , Also use styled-components To register , One more processing step is needed .

• download unicode Files into projects such as assets/icon, Delete redundant demo* and iconfont.js.
• take iconfont.css File modification suffix is iconfont.js.
• open iconfont.css Change the file to the following format ：

import {
     createGlobalStyle } from 'styled-components';

//  Use  styled-components  Global registration function package content and export 
export const Iconstyle = createGlobalStyle` @font-face {font-family: "iconfont"; ...... -  As with global styles, in  `router.jsx`  Register in .

Screen adaptation

The project draws on utils/flexible.js plug-in unit , By changing rem To fit , The original design is 1920px. , The adaptation interval is ：1366px ~ 2560px, This project has to change the source file according to the actual situation , A small screen （ Such as : Wide for 1366px） We need to abandon some dynamic components for adaptation , Such as ’ Dynamic text transformation component ’ It will affect the layout , You need to manually switch to a normal node ,

// flexible file location : `common/flexible.js`, The revised part is as follows 
function refreshRem() {
    
  var width = docEl.getBoundingClientRect().width;
  //  Minimum 1366px, Maximum fit 2560px
  if (width / dpr < 1366) {
    
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
    
    width = 2560 * dpr;
  }
  //  The original project was 1920px I set it to 24 Equal parts , such 1rem Namely 80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

solve Dva edition history Error reporting

find node_modules Medium dva package , modify lib/index.js.

22 That's ok ：

var _createHashHistory = _interopRequireDefault(
  require('history').createHashHistory
);

Modify the boot port

The project is running and compiling , If the port conflicts, prompt and agree New port open , There could be a jam , You need to modify the boot port . stay package.json Modify the command content in , For example, change the port to 9000：

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

Use Hook

If needed Hook Instead of Class Write code , Please uninstall the current react, Then install support Hook Of React（>=16.8）, The current project is Dva Scaffolding makes , Temporary does not support Hook.

---

front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~

---

* The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」！

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

---

* More confession source code

100 Paragraph confession source code demonstration address