基于echart大数据统计汇总看板数据可视化-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大数据可视化</title>
    <style type="text/css" media="all">
        body {
            line-height: 1.15;
            font-size: .5rem;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-position: 0 0/cover;
            background-color: #101129
        }

        * {
            margin: 0;
            padding: 0;
            font-weight: 400
        }

        ul {
            list-style: none
        }

        a {
            text-decoration: none
        }

        .viewport {
            min-width: 1024px;
            max-width: 1920px;
            min-height: 780px;
            margin: 0 auto;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5e1e804662972.png) no-repeat 0 0/contain;
            display: flex;
            padding: 3.667rem .833rem 0
        }

        .column {
            flex: 3;
            position: relative
        }

        .column:nth-child(2) {
            flex: 4;
            margin: 1.333rem .833rem 0
        }

        .panel {
            box-sizing: border-box;
            border: 2px solid red;
            border-image: url(http://repo.bfw.wiki/bfwrepo/image/5e1e7f943283f.png) 51 38 21 132;
            border-width: 2.125rem 1.583rem .875rem 5.5rem;
            position: relative;
            margin-bottom: .833rem
        }

        .panel .inner {
            position: absolute;
            top: -2.125rem;
            right: -1.583rem;
            bottom: -.875rem;
            left: -5.5rem;
            padding: 1rem 1.5rem
        }

        .panel h3 {
            font-size: .833rem;
            color: #fff
        }

        .overview {
            height: 4.583rem
        }

        .overview .inner {
            display: flex;
            justify-content: space-between
        }

        .overview h4 {
            font-size: 1.167rem;
            padding-left: .2rem;
            color: #fff;
            margin-bottom: .333rem
        }

        .overview span {
            font-size: .667rem;
            color: #4c9bfd
        }

        .monitor {
            height: 20rem
        }

        .monitor .inner {
            padding: 1rem 0;
            display: flex;
            flex-direction: column
        }

        .monitor .tabs {
            padding: 0 1.5rem;
            margin-bottom: .75rem
        }

        .monitor .tabs a {
            color: #1950c4;
            font-size: .75rem;
            padding: 0 1.125rem
        }

        .monitor .tabs a:first-child {
            border-right: .083rem solid #00f2f1;
            padding-left: 0
        }

        .monitor .tabs a.active {
            color: #fff
        }

        .monitor .content {
            flex: 1;
            display: none;
            position: relative
        }

        .monitor .head {
            background: rgba(255,255,255,.1);
            font-size: .583rem;
            padding: .5rem 1.5rem;
            color: #68d8fe;
            display: flex;
            justify-content: space-between;
            line-height: 1.05
        }

        .monitor .col:nth-child(1) {
            width: 3.2rem
        }

        .monitor .col:nth-child(2) {
            width: 8.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .monitor .col:nth-child(3) {
            width: 3.2rem
        }

        .monitor .marquee-view {
            position: absolute;
            top: 1.6rem;
            bottom: 0;
            width: 100%;
            overflow: hidden
        }

        .monitor .row {
            line-height: 1.05;
            padding: .5rem 1.5rem;
            color: #61a8ff;
            font-size: .5rem;
            position: relative;
            display: flex;
            justify-content: space-between
        }

        .monitor .row:hover {
            color: #68d8ff;
            background: rgba(255,255,255,.1)
        }

        .monitor .row:hover .icon-dot {
            opacity: 1
        }

        .monitor .icon-dot {
            position: absolute;
            left: .64rem;
            opacity: 0
        }

        .monitor .marquee-view {
            position: absolute;
            top: 1.6rem;
            bottom: 0;
            width: 100%;
            overflow: hidden
        }

        .monitor .row {
            line-height: 1.05;
            padding: .5rem 1.5rem;
            color: #61a8ff;
            font-size: .5rem;
            position: relative;
            display: flex;
            justify-content: space-between
        }

        .monitor .row:hover {
            color: #68d8ff;
            background: rgba(255,255,255,.1)
        }

        .monitor .row:hover .icon-dot {
            opacity: 1
        }

        .monitor .icon-dot {
            position: absolute;
            left: .64rem;
            opacity: 0
        }

@keyframes row {
            0% {}100% {
                transform: translateY(-50%)
            }}

        .monitor .marquee {
            animation: row 10s linear infinite
        }

        .monitor .marquee:hover {
            animation-play-state: paused
        }

        .point {
            height: 14.167rem
        }

        .point .chart {
            display: flex;
            margin-top: 1rem;
            justify-content: space-between
        }

        .point .pie {
            width: 13rem;
            height: 10rem;
            margin-left: -.4rem
        }

        .point .data {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 7rem;
            padding: 1.5rem 1.25rem;
            box-sizing: border-box;
            background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e1e7f7984519.png);
            background-size: cover
        }

        .point h4 {
            margin-bottom: .5rem;
            font-size: 1.167rem;
            color: #fff
        }

        .point span {
            display: block;
            color: #4c9bfd;
            font-size: .667rem
        }

        .map {
            height: 24.1rem;
            margin-bottom: .833rem;
            display: flex;
            flex-direction: column
        }

        .map h3 {
            line-height: 1;
            padding: .667rem 0;
            margin: 0;
            font-size: .833rem;
            color: #fff
        }

        .map .icon-cube {
            color: #68d8fe
        }

        .map .chart {
            flex: 1;
            background-color: rgba(255,255,255,.05)
        }

        .map .geo {
            width: 100%;
            height: 100%
        }

        .users {
            height: 14.167rem;
            display: flex
        }

        .users .chart {
            display: flex;
            margin-top: 1rem
        }

        .users .bar {
            width: 24.5rem;
            height: 10rem
        }

        .users .data {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 7rem;
            padding: 1.5rem 1.25rem;
            box-sizing: border-box;
            background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e1e7f7984519.png);
            background-size: cover
        }

        .users h4 {
            margin-bottom: .5rem;
            font-size: 1.167rem;
            color: #fff
        }

        .users span {
            display: block;
            color: #4c9bfd;
            font-size: .667rem
        }

        .order {
            height: 6.167rem
        }

        .order .filter {
            display: flex
        }

        .order .filter a {
            display: block;
            height: .75rem;
            line-height: 1;
            padding: 0 .75rem;
            color: #1950c4;
            font-size: .75rem;
            border-right: .083rem solid #00f2f1
        }

        .order .filter a:first-child {
            padding-left: 0
        }

        .order .filter a:last-child {
            border-right: none
        }

        .order .filter a.active {
            color: #fff;
            font-size: .833rem
        }

        .order .data {
            display: flex;
            margin-top: .833rem
        }

        .order .item {
            width: 50%
        }

        .order h4 {
            font-size: 1.167rem;
            color: #fff;
            margin-bottom: .417rem
        }

        .order span {
            display: block;
            color: #4c9bfd;
            font-size: .667rem
        }

        .sales {
            height: 10.333rem
        }

        .sales .caption {
            display: flex;
            line-height: 1
        }

        .sales h3 {
            height: .75rem;
            padding-right: .75rem;
            border-right: .083rem solid #00f2f1
        }

        .sales a {
            padding: .167rem;
            font-size: .667rem;
            margin: -.125rem 0 0 .875rem;
            border-radius: .125rem;
            color: #0bace6
        }

        .sales a.active {
            background-color: #4c9bfd;
            color: #fff
        }

        .sales .inner {
            display: flex;
            flex-direction: column
        }

        .sales .chart {
            flex: 1;
            padding-top: .6rem;
            position: relative
        }

        .sales .label {
            position: absolute;
            left: 1.75rem;
            top: .75rem;
            color: #4996f5;
            font-size: .583rem
        }

        .sales .line {
            width: 100%;
            height: 100%
        }

        .wrap {
            display: flex
        }

        .channel,.quarter {
            flex: 1;
            height: 9.667rem
        }

        .channel {
            margin-right: .833rem
        }

        .channel .data {
            overflow: hidden
        }

        .channel .item {
            margin-top: .85rem
        }

        .channel .item:first-child {
            float: left
        }

        .channel .item:last-child {
            float: right
        }

        .channel h4 {
            color: #fff;
            font-size: 1.333rem;
            margin-bottom: .2rem
        }

        .channel small {
            font-size: 50%
        }

        .channel span {
            display: block;
            color: #4c9bfd;
            font-size: .583rem
        }

        .quarter .inner {
            display: flex;
            flex-direction: column;
            margin: 0 -.25rem
        }

        .quar.........完整代码请登录后点击上方下载按钮下载查看
基于echart大数据统计汇总看板数据可视化

网友评论0

css实现立体方灯抽屉式开关伸缩效果代码

css实现色相饱和度调色板代码

gsap+svg实现液态玻璃可调参数的checkbox开关效果代码

css实现6种不同Corner边角形状代码

原生js编写一个自定义range slider HTMLElement组件代码

js+css布局实现未满18岁验证器代码

css实现 border-image图片背景渐变遮罩效果代码

svg+css+js实现车站汽车发车时间表卡片代码

div+css实现完整的手机在线音乐考试系统网站app的ui页面原型图代码

div+css实现弹性checkbox复选框代码
