apexcharts实现实时暗色动态柱状图曲线图圆弧图进度图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：apexcharts实现实时暗色动态柱状图曲线图圆弧图进度图表效果代码

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

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<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}.spinner-border{display:none}
</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>
            </div>
        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/apexcharts.3.35.0.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',
    animations: {
      enabled: false
    },
    events: {
      animationEnd: function (chartCtx, opts) {
        const newData = chartCtx.w.config.series[0].data.slice()
        newData.shift()
        window.setTimeout(function () {
          chartCtx.updateOptions({
            series: [{
              data: newData
            }],
            xaxis: {
              min: chartCtx.minX,
              max: chartCtx.maxX
            },
            subtitle: {
              text: parseInt(getRangeRandom({min: 1, max: 20})).toString() + '%',
            }
          }, false, false)
        }, 300)
      }
    },
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: 0,
  },
  series: [{
    name: 'Load Average',
    data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
      min: 10,
      max: 110
    })
  }],
  title: {
    text: 'Load Average',
    align: 'left',
    style: {
      fontSize: '12px'
    }
  },
  subtitle: {
    text: '20%',
    floating: true,
    align: 'right',
    offsetY: 0,
    style: {
      fontSize: '22px'
    }
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'dark',
      type: 'vertical',
      shadeIntensity: 0.5,
      inverseColors: false,
      opacityFrom: 1,
      opacityTo: 0.8,
      stops: [0, 100]
    }
  },
  xaxis: {
    type: 'datetime',
    range: 2700000
  },
  legend: {
    show: true
  },
}



var chartColumn = new ApexCharts(
  document.querySelector("#columnchart"),
  optionsColumn
);
chartColumn.render()

var optionsLine = {
  chart: {
    height: 350,
    type: 'line',
    stacked: true,
    animations: {
      enabled: true,
      easing: 'linear',
      dynamicAnimation: {
        speed: 1000
      }
    },
    dropShadow: {
      enabled: true,
      opacity: 0.3,
      blur: 5,
      left: -7,
      top: 22
    },
    events: {
      animationEnd: function (chartCtx, opts) {
        const newData1 = chartCtx.w.config.series[0].data.slice()
        newData1.s.........完整代码请登录后点击上方下载按钮下载查看