d3+lodash实现大气黑色大数据分析趋势仪表盘效果代码-html代码-BFW代码库

d3+lodash实现大气黑色大数据分析趋势仪表盘效果代码

代码语言：html

所属分类：图表

代码描述：d3+lodash实现大气黑色大数据分析趋势仪表盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>

.sparkline {
  fill: none;
  stroke: url(#legendGradientMulti);
  stroke-width: 3px;
}
.sparkcircle {
  fill: #fff;
  stroke: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #222;
  font-family: 'Roboto', sans-serif;
}
.container {
  width: 400px;
  margin: 0 auto;
  padding: 10px 0 50px 0;
}
.meta {
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.meta-info {
  padding-left: 20%;
}
.chart_container {
  height: 90px;
}
h2 {
  color: #8B8B8B;
  display: block;
  padding-left: 20%;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 50px;
}
h4 {
  color: #FDFDFD;
  font-size: 62px;
  font-weight: 300;
}
h6 {
  color: #FDD13E;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.inspiration-link {
  text-align: center;
  display: block;
  padding: 50px 0 10px 0;
  width: 100%;
  color: #FDD13E;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
</style>



</head>

<body >
  <div class="container">
  <h2>Analytics stats</h2>
  <div class="meta">
    <div class="meta-info">
      <h4>26.469</h4>
      <h6>views</h6>
    </div>
    <div id="chart" class="chart_container"></div>
  </div>
  
  <div class="meta">
    <div class="meta-info">
      <h4>2.311</h4>
      <h6>likes</h6>
    </div>
    <div id="chart2" class="chart_container"></div>
  </div>
  
  <div class="meta">
    <div class="meta-info">
      <h4>5</h4>
      <h6>comments</h6>
    </div>
    <div id="chart3" class="chart_container"></div>
  </div>
</div>
  
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.3.5.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment-with-locales.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
      <script >
var width = 450;
var height = 90;
var DURATION = 1000;
var x = d3.scale.linear().range([0, width - 20]);
var y = d3.scale.linear.........完整代码请登录后点击上方下载按钮下载查看