等比缩放的页面（利用css3的scale属性）

其他 2019-05-09 10:41:01 阅读次数: 0

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 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,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAGDUlEQVRogbWaPWxcRRDHf/fO92Ffgk2MrXygBEJACCiQkCgQcoPSIAVXoYCKFBRIKegpQJHSBokehIgoiBBFrEiAQuEKgoQiPiIQEIRANnFI7ODYvvP5fBQ74zdvb/e9y9keafV27+3Hf2ZnZmf2XYlulx2kClAFVqS9V57LO7mIUmmb4H2wO90/l7YLfru0LWYGAd8A1oF2dM4wFS1UB8oFc3sLbV/yMbD9kF1cd6EDNPtbuBh8BUiAVmacP09+21+kqN0XDSL5UuQZ+w2y4LqRp18fwalPVIWGckBWvIE+yJJXz2PKAg3VtV0y9TbOBgYCnwSA+4ATD7zPSAj8pgFui+1XokDqrlOx2oQkbIEnpsQYUICb5rkZ+C2kUnWp9xixL/kKbqu0Ywh44pWy97SMPQ78A9w2ADsGfEf6bRqwm/KbqlHTMJAhX/INUleVB7xsypCpPwncBO6QlbyCfQyYkz6dQMnbhULw2Xdx4EOmPCiLLRtGtK8u3hVwG15pm7plwNqFZaAsfYC4wYY8iwVeMeUO7nBpSFsZ0HEKXMG3cafoOnAMuAEsBDBYVQqS9SiNAAMxqU8CR3G6OIzzyS8DM8B9wMPAi8DzwCjwEHAROCnrjMi4FeB+w7Rv+BYLGKn74Ne9jpYBX+qTOCkq8HEB+ouA7QA/AX8BYzJmBjgF7DEMNHH6XyVVw5DnslSX+YI6H5K4gq4CNbISfwd4Hxe7q4dQr6WeZEOE0wLWgNPA18Cn0j6M80i/Sz+1Aav/yFM1ZCXvkFJGfJVRJurA2x7IESMZH3wLJ+khATkNXJL3i2S9loJWDFbC69KHEt2uH1P7qlI2gI+JhEZw278fp7Mdaasuqxoo+LYAX5N17uK807LU7wKr8r5Ferpa9+mHEwzJQr6+W10Lucgq8BZwXvo0BHxjCg6/Ac895YyWFqx/AVffhW9uOAkjoNoilBeAT2TeI8BvZFXXlzy43W0mIomiAEwZmDcMPC3jEplseAqOnIOTChygBtUT8Ox5eIV0Z4bdKxrAa6QqM0q+sWYoyXvpTXKY7A58Rurra0DtLJyouV3poQMwftoxXMP1qeJs4XtS9bxJ2FVaPCDhS0Ka4cc6an0f2Z24gjlpp+DgWHwuAI7DE2ZMWcCfM4CXcoD3UEzyscGx8Lc0FgmeLHXDYfQlD/CeAgxK5YTwnUroSP6B1OI/Bm6Zdnepj7yzFI7nIeBJIhgypMYWIj/LOYQzqC7wAc7oEiSwmoW5ecdQlL6Ea/QGYl8FGOorN02QozaHAS0jwIQsOIPb1iGcx2kBrTPweSt1uxm6DnPvwVXpq4FZGzhLNqL8L4cB+1snoTfV8iWuWz0vE6vkTgHP4NSlCazNwp9vwoUf4Q+dYAmWL8KVl5yq6UG0Jq+Pk4bFe4ED5BxKhurgJGd1VWMTO1CP6n9xJ+EIqdSmgcuYUGAWrs/C3+SfsGsyZp+Zaz9O7fpRoQrQ1MCsTjb102KzJQ3KxmWBhpRDpL69n9hmlTREWJGiO9I0zKhd6M6rcLeoKDCzybKfCWnGdAv4ELiAixSbEfDrMt/rAvYMaSyjgP10sAewJfXzvpvzt82CXyQb3t4GvsPlp9pnSfotSn0Jl3FtAI8C35JKegJ4hGwYHFIZrW8lTbEcNi+L0gjzKE5aa0h4gDO6j6RcJk1SpoFXSb1My5QJYXKBXumHdmDrMsyCt7e/NrrUE9Hqv2ZTkzjjrJLGOf3msJM4r+TreCgJj0g4BR+L64tuDypeu5/bg3Gc3i9wb7cHUfC973qZiN3bPAAcBH41fWxsMopTj2uGiXu9t6mRvakOgq+TJguD3piN4/z2z4QNfzNQt8At6B5dzwOvurtqgPsMWFvY7bvKKPV7P18KPEPhbSwDsmBit8Qh16ifeoLfrIoOKT15bdhgSS9KLWD/6YP36yEp+7cFQSqSfOh6OQ9k6LcYsCLQhTToBzUfXFG7KNGw7dA3sAiI/sHXSCPE7ByD00CSUyq6PbDUQm6qAgD6yYDyjLNC70VvIW3nO2zRx+Rdp536fB/9bhShHWF8t/574P/bY1d26X/PtooMr/p/9AAAAABJRU5ErkJggg==",
    //       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();
    });
  };

猜你喜欢

转载自blog.csdn.net/qq_37899792/article/details/89638613
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022