⼤屏数据展⽰组件库dataV
最近有做⼤屏数据的需求，先⾃⼰试试这个组件库的效果了，如图。
⽂档链接在此
简单试了⼀下效果，可以搭配echart⼀起使⽤效果更佳。
使⽤npm安装echart5.0以下版本，我⽤的4.9.0；或者script引⼊更⾼版本
安装：
npm install @jiaminghi/data-view
main.js
// 将⾃动注册所有组件为全局组件
import dataV from'@jiaminghi/data-view'
Vue.use(dataV)
// 按需引⼊
import{ borderBox1 }from'@jiaminghi/data-view'
Vue.use(borderBox1)
注意⼀下index页⾯的布局就⾏，没太多难度。
附带⼀段我的代码
<style lang="less">
#data-view{
width: 100%;
height: 100%;
background-color: #030409;
color: #fff;
#dv-full-screen-container{
background-image:url("../../assets/bg.png"); background-size: 100% 100%;
box-shadow: 0 0 3px blue;
display: flex;
flex-direction: column;
.main-container{
/
/  height:calc(~"100% - 80px");
.border-box-content{
padding: 20px;
box-sizing: border-box;
display: flex;
}
.left-chart-container{
width: 22%;
padding: 10px;
box-sizing: border-box;
.border-box-content{
flex-direction: column;
}
}
.center-chart-container{
width: 56%;
padding: 10px;
box-sizing: border-box;
.border-box-content{
flex-direction: column;
height: auto;
}
}
.right-chart-container{
width: 22%;
padding: 10px;
box-sizing: border-box;
.border-box-content{
flex-direction: column;
}
}
}
}
}
</style>
<template>
<div id="data-view">
<dv-full-screen-container>
<dv-border-box-1 class="main-container">
<dv-border-box-3 class="left-chart-container">
<Left-Chart-1 />
</dv-border-box-3>
<dv-border-box-8 class="center-chart-container">
<CenterHeader />
<dv-decoration-10 />
<Center-1 />
<dv-decoration-10 />
<Center-Map />
<dv-decoration-10 />
<Center-Rank />
</dv-border-box-8>
<div class="right-chart-container">
<Right-Chart-1 />
<Right-Chart-2 />
<Right-Chart-3 />
</div>
</dv-border-box-1>
</dv-full-screen-container>
</div>
</template>
<script>
import LeftChart1 from"./leftChart1.vue";
import CenterHeader from"./centerHeader.vue";
import Center1 from"./center1.vue";
import CenterMap from"./centerMap.vue";
import CenterRank from'./centerRank.vue';
import RightChart1 from"./rightChart1.vue";
import RightChart2 from"./rightChart2.vue";
import RightChart3 from"./rightChart3.vue";
export default{
data(){
return{
config:{
data:[
{
name:"周⼝",
value:55,
},
{
box sizingname:"南阳",
value:120,
},
{
name:"西峡",
value:78,
},
{
name:"驻马店",
value:66,
},
{
name:"新乡",
value:80,
},
{
name:"信阳",
value:45,
},
{
{
name:"漯河",            value:29,
},
],
},
};
},
components:{
LeftChart1,
CenterHeader,
Center1,
CenterMap,
CenterRank,
RightChart1,
RightChart2,
RightChart3,
},
created(){}, mounted(){},
methods:{},
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。