加载中...

多层嵌套饼图(逆时针)


调试运行

<!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 : 600,
      height : 300,
      plotCfg : {
        margin : [0]
      },
      tooltip : {
        shared : true
      },
      seriesOptions : {
          pieCfg : {
            allowPointSelect : false,
            labels : null,
            animate : false
          }
      },
      legend : {
        align : 'right',//top,left,right,bottom(默认)
        layout : 'vertical',//默认 horizontal
        dy : -100,
        dx : -100,
        back : null
      },
      tooltip : null,
      series: [{
          type: 'pie',
          radius : 100,
          innerRadius : 80,
          name: 'outter',
          color : 'rgb(169, 208, 82)',
          data: [
            {name : '',y : 40,attrs : {fill : '#fff'},placeHolder : true},
            {name : 'outter',   y : 60,attrs : {fill : 'rgb(169, 208, 82)'}}
          ]
      },
      {
          type: 'pie',
          name: 'middle',
          radius : 80,
          innerRadius : 60,
          color: 'rgb(85, 194, 187)',
          data: [
            
            {name : '',y : 70,attrs : {fill : '#fff'},placeHolder : true},
            {name : 'middle',   y : 30,attrs : {fill : 'rgb(85, 194, 187)'}}
          ]
      },
      {
          type: 'pie',
          name: 'inner',
          radius : 60,
          color : 'rgb(161, 45, 45)',
          innerRadius : 40,
          data: [
            
            {name : '',y : 50,attrs : {fill : '#fff'},placeHolder : true},
            {name : 'inner',   y : 50,attrs : {fill : 'rgb(161, 45, 45)'}}
          ]
      }]
    });
 
    chart.render();
      </script>
 
</body>
</html>

还没有评论.