❤️ Series articles ❤️
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
In recent years, the emergence of data visualization big screen has set off a wave after wave. Many business owners want to build their own "cool hanging and exploding sky" domineering president big screen cockpit. Today, I share with you the world population statistics - Data visualization big screen solution].
Don't say much, start sharing dry goods, welcome to discuss! QQ wechat same No.: 6550523
❤️ Effect display ❤️
1. First look at the dynamic rendering
2. Fragment screenshot 
I Determine the demand scheme
1. Determine the screen LED resolution for product online deployment
1920px*1080px, F11 full screen without scroll bar; Support 100% filling of the same scale screen. The proportion will be calculated automatically, the filling will be centered, and the insufficient part will be left blank.
2. Function module
-
Total population (100 million)
-
2021 Chinese born population
-
Education level
-
Aging population analysis
-
Proportion of labor output
-
Average annual population transformation rate
-
Population sub-health distribution
3. Deployment mode
- Based on installation free executable program: support various mainstream operating systems such as Windows, Linux and Mac; No other environmental dependence is required;
- Viewing mode: it can not only directly view the program interface on the server, but also open and play remotely using the browser. It supports mainstream browsers such as Chrome browser and 360 browser.
2, Overall architecture design
Echarts chart
Direct entry Modify the file under components / to the charts you want. You can check the cases on the official website of ecars.
Render chart
ECharts charts are src/components/datav/index.vue The dynamic rendering chart case created by the encapsulation component is components Various chart components under the directory have monitored data and screen changes, and can dynamically render chart data and size. In the module with small and large monitoring window, anti shake function is used to control the update frequency and save browser performance.
Border style
The border is a component of DataV. You only need to go to the views directory to find the corresponding location to find and replace it.
3, Coding implementation (based on length and readability, some key codes are shown here)
<template>
<div class="left-chart-1">
<div class="lc1-header">[2021 Chinese born population]</div>
<div class="lc1-details">Total births<span>1000W</span></div>
<dv-capsule-chart class="lc1-chart" :config="config" />
<dv-decoration-2 style="height:10px;" />
</div>
</template>
<script>
export default {
name: 'LeftChart1',
data () {
return {
config: {
data: [
{
name: 'boy',
value: 2000
},
{
name: 'girl',
value: 3000
},
{
name: 'twin boys ',
value: 1500
},
{
name: 'Twin girl',
value: 1500
},
{
name: 'Twin boys and girls',
value: 2000
}
],
colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
unit: 'number'
}
}
}
}
</script>
<style lang="less">
.left-chart-1 {
width: 100%;
height: 30%;
display: flex;
flex-grow: 0;
flex-direction: column;
.lc1-header {
font-weight: bold;
height: 20px;
line-height: 20px;
font-size: 20px;
text-indent: 20px;
color: #096dd9;
}
.lc1-details {
height: 50px;
font-size: 16px;
display: flex;
align-items: center;
text-indent: 20px;
span {
color: #08e5ff;
font-weight: bold;
font-size: 35px;
margin-left: 20px;
}
}
.lc1-chart {
flex: 1;
}
}
</style>
<template>
<div class="left-chart-2">
<div class="lc2-header">[Education level]</div>
<div class="lc2-details">Total number of general higher education<span>245W</span></div>
<dv-charts class="lc2-chart" :option="option" />
<dv-decoration-2 style="height:10px;" />
</div>
</template>
<script>
export default {
name: 'LeftChart2',
data () {
return {
option: {
series: [
{
type: 'pie',
data: [
{ name: 'Primary school culture', value: 93 },
{ name: 'Junior high school culture', value: 32 },
{ name: 'High school culture', value: 65 },
{ name: 'University Culture', value: 44 },
{ name: 'Graduate culture', value: 44 },
{ name: 'other', value: 52 }
],
colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
radius: ['45%', '65%'],
insideLabel: {
show: false
},
outsideLabel: {
labelLineEndLength: 10,
formatter: '{percent}%\n{name}',
style: {
fontSize: 14,
fill: '#fff'
}
}
}
]
}
}
}
}
</script>
<style lang="less">
.left-chart-2 {
width: 100%;
height: 37%;
display: flex;
flex-direction: column;
.lc2-header {
font-weight: bold;
height: 20px;
line-height: 20px;
font-size: 20px;
text-indent: 20px;
margin-top: 30px;
color: #096dd9;
}
.lc2-details {
height: 40px;
font-size: 16px;
display: flex;
align-items: center;
text-indent: 20px;
span {
color: #08e5ff;
font-weight: bold;
font-size: 35px;
margin-left: 20px;
}
}
.lc2-chart {
height: calc(~"100% - 80px");
}
}
</style>
4, Online operation
Start project
It needs to be installed in advance nodejs And Yarn, download the project and run it in the project home directory yarn Pull dependent packages. After installing the dependent package, use vue-cli Or directly use the command npm run serve to start the project. After starting the project, you need to manually full screen (press F11).
5, Source download
This sharing is over, welcome to discuss! Thanks for Vue big screen and datav!