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",
    animations: {
      enabled: false },

    events: {
      animationEnd: function (chartCtx) {
        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) {
        const newData1 = chartCtx.w.config.series[0].data.slice();
        newData1.shift();
        const newData2 = chartCtx.w.config.series[1].data.slice();
        newData2.shift();
        window.setTimeout(function () {
          chartCtx.updateOptions(
          {
.........完整代码请登录后点击上方下载按钮下载查看