current position:Home>Sharing of actual combat projects of 150 sets of Vue + echarts large screen visual data platform (with source code)
Sharing of actual combat projects of 150 sets of Vue + echarts large screen visual data platform (with source code)
2021-08-22 22:58:05 【@. code out the future】
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 :
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
- Added Echart The function of component reuse , Such as : The two percentage charts of the target rate of intermediate tasks use the same component .
- Fixed the asymmetry of the pattern bar on the right side of the head .
- Fix screen adaptation issues , Changed all the dimensions , Unified use rem.
- Use Mixins Inject diagram responsive code .
- vue-awesome It's introduced on demand .
- Encapsulating render functions , Pulling away the data makes the logic clearer .
- 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 .
- Vue Official documents
- DataV Official documents
- echarts example ,echarts API file
- styled-components Official documents
- 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
copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225803193V.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich