HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 编码设置 -->
<meta charset="utf-8">
<!-- 告诉IE使用最新的引擎渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 使移动应用程序占据整个浏览器屏幕并禁用用户缩放-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 页面描述:大屏仓库 -->
<meta name="description" content="big screen store">
<!-- 作者 -->
<meta name="author" content="lbh">
<title>大屏仓库</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/liMarquee/css/liMarquee.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/app.css">
<style>
.dowebok {
width: 100%;
height:223px;
font-size: 14px;
overflow: hidden;
}
.dowebok ul {
margin: 0;
height: 100%;
overflow: hidden;
}
.dowebok a {
color: #fff;
text-decoration: none;
line-height: 30px;
}
</style>
<!-- HTML5----IE低版本支持HTML5标签方法，css 浏览器网页兼容性 -->
<!--[if lt IE9]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
</html>
<body>
<!--
<div class="bg1 wow fadeInUp"></div>
<li class="item item1 wow bounceInLeft"></li>
<li class="item item2 wow bounceInLeft"></li>
<li class="item item3 wow bounceInLeft"></li>
<li class="item item4 wow bounceInLeft"></li>
<li class="item item5 wow bounceInRight"></li>
<li class="item item6 wow bounceInRight"></li>
<li class="item item7 wow bounceInRight"></li>
<li class="item item8 wow bounceInRight"></li>
<li class="item item2 wow fadeInUpBig" data-wow-delay="0.3s"></li>
<li class="item item3 wow fadeInUpBig" data-wow-delay="0.6s"></li>
<li class="item item4 wow fadeInUpBig" data-wow-delay="0.9s"></li>
<li class="item item5 wow fadeInUpBig" data-wow-delay="1.2s"></li>
-->
<div id="hompage">
<div id="maincontainer">
<div id="body" class="pagePadding">
<div class="header flex jc-between">
<div class="header-logo"></div>
<div class="header-title"></div>
<div class="header-time">
<div id="clock"></div>
</div>
</div>
<div class="section">
<div class="maincontent m1 flex jc-between">
<!-- 可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，
data-wow-iteration="2"(动画执行次数) 和 data-wow-offset="10" （距离可视区域多少开始执行动画）-->
<div class="left wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0s">
<div class="jbox ">
<div class="jbox-title clearfix special-title" style="padding-top:0;">
<div class="h5 pull-left">
<div class="site-item" style="width:75px;height:20px;border:none;">
<div class="site-item-front">
<span style="color:#00ACED">微博热点</span>
</div>
<div class="site-item-back">
<span style="color:#00ACED">微信热点</span>
</div>
</div>
</div>
</div>
<div class="jbox-content">
<div id="siteItem-list">
<div class="site-item">
<div class="site-item-front">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
以快乐之名，与你相遇，↵我的青春有你，你的快乐有我，↵20岁，谢谢亲爱的你，↵陪我从过去到现在和未来↵前路可期，一直在一起！↵#快乐大本营二十周年#↵@何炅
@谢娜 @李维嘉 @吴昕 @杜海涛
</div>
<div class="site-item-foot ">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
<div class="site-item-back">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
昂萨莉说 ，随着女性社会地位的提高 ，举办<font class="media-keyWord"> “一带一路 ”</font>
女性论坛意义非凡 。
</div>
<div class="site-item-foot clearfix">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
</div>
<div class="site-item">
<div class="site-item-front">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
以快乐之名，与你相遇，↵我的青春有你，你的快乐有我，↵20岁，谢谢亲爱的你，↵陪我从过去到现在和未来↵前路可期，一直在一起！↵#快乐大本营二十周年#↵@何炅
@谢娜 @李维嘉 @吴昕 @杜海涛
</div>
<div class="site-item-foot ">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
<div class="site-item-back">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
昂萨莉说 ，随着女性社会地位的提高 ，举办<font class="media-keyWord"> “一带一路 ”</font>
女性论坛意义非凡 。
</div>
<div class="site-item-foot clearfix">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
</div>
<div class="site-item">
<div class="site-item-front">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
以快乐之名，与你相遇，↵我的青春有你，你的快乐有我，↵20岁，谢谢亲爱的你，↵陪我从过去到现在和未来↵前路可期，一直在一起！↵#快乐大本营二十周年#↵@何炅
@谢娜 @李维嘉 @吴昕 @杜海涛
</div>
<div class="site-item-foot ">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
<div class="site-item-back">
<a class="link_list" title="欧亚经济论坛“一带一路”女性论坛举行" href="javascript:;">
<div class="site-item-body">
昂萨莉说 ，随着女性社会地位的提高 ，举办<font class="media-keyWord"> “一带一路 ”</font>
女性论坛意义非凡 。
</div>
<div class="site-item-foot clearfix">
<div class="site-item-foot-a pull-left">陕西传媒网</div>
<div class="site-item-foot-b pull-right">2017-09-23 07:10:00
</div>
</div>
</a>
</div>
</div>
<!--siteItem-list end -->
</div>
</div>
</div>
</div>
<div class="center wow fadeInUp">
<div class="jbox">
<div class="jbox-title clearfix" style="padding-top:0;">
<div class="h5 pull-left twinkling">
<!-- <i class="fa fa-stop"></i> --> 实时数据
</div>
</div>
<div class="jbox-content">
<!-- <div class="new_list5a new_list_top" style="clear: both;">
<ul id="realTime-visitList" class="list-unstyled custom-content-box1"></ul>
<input type="text" hidden class="hide_id5a" value="-1">
</div> -->
<ul id="realTime-visitList" class="list-unstyled custom-content-box1"
style="height:200px">
</ul>
</div>
</div>
</div>
<div class="right wow fadeInRight" data-wow-duration="1s" data-wow-delay="0s">
<div class="ibox">
<div class="ibox-title ibox-title-special"></div>
<div class="ibox-content">
<div id="echart-pie" style="width:100%;height:100%"></div>
</div>
</div>
</div>
</div>
<div class="maincontent m2 flex jc-between">
<div class="left">
<div class="ibox">
<div class="ibox-title">
</div>
<div class="ibox-content">
<div id="echart-line" style="width: 100%;height: 100%"></div>
</div>
</div>
</div>
<div class="center">
<div class="ibox">
<div class="ibox-title">
</div>
<div class="ibox-content">
<div id="echart-twoline" style="width: 100%;height: 100%"></div>
</div>
</div>
</div>
<div class="right">
<div class="ibox">
<div class="ibox-title">
</div>
<div class="ibox-content">
<div id="echart-writebar" style="width: 100%;height: 100%"></div>
</div>
</div>
</div>
</div>
<div class="maincontent m3 flex jc-between">
<div class="left">
<div class="ibox">
<div class="ibox-title">
</div>
<div class="ibox-content">
<div id="echart-getbar" style="width: 100%;height: 100%"></div>
</div>
</div>
</div>
<div class="center">
<div class="ibox">
<div class="ibox-title">
文字滚动
</div>
<div class="ibox-content">
<div class="dowebok">
<ul>
<li>
<a href="http://www.dowebok.com/187.html">Smoothslides –
可平移的jQuery幻灯片插件</a>
</li>
<li>
<a href="http://www.dowebok.com/77.html">jQuery全屏滚动插件fullPage.js</a>
</li>
<li>
<a href="http://www.dowebok.com/131.html">WOW.js – 让页面滚动更有趣</a>
</li>
<li>
<a href="http://www.dowebok.com/139.html">让IE7 IE8支持CSS3
background-size属性</a>
</li>
<li>
<a href="http://www.dowebok.com/117.html">shCircleLoader – jQuery
Loading效果插件</a>
</li>
<li>
<a href="http://www.dowebok.com/185.html">jQuery cForm –
jQuery表单美化插件</a>
</li>
<li>
<a href="http://www.dowebok.com/177.html">Quttons – Quantum
Paper风格按钮</a>
</li>
<li>
<a href="http://www.dowebok.com/173.html">Ideal Image Slider –
简单的纯JS幻灯片</a>
</li>
<li>
<a href="http://www.dowebok.com/156.html">evenZoom – jQuery放大镜插件</a>
</li>
<li>
<a href="http://www.dowebok.com/155.html">DAD – jQuery拖拽/拖放插件</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/echarts.js"></script>
<script src="assets/js/clock.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/liMarquee/js/jquery.liMarquee.js"></script>
<script src="assets/scroll/init.js"></script>
<script src="assets/scroll/news.js"></script>
<script src="assets/scroll/move.js"></script>
<script src="assets/scroll/startup.js"></script>
<script src="assets/js/main.js"></script>
<script>
$('.dowebok').liMarquee({
direction: 'up',
runshort: false,
scrolldelay:1
});
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
var wow = new WOW({
boxClass: 'wow',//需要执行动画的元素的 class
animateClass: 'animated',//animation.css 动画的 class
offset: 0,//距离可视区域多少开始执行动画
mobile: true,//是否在移动设备上执行动画
live: true//异步加载的内容是否有效
});
wow.init();
};
</script>
</body>
CSS
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
margin: 0px;
padding: 0px;
border: none;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
@font-face {/*苹方字体*/
font-family: 'pingfang';
src: url('../fonts/pingfang.ttf');
font-weight: normal;
font-style: normal;
}
@font-face { /*电子字体*/
font-family:'electronicFont';
src: url("../fonts/DS-DIGIT.TTF");
}
#hompage {
font-family: 'pingfang', 'Avenir', Helvetica, Arial, 'Microsoft YaHei', 'PingFang SC';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background:rgba(8,12,39,.9);
}
#maincontainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: normal;
position: relative;
width: 100%;
height: 100%;
overflow: hidden !important;
box-sizing: border-box;
color: #fff;
/* color: #DBE1FF; */
font-size: 16px;
}
#body {
height: 1080px;
width: 1920px;
box-sizing: border-box;
margin: 0 auto;
padding: 10px;
position: relative;
display: flex;
flex-direction: column;
/* transition-duration: .1s; */
transition: all .1s cubic-bezier(.4, 0, .2, 1);
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 0;
}
.flex-inline {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex
}
.row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.column {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.column,
.column-reverse {
-webkit-box-orient: vertical
}
.column-reverse {
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse
}
.jc-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.jc-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.jc-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.jc-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.jc-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.ai-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.ai-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.ai-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
.ai-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch
}
.ac-center {
-ms-flex-line-pack: center;
align-content: center
}
.ac-end {
-ms-flex-line-pack: end;
align-content: flex-end
}
.ac-between {
-ms-flex-line-pack: justify;
align-content: space-between
}
.ac-around {
-ms-flex-line-pack: distribute;
align-content: space-around
}
.ac-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch
}
.equal,
.flex-1 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
}
.flex-2 {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
min-width: 0;
}
.flex-3 {
-webkit-box-flex: 3;
-ms-flex: 3;
flex: 3;
min-width: 0;
}
.flex-4 {
-webkit-box-flex: 4;
-ms-flex: 4;
flex: 4;
min-width: 0;
}
.flex-5 {
-webkit-box-flex: 5;
-ms-flex: 5;
flex: 5;
min-width: 0;
}
.equal-auto {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0
}
.equal-no {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
JS(方法pageScale())
$(function () {
window.addEventListener("resize", function (e) {
pageScale();
}, false);
setTimeout(pageScale, 0)
pageScale();
$("#clock").MyDigitClock({//时钟
fontSize: 26,
fontFamily: "electronicFont",
fontColor: "#00ACED",
fontWeight: "bold",
bAmPm: false,
background: 'transparent',
bShowHeartBeat: true
});
setTimeout(rotateInorder, 1000);
setInterval(rotateInorder, 6900);
drawPie("echart-pie");
drawLine("echart-line");
drawTwoLine();
getbar();
writebar() ;
})
/*
function suited() {
//页面缩放
let levelheight = 1080;
let levelwidth = 1920;
let ele = document.querySelector("#box");
let width = document.body.clientWidth;
let height = document.body.clientHeight;
let rate = Math.min(height / levelheight, width / levelwidth);
ele.style.transformOrigin = "center center 0px";
ele.style.transform = "scale(" + rate + ")";
let bosscon = document.querySelector("#Home");
bosscon.style.alignItems = "center";
bosscon.style.justifyContent = "center";
ele.style.transformOrigin = "center center 0px";
},
function showClock() {
this.currentTimeDay = this.moment().format("YYYY-MM-DD");
this.currentTimeTime = this.moment().format("HH:mm:ss");
let clockTimer = setInterval(() => {
this.currentTimeTime = this.moment().format("HH:mm:ss");
}, 1000);
},
*/
function pageScale() {/*页面缩放*/
let levelheight = 1080;
let levelwidth = 1920;
let ele = document.querySelector('#body');
let width = document.body.clientWidth;
let height = document.body.clientHeight;
let rate = Math.min(height / levelheight, width / levelwidth);
ele.style.transformOrigin = 'center top 0px';
ele.style.transform = 'scale(' + rate + ')';
let bosscon = document.querySelector('#maincontainer');
if (height / levelheight <= width / levelwidth) {
bosscon.style.alignItems = 'normal';
bosscon.style.justifyContent = 'center';
ele.style.transformOrigin = 'center top 0px';
} else {
bosscon.style.alignItems = 'center';
bosscon.style.justifyContent = 'normal';
ele.style.transformOrigin = 'left center 0px';
}
}
function rotateInorder() {/*翻转*/
$(".special-title").find(".site-item").toggleClass("flip")
$("#siteItem-list").find(".site-item").each(function (i) {
(function (index, $item) {
setTimeout(function () {
$item.toggleClass("flip");
if (index == 0) {
}
}, (index + 1) * 300);
})(i, $(this));
});
}
function drawPie(domId) {
var myChart = echarts.init(document.getElementById(domId));
var data = [
{ value: 1, name: "无证违章", color0: "#FF687D", color1: "#FC0C59" },
{ value: 1, name: "作业违章", color0: "#FCDE54", color1: "#F7BA2A" },
// { value: 3, name: "其他", color0: "#df5cb4", color1: "#e07c76" },
{
value: 1,
name: "吊索断裂",
color0: "rgba(13,138,212,1)",
color1: "rgba(60,181,251,1)"
},
{ value: 1, name: "臂架折断", color0: "yellow", color1: "yellowgreen" },
{ value: 1, name: "高处坠落", color0: "#15E09B", color1: "#1DBD6B" }
];
// 计算总数
var total = data.map(v => v.value).reduce((o, n) => o + n);
// 计算每一个data的其实角度和末了角度 θ1和θ2
data.reduce((o, v) => {
v.theta1 = o;
v.theta2 = o + v.value / total;
return v.theta2;
}, 0);
// 添加渐变
data.forEach((v, i) => {
var ops = calc(v.theta1 * 2 * Math.PI, v.theta2 * 2 * Math.PI);
if (v.value)
v.itemStyle = {
color: {
type: "radial",
x: ops.center[0],
y: ops.center[1],
r: ops.radius,
colorStops: [
{
offset: 0,
color: v.color0
},
{
offset: 0.5,
color: v.color0
},
{
offset: 0.3,
color: v.color1
},
{
offset: 1,
color: v.color1
}
]
// globalCoord: false // 缺省为 false
}
};
v.label = {
normal: {
show: true,
formatter: "{b}\n\n{d}%",
textStyle: {
fontSize: 12,
color: v.color1
},
position: "outside"
},
emphasis: {
show: true
}
};
});
// 计算渐变中心以及渐变半径
function calc(theta1, theta2) {
var r = 0.5; // 半径是0.5 其实表示0.5个直径
var inner = 0.6; // 里面镂空部分占60% option中radius为[33%, 55%] 55 * 0.6 == 33
var cos = Math.cos;
var sin = Math.sin;
var PI = Math.PI;
var min = Math.min;
var max = Math.max;
var bottom = 0;
var left = 2 * r;
var right = 0;
// y0: θ1对应的外部点的y值
// y1: θ2对应的外部点的y值
// _y0: θ1对应的内部点的y值
// _y1: θ2对应的内部点的y值
// x0: θ1对应的外部点的x值
// x1: θ2对应的外部点的x值
// _x0: θ1对应的内部点的x值
// _x1: θ2对应的内部点的x值
var y0 = r * (1 - cos(theta1));
var y1 = r * (1 - cos(theta2));
var _y0 = r * (1 - inner * cos(theta1));
var _y1 = r * (1 - inner * cos(theta2));
// 如果这个弧经过θ == PI的点 则bottom = 2PI
// bottom用于之后的max计算中
if (theta1 < PI && theta2 > PI) {
bottom = 2 * r;
}
// 计算这几个点的最大最小值
var ymin = min(_y0, _y1, y0, y1);
var ymax = max(_y0, _y1, y0, y1, bottom);
var x0 = r * (1 + sin(theta1));
var x1 = r * (1 + sin(theta2));
var _x0 = r * (1 + inner * sin(theta1));
var _x1 = r * (1 + inner * sin(theta2));
// 如果这个弧经过θ == PI / 2的点 则right = 2PI
if (theta1 < PI / 2 && theta2 > PI / 2) {
right = 2 * r;
}
// 如果这个弧经过θ == PI / 2 * 3的点 则left = 0
if (theta1 < (PI / 2) * 3 && theta2 > (PI / 2) * 3) {
left = 0;
}
var xmin = min(_x0, _x1, x0, x1, left);
var xmax = max(_x0, _x1, x1, x0, right);
return {
// 计算圆心以及半径
center: [(r - xmin) / (xmax - xmin), (r - ymin) / (ymax - ymin)],
radius: r / min(xmax - xmin, ymax - ymin)
};
}
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {d}%"
},
// legend: {
// orient: "vertical",
// x: "75%",
// y: "25%",
// itemWidth: 14,
// itemHeight: 14,
// align: "left",
// data: [
// "混凝土露筋",
// "混凝土胀模",
// "其他",
// "其他（模板工程）",
// "卷材缺陷",
// "混凝土夹渣"
// ],
// textStyle: {
// color: "#fff"
// }
// },
series: [
{
name: "隐患类型",
type: "pie",
radius: ["45%", "70%"],
center: ["50%", "55%"],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(255, 255, 255,1)"
}
}
// animation: false
}
]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
}
function drawLine() {
var myChart = echarts.init(document.getElementById("echart-line"));
// var option = {
// // backgroundColor: "#05224d",
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// grid: {
// top: "8%",
// left: "5%",
// right: "5%",
// bottom: "1%",
// containLabel: true
// },
// xAxis: [
// {
// type: "category",
// boundaryGap: false,
// axisLine: {
// //设置x轴的线
// show: true
// // lineStyle: {
// // color: "#DBE1FF"
// // }
// },
// axisLabel: {
// //设置x轴的字
// textStyle: {
// color: "#DBE1FF",
// margin: 15
// }
// },
// axisTick: { show: false },
// data: ["施工一区", "施工二区", "施工三区", "施工四区"]
// }
// ],
// yAxis: [
// {
// type: "value",
// min: 0,
// max: 5,
// splitNumber: 1,
// splitLine: {
// show: false,
// lineStyle: {
// color: "#DBE1FF"
// }
// },
// axisLine: {
// //设置y轴的线
// show: true
// // lineStyle:{
// // color:'#DBE1FF',
// // width:1,//这里是为了突出显示加上的
// // }
// },
// axisLabel: {
// //设置y轴的字
// margin: 20,
// textStyle: {
// color: "#DBE1FF"
// }
// },
// axisTick: { show: false }
// }
// ],
// series: [
// {
// name: "设备隐患数",
// type: "line",
// smooth: true,
// itemStyle: { normal: { areaStyle: { type: "default" } } },
// lineStyle: {
// normal: {
// color: "rgba(255,255,255,0)" // 线条颜色
// }
// },
// symbol: "circle",
// symbolSize: 8,
// itemStyle: {
// normal: {
// color: "#00d4c7",
// lineStyle: {
// color: "#00d4c7",
// width: 1
// },
// areaStyle: {
// //color: '#94C9EC'
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: "rgba(74,208,181,1)"
// },
// {
// offset: 1,
// color: "rgba(84,97,187,1)"
// }
// ])
// }
// }
// },
// symbol:
// "image://data:image/png;base64,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",
// symbolSize: 42,
// areaStyle: {
// //区域填充样式
// normal: {
// //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(
// 0,
// 0.7,
// 0,
// 1,
// [
// { offset: 0, color: "rgba(84,97,187,1)" },
// { offset: 0.7, color: "rgba(74,208,181,1)" }
// ],
// false
// ),
// shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// data: [0, 2, 0, 44]
// }
// ]
// };
var option = option = {
// backgroundColor: '#424956',
title: {
text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 14,
color:"#DBE1FF"
},
left: '6%'
},
tooltip: {
trigger: 'axis',
// axisPointer: {
// lineStyle: {
// color: '#57617B'
// }
// }
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
right: '4%',
textStyle: {
fontSize: 14,
color:"#DBE1FF"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
// axisLine: {
// lineStyle: {
// color: '#57617B'
// }
// },
axisLine: {
//设置x轴的线
show: true,
lineStyle: {
color: "#DBE1FF"
}
},
axisLabel: {
//设置x轴的字
textStyle: {
fontSize: 14,
color:"#DBE1FF"
}
},
// {
// type: "category",
// boundaryGap: false,
// axisLine: {
// //设置x轴的线
// show: true
// // lineStyle: {
// // color: "#DBE1FF"
// // }
// },
// axisLabel: {
// //设置x轴的字
// textStyle: {
// color: "#DBE1FF",
// margin: 15
// }
// },
// axisTick: { show: false },
// data: ["施工一区", "施工二区", "施工三区", "施工四区"]
// }
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#DBE1FF'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color:"#DBE1FF"
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '移动',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(16,97,204, 0.3)'
}, {
offset: 0.8,
color: 'rgba(17,235,210, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(16,97,204,1)'
}, {
offset: 1,
color: 'rgba(17,235,210,1)'
}])
},
emphasis: {
color: 'rgb(0,196,132)',
borderColor: 'rgba(0,196,132,0.2)',
extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
borderWidth: 10
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125 ]
}, {
name: '电信',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(205,52,42, 0.5)'
}, {
offset: 0.8,
color: 'rgba(235,235,21, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(205,52,42,1)'
}, {
offset: 1,
color: 'rgba(235,235,21,1)'
}])
},
emphasis: {
color: 'rgb(99,250,235)',
borderColor: 'rgba(99,250,235,0.2)',
extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
borderWidth: 10
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220]
} ]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
};
function drawTwoLine() {
var myChart = echarts.init(
document.getElementById("echart-twoline")
);
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B"
}
}
},
legend: {
icon: "rect",
//align:'right',
itemWidth: 14,
itemHeight: 10,
itemGap: 13,
data: ["计划产值", "完成产值"],
right: "4%",
textStyle: {
fontSize: 12,
color: "#F1F1F3"
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
//设置x轴的线
show: true,
lineStyle: {
//color: "#DBE1FF"
}
},
axisLabel: {
//设置x轴的字
textStyle: {
color: "#DBE1FF",
margin: 15
}
},
data: [
"1月",
"2月",
"3月",
"4月"
]
}
],
yAxis: [
{
type: "value",
name: "单位：万元",
axisTick: {
show: false
},
axisLine: {
//设置y轴的线
show: false,
lineStyle: {
color: "#DBE1FF"
}
},
axisLabel: {
//设置y轴的字
textStyle: {
color: "#DBE1FF",
//fontSize: 14,
margin: 0
}
},
splitLine: {
show: false,
lineStyle: {
color: "#57617B"
}
}
}
],
series: [
{
name: "计划产值",
type: "line",
//smooth: true,
symbol: "circle",
symbolSize: 8,
lineStyle: {
normal: {
width: 0.5
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(252, 12, 89, 0.64)"
},
{
offset: 0.8,
color: "rgba(252, 12, 89, 0)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: "rgba(252, 12, 89, 1)"
}
},
// itemStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(252, 12, 89, 0.64)'
// }, {
// offset: 1,
// color: 'rgba(252, 12, 89, 0)'
// }])
// },
// emphasis: {
// color: 'rgb(99,250,235)',
// borderColor: 'rgba(99,250,235,0.2)',
// extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
// borderWidth: 99
// }
// },
data: [
1080.20,
875.38,
875.38,
1143.60
]
},
{
name: "完成产值",
type: "line",
//smooth: true,
symbol: "circle",
symbolSize: 8,
lineStyle: {
normal: {
width: 0.5
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(116, 206, 214,.64)"
},
{
offset: 0.8,
color: "rgba(116, 206, 214,0)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: "rgba(76, 240, 254, 1)"
}
},
// itemStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(116, 206, 214,.64)'
// }, {
// offset: 1,
// color: 'rgba(116, 206, 214,0)'
// }])
// },
// emphasis: {
// color: 'rgb(99,250,235)',
// borderColor: 'rgba(99,250,235,0.2)',
// extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
// borderWidth: 10
// }
//},
data: [
1293,
670,
883.10,
888.66
]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
};
function getbar() {
var myChart = echarts.init(
document.getElementById("echart-getbar")
);
var option = {
backgroundColor: '#23243a',
tooltip: { //提示框组件
trigger: 'axis',
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: {
left: '1%',
right: '4%',
bottom: '6%',
top:30,
padding:'0 0 10 0',
containLabel: true,
},
legend: {//图例组件，颜色和名字
right:10,
top:0,
itemGap: 16,
itemWidth: 18,
itemHeight: 10,
data:[{
name:'流入',
//icon:'image://../wwwroot/js/url2.png', //路径
},
{
name:'流出',
}],
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
margin:15,
textStyle: {
color: '#078ceb',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#fff',
opacity:0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [
{
type: 'value',
splitNumber: 5,
axisLabel: {
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['#fff'],
opacity:0.06
}
}
}
],
series : [
{
name:'流入',
type:'bar',
data:[4.9, 7.3, 9.2, 5.6, 7.7, 5.6, 4.2, 3.6, 6, 6.4],
barWidth: 10,
barGap:0,//柱间距离
label: {//图形上的文本标签
normal: {
show: true,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: 'rgba(127, 128, 225, 0.7)'
},{
offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
},{
offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
},{
offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
}, {
offset: 0, color: 'rgba(104, 253, 255, 0.7)'
}], false),
},
},
},
{
name:'流出',
type:'bar',
data:[2.9, 5, 4.4, 2.7, 5.7, 4.6, 1.2, 2.7, 4.8, 6.0],
barWidth: 10,
barGap:0.2,//柱间距离
label: {//图形上的文本标签
normal: {
show: true,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: 'rgba(127, 128, 225, 0.7)'
},{
offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
},{
offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
}, {
offset: 0, color: 'rgba(253, 200, 106, 0.7)'
}], false),
},
},
}
]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
};
function writebar() {
var myChart = echarts.init(
document.getElementById("echart-writebar")
);
var option = {
// backgroundColor: '#011c3a',
xAxis: {
data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '刑事犯罪\n前科、劣迹人员', '肇事肇祸\n精神病人', '重点上访\n人员'],
axisLine: {
lineStyle: {
color: '#0177d4'
}
},
axisLabel: {
color: '#fff',
fontSize: 14
}
},
yAxis: {
name: "（人）",
nameTextStyle: {
color: '#fff',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#0177d4'
}
},
axisLabel: {
color: '#fff',
fontSize: 16
},
splitLine: {
show:false,
lineStyle: {
color: '#0177d4'
}
},
interval:500,
max:5000
},
series: [{
type: 'bar',
barWidth: 18,
itemStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00b0ff'
}, {
offset: 0.8,
color: '#7052f4'
}], false)
}
},
data: [254, 3254, 1654, 2454, 4757, 2011, 1211]
}]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
};
