HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Animations</title>
<link href="http://lyear.itshubao.com/v5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/v5/css/style.min.css" rel="stylesheet">
</head>

<body>
<section>
  <aside id="animations" class="container">
    <div class="row">
      <div class="col-md-4">
        <form>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="charttype" value="line" id="charttype-line" />
            <label class="form-check-label" for="charttype-line">
              line
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="charttype" value="column" id="charttype-column" />
            <label class="form-check-label" for="charttype-column">
              column
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="charttype" value="bar" id="charttype-bar" />
            <label class="form-check-label" for="charttype-bar">
              bar
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="charttype" value="donut" id="charttype-donut" checked />
            <label class="form-check-label" for="charttype-donut">
              donut
            </label>
          </div>
          <br />
          <div>
            <a class="btn btn-primary update">更新</a>
          </div>
        </form>
      </div>
      <div class="col-md-8">
        <div class="animated-chart-box">
          <div class="animated-chart"></div>
        </div>
      </div>
    </div>
  </aside>
</section>

<script type="text/javascript" src="http://lyear.itshubao.com/v5/js/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>
CSS

  

  

    
JavaScript

    
var chartType = "donut";
var axisSeries = [{
    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
},
{
    data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
},
{
    data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}];

function random() {
    return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
}
function randomizeDonut() {
    return chart.w.globals.series.map(function() {
        return random();
    });
}
function getNewSeries() {
    function getData(data) {
        return data.map(function() {
            return random();
        });
    }
    return axisSeries.map(function(s) {
        var data = getData(s.data);
        return {
            data: data
        };
    });
}

function getOptions(type) {
    var series = axisSeries;
    if (type === "donut") {
        series = [34, 55, 44, 23, 19];
    }
    return {
        chart: {
            height: type === "donut" ? 300 : 380,
            type: type === "column" ? "bar": type,
            stacked: type === "line"
        },
        plotOptions: {
            bar: {
                horizontal: type === "column" ? false: true,
                endingShape: "rounded",
                columnWidth: "55%"
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: type === "line" ? 4 : 0
        },
        series: series,
        xaxis: {
            categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"]
        },
        yaxis: {
            title: {
                text: "$ (thousands)"
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            followCursor: false,
            value: {
                formatter: function formatter(val) {
                    return "$ " + val + " thousands";
                }
            }
        }
    };
}
    
var options = getOptions("donut");
chart = new ApexCharts(document.querySelector(".animated-chart"), options);
chart.render();
$("#animations .update").click(function() {
    if (chartType === "donut") {
        chart.updateSeries(randomizeDonut());
    } else {
        var newSeries = getNewSeries();
        chart.updateSeries(newSeries);
    }
});
$("#animations input[name=charttype]").click(function(animRadio) {
    chartType = $(this).val();
    options = getOptions(chartType);
    chart.destroy();
    chart = new ApexCharts(document.querySelector(".animated-chart"), options);
    chart.render();
});