Apexcharts - Basic Circle Chart with dataLabels 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Basic Circle Chart with dataLabels</title>
</head>

<body>
<div id="chart1"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>

CSS

#chart1{
    max-width: 650px;
    margin: 35px auto;
}

JavaScript

var options1 = {
  chart: {
    height: 280,
    type: "radialBar",
  },
  series: [67, 84, 97, 61],
  plotOptions: {
    radialBar: {
      dataLabels: {
        total: {
          show: true,
          label: 'TOTAL'
        }
      }
    }
  },
  labels: ['TEAM A', 'TEAM B', 'TEAM C', 'TEAM D']
};

new ApexCharts(document.querySelector("#chart1"), options1).render();