老师，我的代码用flex布局，仍会出现下面几个问题：
1、浏览器窗口缩小，字体大小不随着改变
2、浏览器窗口缩小，元素位置布局变得杂乱，不随着浏览器缩小而自适应
3、整个body已经订好高度了，但是写好的代码，body底部还会有白边，已经用了定位，元素位置仍然会随着鼠标浮动。
4、图表位置采用背景图+图表时，背景图仍会随着浏览器窗口缩小而移动位置，图表不能随着背景图缩小而缩小，做不到自适应。
效果图及代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- xx -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
<!-- xx -->
<title>山东恒航新农村建设智慧平台</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1212832_uvcc28nvv4r.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body onload="showTime()">
<div class="dashboard">
<header>
<div class="d1">
<div class="div1">
<div class="div11">
<div id="nowTime" class="time"></div>
</div>
<div class="div12">
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="color:azure;solid 1px #ffffff"
width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
</div>
<div class="div2">
<div class="put">
<input type="button" style="width: 12%; height:100%; " value=" 数据概览" onclick="local1()" >
<input type="button" style="width: 12%; height:100%; " value=" 车辆监控" onclick="local2()" >
<input type="button" style="width: 12%; height:100%; " value=" 垃圾桶监控" style="font-size:1rem;" onclick="local3()" id="herf">
<input type="button" style="width: 12%; height:100%; " value=" 旱厕概况" onclick="local4()" >
<input type="button" style="width: 12%; height:100%; " value=" 燃气概况" onclick="local5()" >
<input type="button" style="width: 12%; height:100%; " value=" 查询统计" onclick="local6()" >
<input type="button" style="width: 12%; height:100%; " value=" 人 员" onclick="local()7" >
</div>
</div>
</div>
</header>
<section>
<div class="d2">
<div class="div3">
<div class="div31">
<div class="car_cc">
<div id="outcar" style="width:100%;height: 100%; "></div>
</div>
<div class="car_sh">
<div id="carrtypes" style="width:100%;height: 100%; "></div>
</div>
<div class="num_grids">
<div class="num_item">
<h5 class="tit">48<small class="unit">辆</small></h5>
<p class="name">车辆总数</p>
</div>
<div class="num_item">
<h5 class="tit">48<small class="unit">辆</small></h5>
<p class="name">车辆使用数</p>
</div>
<div class="num_item">
<h5 class="tit">200<small class="unit">km</small></h5>
<p class="name">行驶里程总数</p>
</div>
<div class="num_item">
<h5 class="tit">15<small class="unit">km</small></h5>
<p class="name">行驶里程平均数</p>
</div>
<div class="num_item">
<h5 class="tit" style="color: #ffdc64;">1200<small class="unit">S</small></h5>
<p class="name">行驶时长总数</p>
</div>
<div class="num_item">
<h5 class="tit">20<small class="unit">L</small></h5>
<p class="name">行驶平均油耗</p>
</div>
</div>
</div>
<div class="div32">
<div class="info-grid">
<li>
<div class="grid-item">
<p class="name">计划收集点</p>
<h5 class="num">1442<small class="unit">个</small></h5>
</div>
</li>
<li>
<div class="grid-item">
<p class="name">已收收集点</p>
<h5 class="num">881<small class="unit">个</small></h5>
</div>
</li>
<li>
<div class="grid-item">
<p class="name">未收收集点</p>
<h5 class="num">81<small class="unit">个</small></h5>
</div>
</li>
</div>
<div class="hcsj">
<div id="trashdata" style="width:100%; height:100%; "></div>
</div>
</div>
</div>
<div class="div4">
<div class="div41">
<div class="zykh">
<table>
<tr>
<td>片区名称</td>
<td>点信数量</td>
<td>已处理</td>
<td>未处理</td>
</tr>
<tr>
<td>唐山</td>
<td>3</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>果里</td>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>起凤</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>新城</td>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>田庄</td>
<td>3</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>荆家</td>
<td>2</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>邢家</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>索镇</td>
<td>3</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<div id="map" >
<div class="map-yuan">
<p>马桥镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan1">
<p>邢家镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan2">
<p>起凤镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan3">
<p>田庄镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan4">
<p>新城镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan5">
<p>唐山镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan6">
<p>索镇<span></span></p>
<div class="yuan"></div>
</div>
<div class="map-yuan7">
<p>果里镇<span></span></p>
<div class="yuan"></div>
</div>
</div>
<div class="right_item">
<ul>
<li><a href="http://39.107.46.124:8080/808gps/index.html?account=admin&password=yzhYIN880212y&clientLogin=2">车辆</a></li>
<li><a href="http://39.107.46.124:8080/808gps/zh-screen/zh-screen.html?userSession=<%=name%>">智慧云屏</a></li>
<li><a href="http://39.107.46.124:8080/808gps/SafeDashboardManagement/safeBigScreen.html?userSession=<%=name%>">安全云屏</a></li>
</ul>
</div>
</div>
<div class="div42">
<div id="latrine" style="width:40%; height:100%; "></div>
<div id="equipdata" style="width:40%; height:100%; "></div>
</div>
</div>
<div class="div5">
<ul>
<li>
<div class="rqtj">
<div id="gasdata" style="width: 100%; height: 100%;"></div>
</div></li>
<li><div class="rqmyd">
<div id="container" style="width: 100%; height: 100%;">
</div></li>
<li><div class="kj ">
<div id="checkdata" style="width:100%; height:100%; "></div>
</div></li>
<li><div class="commonbox" ">
<div class=" list-info three" >
<div class="item title">
<span class="grid">请假人员</span>
<span class="grid">出差人员</span>
<span class="grid">缺勤</span>
</div>
<div class="item data">
<span class="grid">张胜民</span>
<span class="grid">白雪</span>
<span class="grid">李雪</span>
</div>
<div class="item data">
<span class="grid">艾克里</span>
<span class="grid">李峰美</span>
<span class="grid">李雪</span>
</div>
<div class="item data">
<span class="grid">晋晓童</span>
<span class="grid"></span>
<span class="grid"></span>
</div>
<div class="item data">
<span class="grid">高月</span>
<span class="grid"></span>
<span class="grid"></span>
</div>
<div class="item data">
<span class="grid">李达康</span>
<span class="grid"></span>
<span class="grid"></span>
</div>
</div></li>
</ul>
</div>
</section>
</div>
</body>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function showTime() {
dt = new Date();
year = dt.getFullYear();
m = dt.getMonth() + 1;
month = m < 10 ? "0" + m : m;
date = dt.getDate();
day = dt.getDay() - 1;
dtime = year + "-" + month + "-" + date;
$("nowTime").innerHTML = dtime;
setInterval("showTime()", 1000);
}
</script>
<script type="text/javascript">
function local1(){
location.href = "index.html"
}
function local2(){
location.href = "http://39.107.46.124:8080/808gps/index.html?account=admin&password=yzhYIN880212y&clientLogin=2"
}
function local3(){
location.href = "map.aspx"
}
function local4(){
location.href = "hance.aspx"
}
function local5(){
location.href = "tianranqi.aspx"
}
function local6(){
location.href = "static.aspx"
}
function local7(){
location.href = "people.aspx"
}
</script>
<script src="./js/echarts-all.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
// outcar
var outcar = echarts.init(document.getElementById('outcar'));
var option2 = {
grid: {
// borderWidth: 0,
left: '2%',
right: '0',
bottom: '0',
top: '30%',
containLabel: true,
},
legend: {
orient: 'horizontal',
icon: "circle",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10, // 设置间距
x: 'right',
y: '5%',
left: '30%',
top: '5%',
textStyle: {
color: "#727e8a"
},
color: ["#885EA8", "#4090ED", "#93E692"],
data: ['行驶', '停车', '熄火', '离线']
},
calculable: true,
xAxis: {
type: 'value',
"show": false,
splitLine: {
show: false,
axisLine: {
show: false
}, //轴线不显示
axisTick: {
show: false
}, //
},
},
yAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#b8c9d7',
fontSize: 10,
}
},
axisLine: {
lineStyle: {
color: '#b8c9d7',
width: 1, //这里是为了突出显示加上的
}
},
"axisLine": { //y轴隐藏
"show": false
},
"axisTick": { //y轴刻度线隐藏
"show": false
},
data: ['洒水车', '压缩车', '护栏车', '皮卡车', '扫路车']
},
itemStyle: {
normal: {},
},
series: [{
name: '行驶',
type: 'bar',
stack: '总量',
//设置柱状图大小
barWidth: 10,
// barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
// barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
itemStyle: {
// emphasis:{
// barBorderRadius:5,
// }, 柱状图圆角设置
normal: {
// barBorderRadius:5,
color: '#0e51a2'
}
},
data: [220, 202, 201, 234, 290, 230, 220]
},
{
name: '停车',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: '#1cd2a1'
}
},
data: [100, 102, 101, 104, 90, 100, 110]
},
{
name: '熄火',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: '#81bfff'
}
},
data: [50, 12, 01, 54, 90, 30, 10]
},
{
name: '离线',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: '#3b4652'
}
},
data: [120, 82, 111, 134, 190, 130, 110]
},
]
};
outcar.setOption(option2);
// carrtypes
var carrtypes = echarts.init(document.getElementById('carrtypes'));
var option = {
legend: {
orient: 'vertical',
icon: "circle",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10, // 设置间距
x: 'left',
y: '10%',
left: '70%',
top: '0%',
textStyle: {
color: "#727e8a",
fontSize: 12,
},
color: ["#885EA8", "#4090ED", "#93E692"],
data: ['洒水车', '压缩车', '护栏车', '皮卡车']
},
calculable: false,
series: [{
// name:'车辆类型统计',
type: 'pie',
radius: '50%',
legendHoverLink: false,
itemStyle: {
borderWidth: 0,
normal: {
color: function(params) {
//自定义颜色
var colorList = [
'#fa5489', '#ffdc64', '#1cd2a1', '#684bff',
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'outside', //数值显示位置
formatter: '{b}{c}%' //显示数值
},
labelLine: {
show: true
},
},
},
center: ['35%', '40%'],
data: [{
value: 25,
name: '洒水车'
},
{
value: 25,
name: '压缩车'
},
{
value: 25,
name: '护栏车'
},
{
value: 25,
name: '皮卡车'
},
]
}]
};
carrtypes.setOption(option);
// trashdata
var trashdata = echarts.init(document.getElementById('trashdata'));
var option4 = {
tooltip: {
trigger: 'axis'
},
legend: {
borderWidth: 0,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10, // 设置间距
x: 'right',
y: '10%',
textStyle: {
color: '#727e8a',
},
data: ['维修', '报废', '新增']
},
grid: {
left: '5%',
top: '35%',
right: '8%',
bottom: '15%',
containLabel: true,
borderWidth: 0,
x: '10%',
y: '20%',
x2: '10%',
y2: '14%',
},
calculable: true,
xAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 10,
}
},
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
'16', '17', '18', '19', '20', '21', '22', '23', '24',
]
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#596879'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#596879'
}
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 10,
}
}
}],
series: [{
name: '维修',
type: 'line',
lineStyle: {
normal: {
color: "#ffdc64"
},
type: 'dotted',
},
data: [1, 3, 4, 3, 5, 7, 9, 3, 7, 6, 3, 0, 3, 5, 1, 3, 6, 2, 7, 4, 3, 9, 2, 6],
// markPoint: {
// data: []
// },
},
{
name: '报废',
type: 'line',
lineStyle: {
normal: {
color: "#f85488"
},
type: 'dashed',
color: '#f85488',
},
data: [0, 5, 2, 7, 5, 4, 8, 4, 3, 1, 3, 2, 3, 8, 4, 7, 4, 3, 3, 2, 8, 1, 4, 7],
// markPoint: {
// data: []
// },
},
{
name: '新增',
type: 'line',
lineStyle: {
normal: {
color: "#1ccb9c",
lineStyle: {
width: 2,
type: 'dotted' //'dotted'虚线 'solid'实线
}
},
type: 'dashed',
color: '#1ccb9c',
},
data: [2, 4, 1, 0, 1, 2, 0, 1, 3, 1, 5, 1, 0, 0, 2, 1, 1, 0, 0, 0, 1, 2, 5, 2],
// markPoint: {
// data: []
// },
}
]
};
trashdata.setOption(option4);
// checkdata
var checkdata = echarts.init(document.getElementById('checkdata'));
var m2R2Data = [{
value: 335,
legendname: '出勤',
name: "出勤 335",
itemStyle: {
color: "#fa5489",
}
},
{
value: 310,
legendname: '出差',
name: "出差 310",
itemStyle: {
color: "#8c405e"
}
},
{
value: 234,
legendname: '请假',
name: "请假 234",
itemStyle: {
color: "#684bff"
}
},
{
value: 154,
legendname: '缺勤',
name: "缺勤 154",
itemStyle: {
color: "#6e2851"
}
},
];
option7 = {
title: [{
textStyle: {
fontSize: 20,
color: "black"
},
left: "2%"
},
{
text: '80%',
subtext: '出勤率',
textStyle: {
fontSize: 15,
color: "#fff"
},
subtextStyle: {
fontSize: 10,
color: '#fff'
},
textAlign: "center",
x: '30%',
y: '30%',
}
],
series: [{
name: '标题',
type: 'pie',
roseType: 'area',
center: ['30%', '60%'],
radius: ['38%', '50%'],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'outter',
formatter: function(parms) {
return parms.data.legendname
}
}
},
labelLine: {
normal: {
length: 5,
length2: 3,
smooth: true,
}
},
data: m2R2Data
}]
};
checkdata.setOption(option7);
window.addEventListener('resize', function() {
checkdata.resize();
}, false);
// gasdata
var gasdata = echarts.init(document.getElementById('gasdata'));
var option6 = {
grid: {
borderWidth: 0,
left: '2%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true,
x: '15%',
y: '12%',
x2: '10%',
y2: '15%',
},
tooltip: { //鼠标悬浮弹窗提示
trigger: 'axis',
},
calculable: true,
xAxis: [{
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#596879'
}
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 12,
}
},
boundaryGap: [0, 0.01]
}],
yAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 12,
}
},
data: ['维修', '新增', '交费', '未交费']
}],
series: [{
type: 'bar',
barWidth: 10,
label: {
normal: {
show: true,
position: 'insideBottomRight',
formatter: '{c}个',
distance: 0,
offset: [10, 0],
color: '#fff',
fontSize: 9,
padding: [16, 15, 0, 15],
}
},
itemStyle: {
normal: {
barBorderRadius: 30,
color: function(params) {
var colorList = [
'#446ef4', '#fec500', '#28cd95', '#ad5cf6'
];
return colorList[params.dataIndex]
},
},
},
barCategoryGap: '50%',
data: [120, 165, 297, 84]
},
{
type: "bar",
barWidth: 12,
xAxisIndex: 0,
barGap: "-100%",
// data: [100, ,],
itemStyle: {
normal: {
color: "#444a58",
barBorderRadius: 14
}
},
zlevel: -1
}
]
};
gasdata.setOption(option6);
window.addEventListener("resize", function() {
console.log(2)
setTimeout(function() {
window.onresize = function() {
gasdata.resize();
}
}, 20)
})
//燃气服务满意度
var container = echarts.init(document.getElementById('container'));
var option8 = {
grid: {
left: '5%',
right: '5%',
bottom: '0%',
top: '40%',
containLabel: true,
borderWidth: 1,
x: '10%',
y: '25%',
x2: '25%',
y2: '25%',
},
calculable: true,
color: ["#6495ED", "#B0C4DE", "#4682B4"],
legend: {
icon: 'rect',
itemWidth: 12,
itemHeight: 10,
itemGap: 10,
data: ['今日服务数', '满意度', '服务跟进'],
right: '8%',
top: '15%',
textStyle: {
fontSize: 10,
color: '#596879'
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 8,
}
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']
}],
yAxis: [{
name: '单位（人）',
boundaryGap: false,
type: 'value',
min: 0, // 设置y轴刻度的最小值
max: 40, // 设置y轴刻度的最大值
splitNumber: 2, // 设置y轴刻度间隔个数
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 8,
}
},
axisLine: {
lineStyle: {
color: '#596879',
width: 1, //这里是为了突出显示加上的
}
},
}],
series: [{
name: '服务跟进',
type: 'line',
symbol: "none",
symbolSize: 1,
stack: '总量',
areaStyle: {
normal: {
color: '#6495ED',
opacity: 1
}
},
data: [5, 6, 6, 5, 6, 6, 5, 5, 6, 7, 7, 6, 5, 7, 6, 6]
},
{
name: '满意度',
type: 'line',
stack: '总量',
symbol: "none",
areaStyle: {
normal: {
color: '#B0C4DE',
opacity: 1
}
},
data: [5, 6, 6, 5, 6, 6, 5, 5, 6, 7, 7, 6, 5, 7, 6, 6]
},
{
name: '今日服务数',
type: 'line',
stack: '总量',
symbol: "none",
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {
normal: {
color: '#4682B4',
opacity: 1
}
},
data: [5, 6, 6, 5, 6, 6, 5, 5, 6, 7, 7, 6, 5, 7, 6, 6]
}
]
};
//燃气满意度新
var container = echarts.init(document.getElementById('container'));
var option13 = {
tooltip: { //提示框组件
trigger: 'axis',
formatter: '{b}<br/>{a0}: {c0}<br />{a1}: {c1}<br/>{a2}: {c2}',
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: {
left: '5%',
right: '5%',
bottom: '0%',
top: '30%',
containLabel: true,
borderWidth: 1,
x: '10%',
y: '25%',
x2: '10%',
y2: '25%',
},
calculable: true,
legend: { //图例组件，颜色和名字
right: '0%',
top: '15%',
bottom: '5%',
itemGap: 5,
itemWidth: 10,
itemHeight: 10,
data: [{
name: '健康度',
},
{
name: '可用度',
}, {
name: '服务跟进'
}
],
textStyle: {
color: '#596879',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
xAxis: [{
type: 'category',
// boundaryGap: true,//坐标轴两边留白
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
axisLabel: { //坐标轴刻度标签的相关设置。
// interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
// margin:15,
textStyle: {
color: '#596879',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
rotate: 50,
},
axisTick: { //坐标轴刻度相关设置。
show: false,
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#fff',
opacity: 0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}],
yAxis: [{
name: '单位（人）',
boundaryGap: false,
type: 'value',
splitNumber: 5,
axisLabel: {
textStyle: {
color: '#596879',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.06
}
}
}],
series: [{
name: '健康度',
type: 'line',
data: [10, 15, 30, 45, 55, 60, 62, 80, 80, 62, 60, 55, 45, 30, 15, 10],
barWidth: 3,
barGap: 1, //柱间距离
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5768EF'
}, {
offset: 1,
color: '#5768EF'
}]),
barBorderRadius: 50,
borderWidth: 0,
}
},
},
{
name: '可用度',
type: 'line',
data: [8, 5, 25, 30, 35, 55, 62, 78, 65, 55, 60, 45, 42, 15, 12, 5],
barWidth: 3,
barGap: 1, //柱间距离
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#69CBF2'
}, {
offset: 1,
color: '#69CBF2'
}]),
barBorderRadius: 50,
borderWidth: 0,
}
},
},
{
name: '服务跟进',
type: 'line',
data: [8, 5, 25, 30, 70, 55, 62, 30, 65, 80, 60, 45, 42, 15, 12, 5],
barWidth: 3,
barGap: 1, //柱间距离
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#20c997'
}, {
offset: 1,
color: '#20c997'
}]),
barBorderRadius: 50,
borderWidth: 0,
}
},
}
]
};
container.setOption(option13);
// latrine
var latrine = echarts.init(document.getElementById('latrine'));
var option5 = {
grid: {
top: '25%',
left: '4%',
right: '10',
bottom: '10%',
containLabel: true,
borderWidth: 0,
x: '10%',
y: '12%',
x2: '10%',
y2: '15%',
},
calculable: true,
xAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 10,
}
},
data: ['满意数量', '维修数量', '改造数量', '清运数量']
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#596879'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#596879'
}
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 8,
}
},
}],
series: [{
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#00bff3', '#ff4e18', '#11ee8e', '#895fa9'
];
return colorList[params.dataIndex]
},
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14,
},
position: 'top',
formatter: '{c}'
}
}
},
data: [3750, 2100, 2700, 1300],
// markPoint: {
// data: []
// },
// markLine: {
// data: []
// }
}]
};
// latrine.setOption(option5);
var xData = ['满意数量', '维修数量', '改造数量', '清运数量'];
var y1Data = [3750, 2100, 2700, 1300];
var y2Data = [28, 4.4, 5.9, 0.9, 0.7, 1.1, 2.1, 0.4, 1.9, 3.8, 1.6, 0.7, 5.7, 6.1];
var option14 = {
grid: {
top: '25%',
left: '4%',
right: '10',
bottom: '10%',
containLabel: true,
borderWidth: 0,
x: '10%',
y: '12%',
x2: '10%',
y2: '15%',
},
calculable: true,
title: {
show: false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// legend: {
// data:['监控数量', '监控密度'],
// right: '3%',
// top: '10%',
// itemWidth: 11,
// itemHeight: 11,
// textStyle: {
// color: '#ffffff',
// fontSize: 12
// }
// },
toolbox: {
show: false,
},
xAxis: [{
type: 'category',
boundaryGap: true,
show: true,
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: '#596879',
margin: 8,
interval: 0
// ,
// formatter:function(val){
// return val.split("").join("\n");
// }
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#596879', //左边线的颜色
width: '1' //坐标线的宽度
}
},
data: xData
}],
yAxis: [{
type: 'value',
scale: true,
name: '',
axisLine: {
show: false
},
splitNumber: 4,
axisTick: {
show: false
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: '#4e608b'
}
},
axisLabel: {
fontSize: 10,
color: '#596879',
margin: 12,
},
max: 12000,
min: 0,
boundaryGap: [0.2, 0.2]
},
// {
// type: 'value',
// scale: true,
// axisLine: {
// show: false
// },
// splitNumber : 3,
// axisTick: {
// show: false
// },
// axisLabel: {
// fontSize: 13,
// color: '#d0d0d0',
// margin: 12,
// },
// splitLine: {
// lineStyle: {
// // 使用深浅的间隔色
// color: '#4e608b'
// }
// },
// name: '',
// max: 30,
// min: 0,
// boundaryGap: [0.2, 0.2]
// },
],
series: [{
name: '监控数量',
type: 'bar',
label: {
normal: {
show: true,
lineHeight: 20,
width: 60,
height: 20,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-12', '-45'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
}, //文本
a: {
color: '#fff',
align: 'center',
fontSize: 9
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
},
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#1dacfe',
// fontSize:9
// }
// }
// },
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#66abc8" // 0% 处的颜色
}, {
offset: 1,
color: "#7ed0f6" // 100% 处的颜色
}], false),
barBorderRadius: [7, 7, 0, 0], // （顺时针左上，右上，右下，左下）
}
},
barWidth: '15%',
yAxisIndex: 0,
data: y1Data
}]
};
latrine.setOption(option14);
window.addEventListener('resize', function() {
latrine.resize();
}, false);
// equipdata
var equipdata = echarts.init(document.getElementById('equipdata'));
var option12 = {
tooltip: {
trigger: 'axis'
},
legend: {
// icon: 'roundRect', //icon为圆角矩形
borderWidth: 0,
icon: 'rect',
itemWidth: 12,
itemHeight: 10,
itemGap: 10,
data: ['今日服务数', '满意度', '服务跟进'],
right: '3%',
top: '10%',
textStyle: {
fontSize: 12,
color: '#596879'
}
},
grid: {
left: '5%',
right: '5%',
bottom: '8%',
top: '25%',
containLabel: true,
borderWidth: 0,
x: '12%',
y: '12%',
x2: '10%',
y2: '12%',
},
calculable: true,
color: ["#007bff", "#20c997", "#dc3545"],
xAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
rotate: 30,
interval: 0,
textStyle: {
color: '#596879',
fontSize: 12,
}
},
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']
}],
yAxis: [{
name: '单位（人）',
type: 'value',
axisLine: {
lineStyle: {
color: '#596879',
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
}
},
splitLine: {
show: true,
lineStyle: {
color: '#596879',
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: '#596879',
fontSize: 10,
}
}
}],
series: [{
name: '今日服务数',
type: 'line',
symbolSize: 5, //拐点圆的大小
symbol: 'circle',
smooth: true, //关键点，为true是不支持虚线的，实线就用true
itemStyle: {
normal: {
//color:'red',
borderColor: '#ffc107', //拐点边框颜色
}
},
lineStyle: {
normal: {
color: "#007bff",
width: 3,
},
type: 'dotted',
},
data: [5, 6, 6, 5, 6, 6, 5, 5, 6, 7, 7, 6, 5, 7, 6, 6],
// markPoint: {
// data: []
// },
},
{
name: '满意度',
type: 'line',
symbolSize: 3, //拐点圆的大小
smooth: true, //关键点，为true是不支持虚线的，实线就用true
symbol: 'circle',
itemStyle: {
normal: {
//color:'red',
borderColor: '#ffc107', //拐点边框颜色
}
},
lineStyle: {
normal: {
color: "#20c997",
width: 3,
},
type: 'dashed',
color: '#20c997',
},
data: [5, 6, 6, 2, 6, 1, 5, 5, 6, 9, 7, 6, 5, 7, 0, 6],
// markPoint: {
// data: []
// },
},
{
name: '服务跟进',
type: 'line',
symbolSize: 3, //拐点圆的大小
smooth: true, //关键点，为true是不支持虚线的，实线就用true
symbol: 'circle',
itemStyle: {
normal: {
//color:'red',
borderColor: '#ffc107', //拐点边框颜色
}
},
lineStyle: {
normal: {
color: "#dc3545",
lineStyle: {
width: 3,
type: 'solid' //'dotted'虚线 'solid'实线
}
},
type: 'dashed',
color: '#dc3545',
},
data: [5, 6, 2, 5, 6, 3, 5, 5, 6, 7, 9, 6, 5, 7, 1, 6],
// markPoint: {
// data: []
// },
}
]
};
equipdata.setOption(option12);
</script>
</html>@charset "utf-8";
*{margin:0;padding: 0;
/* font-size:0; */}
html,body {
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
/* font-size: 64.5%; */
}
body{
min-width: 1208px;
}
.dashboard{
width: 100%;
height: 100%;
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;
background-size: 100%; */
}
header{
width: 100%;
height:15%;
margin-right: auto;
margin-left: auto;
/* background-color: aqua; */
}
.d1{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.div1{
width: 50%;
height: 100%;
display: flex;
position: relative;
/* background-color: antiquewhite; */
}
.div11{
width: 25%;
height: 30%;
margin-left: 8%;
margin-top: 10%;
/* min-width: 500px; */
/* background-color: green; */
}
#nowTime{
font-size: 1.5rem;
/* margin-left: 4%; */
text-align:center;
/* padding-top: 7%;*/
/* margin-top: 9%; */
color:#ffffff;
}
.div12{
width: 20%;
height: 12%;
margin-left: 2%;
margin-top: 10%;
/* flex:0 1 auto;
min-width: 500px; */
/* background-color: burlywood; */
text-align:center;
color:#ffffff;
}
.div2{
width: 50%;
height: 100%;
/* margin-top: 1.5%;
margin-left: 6%; */
/* flex-grow:1; */
/* min-width: 500px; */
/* background-color: aliceblue; */
}
.put{
width: 100%;
height: 30%;
margin-top: 3%;
margin-left: 6%;
display: flex;
/* background-color: aqua; */
}
input{
transform: skewX(-15deg);
display: flex;
border-radius: 10px;
margin-left: 5px;
background-color:#4682b4;
border: #4682B4 solid 2px;
font-size: 1.5rem;
text-align: center;
color: #ffffff;
/* align-content: flex-end; */
}
#herf{
background: linear-gradient(blue 5%, green 100%);
}
section{
width: 100%;
height: 85%;
margin-right: auto;
margin-left: auto;
/* background-color: #008000; */
}
.d2{
width: 100%;
height: 100%;
display: flex;
/* background-color: red; */
}
.div3{
width: 25%;
height: 100%;
/* flex-direction: ; */
/* background-color: #DEB887; */
}
.div31{
width: 100%;
height: 80%;
background-image: url(../img/04.png);
background-repeat: no-repeat;
background-size: 350%;
display: flex;
background-position: 0% 0%;
margin-top: -23%;
/* background-color: #00FFFF; */
}
.car_cc{
position: absolute;
display: flex;
/* background-color: red; */
width: 15%;
height: 20%;
margin-left: 5%;
margin-top: 8.5%;
}
.car_sh{
position: absolute;
display: flex;
/* background-color: green; */
width: 16%;
height: 10%;
margin-left: 5%;
margin-top: 18%;
}
.num_grids{
width: 60%;
height:140px;
position: relative;
/* background-color: #FA5489; */
display: flex;
justify-content: space-between;
margin-top: 90%;
margin-left: 22%;
flex-wrap: wrap;
}
.num_grids .num_item {
flex: 0 0 50%;
text-align: center;
/* border-bottom: 1px solid #485462; */
display: flex;
justify-content: space-between;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.1rem 0px 0.1rem;
}
.num_grids .num_item .tit {
color: #fa5489;
font-size: 15px;
font-weight: 100;
margin: 0;
padding-left: 12px;
}
.num_grids .num_item .tit .unit {
color: #727e8a;
padding-left: 20px;
}
.num_grids .num_item .name {
font-size: .3rem;
color: #f2f5fc;
}
.num_grids .num_item:nth-child(3) .tit {
color: #fa5489;
}
.num_grids .num_item:nth-child(4) .tit {
color: #2adba7;
}
.num_g
老师我这个程序的按钮后面多了一个框
京公网安备 11011402011233号