加载中...

断点区域图


调试运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图形展示</title>
</head>
<body>
 
<div class="detail-section">
    <div id="canvas">
 
    </div>
</div>
 
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
 
 
  <script type="text/javascript">
        var chart = new AChart({
          theme : AChart.Theme.SmoothBase,
          id : 'canvas',
          width : 950,
          height : 500,
          plotCfg : {
            margin : [50,50,80] //画板的边距
          },
          seriesOptions : { //设置多个序列共同的属性
            areaCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line
              markers : {
                single : true
              },
              pointStart: 1940,
              pointInterval : 1
            }
          },
          yAxis : {
            
            formatter : function  (value) {
              return value;
            }
          },
          tooltip : {
            valueSuffix : '¥'
          },
          series : [{ //中间存在断点,断点不做处理,不进行忽略
            name: 'USA',
            data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,1005, 1436,
                    2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982,
                    32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579,
                    25722, 24826, 24605,24304, null, null, 24099, 24357, 24237, 24401, 24344,
                    23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                    10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
                ]
            }, {
                name: 'USSR/Russia',
                connectNulls : true, //此配置项会将null的数据忽略掉
                data: [null, null, null, null, null, null, null , null , null ,null,5, 25, 50,
                  120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129,
                  7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205,
                  23044, 25393, 27935, 30062, null,33952, 35804, 37431, 39197, 45000, 43000,
                  41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000,
                  22000,21000, 20000, 19000, 18000, 18000, 17000, 16000
                ]
            }]
 
        });
 
        chart.render();
      </script>
</body>
</html>

还没有评论.