apexcharts实现实时更新变动的曲线柱状图饼状图图表组合仪表盘效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：apexcharts实现实时更新变动的曲线柱状图饼状图图表组合仪表盘效果代码

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


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

<head>

  <meta charset="UTF-8">
 <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>
  
<style>
body {
  background: #1B213B;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

h1, h2, h3, h4, h5, h6, strong {
  font-weight: 600;
}

.box .apexcharts-xaxistooltip {
  background: #1B213B;
  color: #fff;
}

.content-area {
  max-width: 1280px;
  margin: 0 auto;
}

.box {
  background-color: #262D47;
  padding: 25px 25px; 
  border-radius: 4px; 
}

.columnbox {
  padding-right: 15px;
}
.radialbox {
  max-height: 333px;
  margin-bottom: 60px;
}

.apexcharts-legend-series tspan:nth-child(3) {
  font-weight: bold;
  font-size: 20px;
}

.edit-on-codepen {
  text-align: right;
  width: 100%;
  padding: 0 20px 40px;
  position: relative;
  top: -30px;
  cursor: pointer;
}
</style>



</head>

<body >
  <div id="wrapper">

                <div class="content-area">
                        <div class="container-fluid">
                                <div class="main">

                                        
                                        <div class="row mt-4">
                                                <div class="col-md-5">
                                                                <div class="box columnbox mt-4">
                                                                        <div id="columnchart"> </div>
                                                                </div>
                                                </div>
                                                <div class="col-md-7">
                                                                <div class="box  mt-4">
                                                                        <div id="linechart"> </div>
                                                                </div>
                                                </div>
                                        </div>

                                        <div class="row">
                                                <div class="col-md-5">
                                                                <div class="box radialbox mt-4">
                                                                                <div id="circlechart"> </div>
                                                                        </div>
                                                </div>
                                                <div class="col-md-7">
                                                                <div class="box mt-4">
                                                                        <div class="mt-4">
                                                                                <div id="progress1"></div>
                                                                        </div>
                                                                        <div class="mt-4">
                                                                                <div id="progress2"></div>
                                                                        </div>
                                                                        <div class="mt-4">
                                                                                <div id="progress3"></div>
                                                                        </div>
                                                                </div>
                                                </div>
                                        </div>

                                        <div class="row">
                                                <div class="float-right edit-on-codepen">
                                                        
                                                </div>
                                        </div>
                                </div>

                        </div>
                </div>
        </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/apexcharts.3.35.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.2.29.1.js"></script>
      <script >
window.Apex = {
  chart: {
    foreColor: "#fff",
    toolbar: {
      show: false } },


  colors: ["#FCCF31", "#17ead9", "#f02fc2"],
  stroke: {
    width: 3 },

  dataLabels: {
    enabled: false },

  grid: {
    borderColor: "#40475D" },

  xaxis: {
    axisTicks: {
      color: "#333" },

    axisBorder: {
      color: "#333" } },


  fill: {
    type: "gradient",
    gradient: {
      gradientToColors: ["#F55555", "#6078ea", "#6094ea"] } },


  tooltip: {
    theme: "dark",
    x: {
      formatter: function (val) {
        return moment(new Date(val)).format("HH:mm:ss");
      } } },


  yaxis: {
    decimalsInFloat: 2,
    opposite: true,
    labels: {
      offsetX: -10 } } };




var trigoStrength = 3;
var iteration = 11;

function getRandom() {
  var i = iteration;
  return (
    (Math.sin(i / trigoStrength) * (i / trigoStrength) +
    i / trigoStrength +
    1) * (
    trigoStrength * 2));

}

function getRangeRandom(yrange) {
  return Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
}

function generateMinuteWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  var series = [];
  while (i < count) {
    var x = baseval;
    var y =
    (Math.sin(i / trigoStrength) * (i / trigoStrength) +
    i / trigoStrength +
    1) * (
    trigoStrength * 2);

    series.push([x, y]);
    baseval += 300000;
    i++;
  }
  return series;
}

function getNewData(baseval, yrange) {
  var newTime = baseval + 300000;
  return {
    x: newTime,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min };

}

var optionsColumn = {
  chart: {
    height: 350,
    type: "bar",
    ani.........完整代码请登录后点击上方下载按钮下载查看