信通院-灾备 图表源码(在产品图表库基础上进行修改),开发逻辑和产品图表库一致
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import Chart from "../../../src/chart/pie/ChartPie37/ChartPie37";
  2. let pie=new Chart(document.querySelector(".c1"),{});
  3. window.addEventListener('resize',function() {
  4. pie.resize();
  5. })
  6. const option={
  7. bg:{
  8. backgroundColor:"#000000"
  9. },
  10. pie:{
  11. addOutline: false,
  12. startAngle: -90,
  13. z: 2,
  14. // 是否圆环显示
  15. isRing:false,
  16. center: {
  17. x:"20%",
  18. y:"-30%"
  19. },
  20. radius: '80%',
  21. dis: -50, //饼图的厚度
  22. labelLine: {
  23. show: true,
  24. length1: 20,
  25. length2: 10,
  26. },
  27. label: {
  28. show: false,
  29. fontSize: 16,
  30. // inside outside
  31. position:'inside',
  32. // 强制显示所有标签
  33. allShow:false,
  34. unit:'{value}件'
  35. },
  36. centerLabel:{
  37. show: false,
  38. color:'#ffffff',
  39. fontSize: 18
  40. }
  41. },
  42. legend: {
  43. show: true,
  44. // left: "70%",
  45. left: "80%",
  46. top: '5%',
  47. orient: 'vertical',
  48. itemAngelR:3,
  49. padding:1,
  50. itemWidth: 8,
  51. itemHeight: 8,
  52. borderRadius: 4,
  53. textStyle: {
  54. fontSize: 12,
  55. color: "#ffffff"
  56. }
  57. },
  58. shape: {
  59. faceColor:"#daf3fb",
  60. tool:{
  61. stokeColor:'#ffff00',
  62. topColor: '#ff0000',
  63. topFont: 36,
  64. }
  65. },
  66. // color: ['#0090ff', '#00f1ff','#0000ff', '#0021ff','#003fff', '#0061ff'],
  67. color:['#0FDAFF', '#65AFFF', '#80D6FF', '#3EB3FF', '#076AFF', '#73a7cb', '#74e9f2', '#778CFF','#83b283', '#51C4E8','#A1BEFF'],
  68. grid:{
  69. left:"20%",
  70. right:"20%",
  71. top:"20%",
  72. bottom:"15%"
  73. },
  74. series: [
  75. // {
  76. // name: '类别1',
  77. // value: 99
  78. // },{
  79. // name: '类别10',
  80. // value: 1
  81. // }
  82. {
  83. name: '类别1',
  84. value: 50
  85. },
  86. {
  87. name: "类别2",
  88. value: 50
  89. },
  90. {
  91. name: "类别3",
  92. value: 40
  93. }, {
  94. name: "类别4",
  95. value: 40
  96. }
  97. ,
  98. {
  99. name: "类别5",
  100. value: 40
  101. },
  102. {
  103. name: "类别6",
  104. value: 30
  105. }
  106. // ,
  107. // {
  108. // name: "类别10",
  109. // value: 20
  110. // },
  111. // {
  112. // name: "类别11",
  113. // value: 10
  114. // },
  115. // {
  116. // name: "类别12",
  117. // value: 10
  118. // }
  119. ],
  120. // valueAxis:{
  121. // },
  122. // xAxis:{
  123. // data:["小米","华为","苹果","三星","vivo","oppo"] //?????????????????
  124. // },
  125. // series:[{
  126. // data:[639539,548671,457822,223133,158514,122348]
  127. // }]
  128. // tooltip: {
  129. // show: true,
  130. // paddingW:10,
  131. // paddingH: 10,
  132. // itemGap: 5,
  133. // padding:100,
  134. // //距目标的偏移值
  135. // offsetX: 15,
  136. // offsetY: 0,
  137. // titleFontSize:12,
  138. // titleColor: '#ffffff',
  139. // itemFontSize:12,
  140. // itemColor:"#8c61f9",
  141. // borderColor: '#011245',
  142. // borderWidth: 0,
  143. // borderRadius: 0,
  144. // backgroundColor: 'rgba(0,16,62,0.9)',
  145. // },
  146. };
  147. setTimeout(()=>{
  148. // pie.setOption(option);
  149. },3000)