amcharts可缩放区域曲线图表显示效果-html代码-BFW代码库

amcharts可缩放区域曲线图表显示效果

代码语言：html

所属分类：图表

代码描述：amcharts可缩放区域曲线图表显示效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #options {
            width: 100%;
            margin: 10;
        }

        #chartdiv {
            width: 100%;
            height: 400px;
        }

        #chartdivTwo {
            width: 50%;
            height: 400px;
        }

        .amcharts-graph-g2 .amcharts-graph-stroke {
            stroke-dasharray: 500%;
            -webkit-animation: css-effect 10s ease-out forwards;
            animation: css-effect 10s ease-out forwards;
        }

@-webkit-keyframes css-effect {
            0% {
                stroke-dashoffset: 500%;
            }
            100% {
                stroke-dashoffset: 0%;
            }
        }
@keyframes css-effect {
            0% {
                stroke-dashoffset: 500%;
            }
            100% {
                stroke-dashoffset: 0%;
            }
        }

        .modal, .modal .shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100000;
        }

        .modal .shade {
            background: #000;
            opacity: 0.7;
            z-index: 1;
        }

        .modal .chart {
            width: 90%!important;
            height: 90%!important;
            top: 5%;
            left: 5%;
            position: absolute;
            background: #fff!important;
            z-index: 2;
            border-radius: 5px;
        }
    </style>



    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/jquery.fancybox.css">
    <link rel="stylesheet" href="https://extra.amcharts.com/support/ameffects.css">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-radar.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-export.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/amcharts-export.css">
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.fancybox.min.js"></script>
</head>
<body>
    <div>
        <div id="options"></div>
        <div id="contentBox" style="margin:0px auto; width:100">
        </div>
    </div>


    <script>
        var charID = document.getElementById('contentBox');
        charID.innerHTML = '<div id="chartdiv"></div>';

        var mainConfig = {
            "type": "serial",
            "theme": "light",
            "marginRight": 30,
            "marginLeft": 30,
            "legend": {
                "verticalGap": 10,
                "maxColumns": 1,
                "position": "top",
                "useGraphSettings": true,
                "markerSize": 8,
                "align": "center"
            },

            "autoMarginOffset": 20,
            "mouseWheelZoomEnabled": true,
            "dataDateFormat": "YYYY-MM-DD",
            "valueAxes": [{
                "id": "v1",
                "axisAlpha": 0,
                "position": "left",
                "ignoreAxisWidth": true
            }],

            "balloon": {
                "borderThickness": 1,
                "shadowAlpha": 0
            },

            "graphs": [{
                "id": "g1",
                "balloon": {
                    "drop": true,
                    "adjustBorderColor": false,
                    "color": "#ffffff",
                    "fontSize": 10,
                    "maxWidth": 40
                },

                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
         .........完整代码请登录后点击上方下载按钮下载查看