气泡渐变图

调试运行
<!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,100]
          },
          xAxis : {
              tickOffset : 20
          },
          yAxis : {
            title : {
              text : '气泡'
            },
            min : -10
          },  
          tooltip : {
            shared : true
          },
          seriesOptions : {
              bubbleCfg : {
                
              }
          },
          series: [{
            name : 'bubble1',
            data: [[9, 81, 63],
                [98, 5, 89],
                [51, 50, 73],
                [41, 22, 14],
                [58, 24, 20],
                [78, 37, 34],
                [55, 56, 53],
                [18, 45, 70],
                [42, 44, 28],
                [3, 52, 59],
                [31, 18, 97],
                [79, 91, 63],
                [93, 23, 23],
                [44, 83, 22]],
            circle : {
                fill : 'r(0.4, 0.3)rgba(255,255,255,0.5)-rgba(69,114,167,0.5)'
            }
        }, {
            name : 'bubble2',
            data: [ [42, 38, 20],
                [6, 18, 1],
                [1, 93, 55],
                [57, 2, 90],
                [80, 76, 22],
                [11, 74, 96],
                [88, 56, 10],
                [30, 47, 49],
                [57, 62, 98],
                [4, 16, 16],
                [46, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]],
            circle : {
                fill : 'r(0.4, 0.3)rgba(255,255,255,0.5)-rgba(170,70,67,0.5)'
            }
        }]
        });
 
        chart.render();
  </script>
 
</body>
</html>