apexcharts实现上下倒映式柱状图图表效果代码-html代码-BFW代码库

apexcharts实现上下倒映式柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：apexcharts实现上下倒映式柱状图图表效果代码

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

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <style>
        #chart{max-width:650px;margin:35px auto}
    </style>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/apexcharts.3.35.js"></script>
</head>

<body>
    <div id="chart"></div>
    <script>
        var options = {
      series: [{
          name: 'Cash Flow',
          data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4]
      }],
      chart: {
          type: 'bar',
          height: 350
      },
      plotOptions: {
          bar: {
              colors: {
                  ranges: [{
                      from: -100,
                      to: -46,
                      color: '#F15B46'
                  }, {
                      from: -45,
                      to: 0,
                      color: '#FEB019'
                  }]
              },
              columnWidth: .........完整代码请登录后点击上方下载按钮下载查看