1.配置 <1> 找到App.vue 文件 设置 width：1920px height:1080px,
@import './assets/css/reset_css.css';
#app{
width: 1920px;
height: 1080px;
box-sizing: border-box;
font-family:MicrosoftYaHei;
color:rgba(132,255,242,1);
font-size: 14px;
}
</style>
<2>在根目录找到index.html 设置缩放
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0;" name="viewport">
<link rel="shortcut icon" href="static/favicon.ico">
<title>监控指挥中心</title>
<style>
html {
overflow: hidden;
}
html,
body {
background: #020C30;
}
body {
width: 1920px !important;
height: 1080px !important;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
(function setPageScale(window, document) {
function setBodyScale() {
if (window.innerWidth / window.innerHeight > 1.77) {
var zoom = (window.innerHeight / 1080).toFixed(3)
} else {
var zoom = (window.innerWidth / 1920).toFixed(3)
}
if (document.body) {
document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
} else {
document.addEventListener('DOMContentLoaded', setBodyScale)
}
}
setBodyScale();
// reset scale unit on page resize窗口改变时候重新设置缩放
window.addEventListener('resize', setBodyScale)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setBodyScale()
}
})
}(window, document))
</script>
</html>
<3> 三列布局样式
<div class="index">
<v-header :isChild="child"></v-header>
<div class="container">
<v-left></v-left>
<v-center></v-center>
<v-right></v-right>
</div>
</div>
</template>
<script>
import header from "@/common/Header";
import left from "@/common/Left";
import center from "@/common/Center";
import right from "@/common/Right";
export default {
name: 'index',
data () {
return {
child:1,
}
},
components:{
"v-header":header,
"v-left":left,
"v-center":center,
"v-right":right
},
}
</script>
<style lang="less">
.index{
width: 100%;
background: url(../assets/img/bigBg@2x.png) no-repeat center;
background-size:100% 100%;
height: 100%;
.container{
display: flex;
}
}
</style>
中间center组件设置 width,height, margin:0 auto ,
3.页面上复杂案例查找文档 www.makeapie.com/explore.htm…
今日份 学到了
drawListHeaSer(){
let myChart = this.$echarts.init(document.getElementById('register'));
var option;
var dataArr = [{
value: 91,
name: '自助挂号'
}];
var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#00F9F5' // 0% 处的颜色
},
{
offset: 0.17,
color: '#00F9F5' // 100% 处的颜色
},
{
offset: 0.9,
color: '#00F9F5' // 100% 处的颜色
},
{
offset: 1,
color: '#00F9F5' // 100% 处的颜色
}
]);
var colorSet = [
[0.91, color],
[1, '#15337C']
];
var rich = {
white: {
fontSize: 30,
color: '#fff',
fontWeight: '500',
padding: [-150, 0, 0, 0]
},
bule: {
fontSize: 30,
fontFamily: 'DINBold',
color: '#00F9F5',
// fontWeight: '700',
padding: [-120, 0, 0, 0],
},
radius: {
width: 350,
height: 80,
// lineHeight:80,
borderWidth: 1,
borderColor: '#0092F2',
fontSize: 50,
color: '#fff',
backgroundColor: '#1B215B',
borderRadius: 20,
textAlign: 'center',
},
size: {
height: 400,
padding: [100, 0, 0, 0]
}
}
option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
type: 'gauge',
name: '外层辅助',
radius: '100%',
startAngle: '210',
endAngle: '-30',
splitNumber: '100',
pointer: {
show: false
},
detail: {
show: false,
},
data: [{
value: 1
}],
// data: [{value: 1, name: 90}],
title: {
show: true,
offsetCenter: [0, 30],
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, '#00FFFF']
],
width: 2,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#051932',
width: 0,
type: 'solid',
},
},
axisLabel: {
show: false
}
},
{
type: 'gauge',
radius: '90%',
startAngle: '210',
endAngle: '-30',
pointer: {
show: false
},
detail: {
formatter: function(value) {
return value;
},
rich: rich,
"offsetCenter": ['0%', "0%"],
fontSize: 37,
color:'#00F9F5',
},
data: dataArr,
title: {
show: true,
offsetCenter: ["0", "70%"],
color: "#FFFFFF",
fontSize: 14
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: 10,
// shadowBlur: 15,
// shadowColor: '#B0C4DE',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 25,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid',
},
},
axisLabel: {
show: false
},
},
{
name: '灰色内圈', //刻度背景
type: 'gauge',
z: 2,
radius: '75%',
startAngle: '210',
endAngle: '-30',
center: ["50%", "50%"], //整体的位置设置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#00F9F5']
],
width: 2,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
// data: [{
// show: false,
// value: '80'
// }], //作用不清楚
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
{
name: "白色圈刻度",
type: "gauge",
radius: "75%",
startAngle: 210, //刻度起始
endAngle: -30, //刻度结束
z: 4,
axisTick: {
show: false
},
splitLine: {
length: 6, //刻度节点线长度
lineStyle: {
width: 2,
color: 'rgba(1,244,255, 0.9)'
} //刻度节点线
},
axisLabel: {
color: 'rgba(255,255,255,0)',
fontSize: 12,
}, //刻度节点文字颜色
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
option && myChart.setOption(option);
},
