加载中...

多层饼图


调试运行

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图形展示</title>
  6. </head>
  7. <body>
  8. <div class="detail-section">
  9. <div id="canvas">
  10. </div>
  11. </div>
  12. <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
  13. <!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
  14. <script type="text/javascript">
  15. var chart = new AChart({
  16. theme : AChart.Theme.SmoothBase,
  17. id : 'canvas',
  18. width : 1000,
  19. height : 500,
  20. plotCfg : {
  21. margin : [50,50,100]
  22. },
  23. tooltip : {
  24. shared : true
  25. },
  26. seriesOptions : {
  27. pieCfg : {
  28. allowPointSelect : false,
  29. labels : null,
  30. animate : false
  31. }
  32. },
  33. series: [{
  34. type: 'pie',
  35. radius : 100,
  36. innerRadius : 80,
  37. name: 'outter',
  38. startAngle : -198, // 360 * 60% / 2 + 90
  39. endAngle : 162, //
  40. data: [
  41. {name : 'outter', y : 60},
  42. {name : '',y : 40,attrs : {fill : '#efefef'},placeHolder : true}
  43. ]
  44. },
  45. {
  46. type: 'pie',
  47. name: 'middle',
  48. radius : 80,
  49. innerRadius : 60,
  50. startAngle : -144,//360 * 30% / 2 + 90
  51. endAngle : 226,
  52. data: [
  53. {name : 'middle', y : 30,attrs : {fill : 'rgb(85, 194, 187)'}},
  54. {name : '',y : 70,attrs : {fill : '#efefef'},placeHolder : true}
  55. ]
  56. },
  57. {
  58. type: 'pie',
  59. name: 'inner',
  60. radius : 60,
  61. innerRadius : 40,
  62. startAngle : -180,//360 * 50% / 2 + 90
  63. endAngle : 180,
  64. data: [
  65. {name : 'inner', y : 50,attrs : {fill : 'rgb(161, 45, 45)'}},
  66. {name : '',y : 50,attrs : {fill : '#efefef'},placeHolder : true}
  67. ]
  68. }]
  69. });
  70. chart.render();
  71. </script>
  72. </body>
  73. </html>

还没有评论.