1、基本骨架
2、填充内容
3、G2图
4、大屏数据展示组件库DataV 官网
5、优秀的大屏展示效果 lisi 123
1、基本骨架
<template>
<div id="parentDiv">
<myHeader></myHeader>
<div id="container" class="flex-a-center-j-between">
<div class="left">
<div class="leftTop"></div>
<div class="leftCenter"></div>
<div class="leftRight"></div>
</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
</div>
</template>
.flex-a-center-j-between {
display: flex;
justify-content: space-between;
align-items: center;
}
#parentDiv {
width: 100vw;
height: 100vh;
#container {
width: 100vw;
height: calc(100% - 80px);
.left,
.right {
width: 300px;
height: 100%;
border: 2px solid red;
}
.center {
flex: 1;
height: 100%;
border: 2px solid #000;
}
}
}
2、填充内容
<template>
<div id="parentDiv">
<myHeader></myHeader>
<div id="container" class="flex-a-center-j-between">
<div class="left">
<dv-border-box-7 class="sideTop" :color="['#111112', 'green']">
<div class="textCenter">echarts图1</div>
<chartLeftTop />
</dv-border-box-7>
<dv-border-box-7 class="sideCenter" :color="['#111112', 'green']">
<div class="textCenter">echarts图2</div>
<chartLeftCenter />
</dv-border-box-7>
<dv-border-box-7 class="sideRight" :color="['#111112', 'green']">
<div class="textCenter">echarts图3</div>
<chartLeftBottom />
</dv-border-box-7>
</div>
<dv-border-box-7 class="center" :color="['#111112', 'green']">
<div class="moneyDiv">
<money />
</div>
<div class="table">
<myTable />
</div>
</dv-border-box-7>
<div class="right">
<dv-border-box-7 class="sideTop" :color="['#111112', 'green']">
<div class="textCenter">echarts图4</div>
<chartRightTop />
</dv-border-box-7>
<dv-border-box-7 class="sideCenter" :color="['#111112', 'green']">
<div class="textCenter">echarts图5</div>
<chartRightCenter />
</dv-border-box-7>
<dv-border-box-7 class="sideRight" :color="['#111112', 'green']">
<div class="textCenter">echarts图6</div>
<chartRightBottom />
</dv-border-box-7>
</div>
</div>
</div>
</template>
<script>
```css
.flex-a-center-j-between {
display: flex;
justify-content: space-between;
align-items: center;
}
#parentDiv {
width: 100vw;
height: 100vh;
overflow: hidden;
#container {
width: 100vw;
height: calc(100% - 3.125vw);
padding: 10px;
background: #050505;
.left,
.right {
width: 350px;
height: 100%;
// border: 2px solid red;
}
.center {
flex: 1;
height: 100%;
margin: 0px 10px;
}
.sideTop,
.sideCenter,
.sideRight {
height: 32%;
width: 100%;
// border: 2px solid #000;
margin-bottom: 5px;
padding: 5px;
background: #111112;
}
}
}
.textCenter {
text-align: center;
color: #fff;
}
.moneyDiv {
height: 40%;
// border: 2px solid red;
color: #fff;
}
.table {
height: calc(60% - 10px);
margin-top: 20px;
// border: 1px solid red;
}
3、G2 图
<div id="chartRightTop"></div>
import DataSet from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {
name: "chartRightTop",
props: ["num"],
data() {
return {
renderTime: 0,
loading: true,
chartData: [
{ item: "事例一", count: 40, percent: 0.4 },
{ item: "事例二", count: 21, percent: 0.21 },
{ item: "事例三", count: 17, percent: 0.17 }
]
};
},
mounted() {
this.$nextTick(() => {
this.initChar(); //饼图
});
},
methods: {
//图表
initChar() {
const chart = new Chart({
container: "chartRightTop",
autoFit: true,
height: 500
});
var data = this.chartData;
chart.data(data);
chart.scale("percent", {
formatter: val => {
val = val * 100 + "%";
return val;
}
});
chart.coordinate("theta", {
radius: 0.75,
innerRadius: 0.6
});
chart.tooltip({
showTitle: false,
showMarkers: false,
itemTpl:
'<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
// 辅助文本
chart
.annotation()
.text({
position: ["50%", "50%"],
content: "主机",
style: {
fontSize: 14,
fill: "#8c8c8c",
textAlign: "center"
},
offsetY: -20
})
.text({
position: ["50%", "50%"],
content: "200",
style: {
fontSize: 20,
fill: "#8c8c8c",
textAlign: "center"
},
offsetX: -10,
offsetY: 20
})
.text({
position: ["50%", "50%"],
content: "台",
style: {
fontSize: 14,
fill: "#8c8c8c",
textAlign: "center"
},
offsetY: 20,
offsetX: 20
});
chart
.interval()
.adjust("stack")
.position("percent")
.color("item")
.label("percent", percent => {
return {
content: data => {
return `${data.item}: ${percent * 100}%`;
}
};
})
.tooltip("item*percent", (item, percent) => {
percent = percent * 100 + "%";
return {
name: item,
value: percent
};
});
chart.interaction("element-active");
chart.render();
}
}
};
#chartRightTop {
width: 100%;
height: 90%;
}
4、大屏数据展示组件库DataV
(1)、入门
1、安装:
npm install @jiaminghi/data-view
2、使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
3、按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
(2)、使用
1、全屏容器
<dv-full-screen-container>content</dv-full-screen-container>
建议在全屏容器内使用百分比搭配flex进行布局
2、Loading加载
<dv-loading>Loading...</dv-loading>
数据尚未加载完成时,可以显示Loading效果,增强用户体验。
3、边框
color="['red', 'green']" backgroundColor="blue" 背景色
<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >
dv-border-box-1
</dv-border-box-1>
4、5、8 : reverse="true"
<dv-border-box-4 :reverse="true">dv-border-box-4</dv-border-box-4> 反的
8 : dur='12' 时间 默认3
11: title="dv-border-box-11" 标题 :titleWidth="370" 标题长度
4、装饰
<dv-decoration-1 :color="['red', 'green']" />
color 自定义颜色
style="width:200px;height:5px;"
dur 单次动画时长(秒)
:reverse="true" 反转
5、图表
<dv-charts :option="option" />
只写了一个大的骨架,样式不是很标准,有需要写大屏的伙伴可以再简单的调整一下样式。