apexcharts实现一个柱状图多列对比图表效果代码

代码语言:html

所属分类:图表

代码描述:apexcharts实现一个柱状图多列对比图表效果代码

代码标签: apexcharts 柱状图 多列 对比 图表

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

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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: '净利润',
           data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
       }, {
           name: '收入',
           data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
       }, {
           name: '现金流',
           data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
       }],
       chart: {
           type: 'bar',
           height: 350
       },
       plotOptions: {
           bar: {
               horizont.........完整代码请登录后点击上方下载按钮下载查看

网友评论0