Apexcharts - responsive 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - responsive</title>
</head>

<body>
<div id="chart">
  <div id="responsive-chart"></div>
</div>

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

CSS

#chart {
  max-width: 760px;
  margin: 35px auto;
  opacity: 0.9;
}

JavaScript

var options = {
  chart: {
    width: "100%",
    height: 380,
    type: "bar"
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: 1,
    colors: ["#fff"]
  },
  series: [
    {
      data: [44, 55, 41, 64, 22, 43, 21]
    },
    {
      data: [53, 32, 33, 52, 13, 44, 32]
    }
  ],
  xaxis: {
    categories: [
      "Korea",
      "Canada",
      "Poland",
      "Italy",
      "France",
      "Japan",
      "China"
    ]
  },
  legend: {
    position: "right",
    verticalAlign: "top",
    containerMargin: {
      left: 35,
      right: 60
    }
  },
  responsive: [
    {
      breakpoint: 1000,
      options: {
        plotOptions: {
          bar: {
            horizontal: false
          }
        },
        legend: {
          position: "bottom"
        }
      }
    }
  ]
};

var chart = new ApexCharts(
  document.querySelector("#responsive-chart"),
  options
);

chart.render();