bootstrap+highcharts+apexcharts实现自适应仪表盘组合效果代码
代码语言：html
所属分类：图表
代码描述：bootstrap+highcharts+apexcharts实现自适应仪表盘组合效果代码，内置了很多仪表盘图表效果，简洁大气。
代码标签： bootstrap highcharts apexcharts 自适应 仪表盘 组合
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,400i,500,600,700,800&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input[type="submit"] {
-webkit-appearance: none;
}
*, *:after, *:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: 'Muli', sans-serif;
font-weight: 400;
width: 100%;
min-height: 100%;
color: #333333;
width: 100%;
height: 100%;
background: #ecf0f4;
}
a {
outline: none;
text-decoration: none;
color: #555;
}
a:hover, a:focus {
outline: none;
text-decoration: none;
}
img {
border: 0;
}
input, textarea, select {
outline: none;
resize: none;
font-family: 'Muli', sans-serif;
}
a, input, button {
outline: none !important;
}
button::-moz-focus-inner {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: 700;
color: #202342;
font-family: 'Muli', sans-serif;
}
img {
border: 0;
vertical-align: top;
max-width: 100%;
height: auto;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0 0 15px 0;
padding: 0;
}
.container-fluid{
max-width: 1900px;
}
/* Common Class */
.pd-5{padding: 5px;}
.pd-10{padding: 10px;}
.pd-20{padding: 20px;}
.pd-30{padding: 30px;}
.pb-10{padding-bottom: 10px;}
.pb-20{padding-bottom: 20px;}
.pb-30{padding-bottom: 30px;}
.pt-10{padding-top: 10px;}
.pt-20{padding-top: 20px;}
.pt-30{padding-top: 30px;}
.pr-10{padding-right: 10px;}
.pr-20{padding-right: 20px;}
.pr-30{padding-right: 30px;}
.pl-10{padding-left: 10px;}
.pl-20{padding-left: 20px;}
.pl-30{padding-left: 30px;}
.px-30{padding-left: 30px; padding-right: 30px;}
.px-20{padding-left: 20px; padding-right: 20px;}
.py-30{padding-top: 30px; padding-bottom: 30px;}
.py-20{padding-top: 20px; padding-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-50{margin-bottom: 50px;}
.font-30{font-size: 30px; line-height: 1.46em;}
.font-24{font-size: 24px; line-height: 1.5em;}
.font-20{font-size: 20px; line-height: 1.5em;}
.font-18{font-size: 18px; line-height: 1.6em;}
.font-16{font-size: 16px; line-height: 1.75em;}
.font-14{font-size: 14px; line-height: 1.85em;}
.font-12{font-size: 12px; line-height: 2em;}
.weight-300{font-weight: 300;}
.weight-400{font-weight: 400;}
.weight-500{font-weight: 500;}
.weight-600{font-weight: 600;}
.weight-700{font-weight: 700;}
.weight-800{font-weight: 800;}
.text-blue{color: #1b00ff;}
.text-dark{color: #000000;}
.text-white{color: #ffffff;}
.height-100-p{height: 100%;}
.bg-white{background: #ffffff;}
.border-radius-10{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.border-radius-100{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.box-shadow{
-webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
-moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
}
.gradient-style1{
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
}
.gradient-style2{
background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);
}
.gradient-style3{
background-image: radial-gradient( circle 732px at 96.2% 89.9%, rgba(70,66,159,1) 0%, rgba(187,43,107,1) 92% );
}
.gradient-style4{
background-image: linear-gradient( 135deg, #FF9D6C 10%, #BB4E75 100%);
}
/* widget style 1 */
.widget-style1{
padding: 20px 10px;
}
.widget-style1 .circle-icon{
width: 60px;
}
.widget-style1 .circle-icon .icon{
width: 60px;
height: 60px;
background: #ecf0f4;
display: flex;
align-items: center;
justify-content: center;
}
.widget-style1 .widget-data{
width: calc(100% - 150px);
padding: 0 15px;
}
.widget-style1 .progress-data{
width: 90px;
}
.widget-style1 .progress-data .apexcharts-canvas{
margin: 0 auto;
}
.widget-style2 .widget-data{
padding: 20px;
}
.widget-style3{
padding: 30px 20px;
}
.widget-style3 .widget-data{
width: calc(100% - 60px);
}
.widget-style3 .widget-icon{
width: 60px;
font-size: 45px;
line-height: 1;
}
.apexcharts-legend-marker{
margin-right: 6px !important;
}
</style>
</head>
<body >
<div class="container-fluid pt-5 mt-5 pb-5">
<!-- Widget Style 1 Start -->
<div class="row">
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i class="fa fa-user" aria-hidden="true"></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18">2020</div>
<div class="weight-500">Contact</div>
</div>
<div class="progress-data">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white widget-style1 border-radius-10 height-100-p box-shadow">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i class="fa fa-handshake-o" aria-hidden="true"></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18">400</div>
<div class="weight-500">Deals</div>
</div>
<div class="progress-data">
<div id="chart2"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18">350</div>
<div class="weight-500">Campaign</div>
</div>
<div class="progress-data">
<div id="chart3"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i class="fa fa-dollar" aria-hidden="true"></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18">$6060</div>
<div class="weight-500">Worth</div>
</div>
<div class="progress-data">
<div id="chart4"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Widget Style 1 End -->
<div class="row">
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style2">
<div class="widget-data">
<div class="weight-800 font-24">11,020</div>
<div class="weight-500 font-18">Online Signups</div>
</div>
<div class="progress-data">
<div id="chart5"></div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style2">
<div class="widget-data">
<div class="weight-800 font-24">5,000</div>
<div class="weight-500 font-18">New Visitors Today</div>
</div>
<div class="progress-data">
<div id="chart6"></div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style2">
<div class="widget-data">
<div class="weight-800 font-24">9,000</div>
<div class="weight-500 font-18">Weekly Total Order</div>
</div>
<div class="progress-data pl-20 pr-20">
<div id="chart7"></div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style2">
<div class="widget-data">
<div class="weight-800 font-24">$60,600</div>
<div class="weight-500 font-18">Total Revenue This Year</div>
</div>
<div class="progress-data">
<div id="chart8"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p pd-20">
<h2 class="font-weight-700 font-24 mb-20">Activity</h2>
<div id="chart9"></div>
</div>
</div>
<div class="col-xl-4 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p pd-20">
<h2 class="font-weight-700 font-24 mb-20">Lead Target</h2>
<div id="chart10"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-500 font-20">Server</div>
<div class="weight-500 font-30 text-dark">75%</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-server" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-500 font-20">Traffic</div>
<div class="weight-500 font-30 text-dark">55%</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-500 font-20">Email</div>
<div class="weight-500 font-30 text-dark">100</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="bg-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-500 font-20">Domians</div>
<div class="weight-500 font-30 text-dark">50</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 mb-50">
<div class="gradient-style1 text-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-400 font-20">Server</div>
<div class="weight-300 font-30">75%</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-server" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="gradient-style2 text-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-400 font-20">Traffic</div>
<div class="weight-300 font-30">55%</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="gradient-style3 text-white box-shadow border-radius-10 height-100-p widget-style3">
<div class="d-flex flex-wrap align-items-center">
<div class="widget-data">
<div class="weight-400 font-20">Email</div>
<div class="weight-300 font-30">100</div>
</div>
<div class="widget-icon">
<div class="icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 mb-50">
<div class="gradient-style4 text-white box-shadow border-radius-10 height-100-p widget-style3">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0