小区信息.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. var myChart = echarts.init(document.getElementById('arightboxbott'));
  2. option = {
  3. color: [{
  4. type: 'linear',
  5. x: 0,
  6. y: 0,
  7. x2: 0,
  8. y2: 1,
  9. colorStops: [{
  10. offset: 0,
  11. color: '#2C8179' // 0% 处的颜色
  12. }, {
  13. offset: 1,
  14. color: '#18C4B9' // 100% 处的颜色
  15. }],
  16. global: false // 缺省为 false
  17. }, {
  18. type: 'linear',
  19. x: 0,
  20. y: 0,
  21. x2: 0,
  22. y2: 1,
  23. colorStops: [{
  24. offset: 0,
  25. color: '#ACBF95' // 0% 处的颜色
  26. }, {
  27. offset: 1,
  28. color: '#7CBF2B' // 100% 处的颜色
  29. }],
  30. global: false // 缺省为 false
  31. }, {
  32. type: 'linear',
  33. x: 0,
  34. y: 0,
  35. x2: 0,
  36. y2: 1,
  37. colorStops: [{
  38. offset: 0,
  39. color: '#508097' // 0% 处的颜色
  40. }, {
  41. offset: 1,
  42. color: '#1C3979' // 100% 处的颜色
  43. }],
  44. global: false // 缺省为 false
  45. }, {
  46. type: 'linear',
  47. x: 0,
  48. y: 0,
  49. x2: 0,
  50. y2: 1,
  51. colorStops: [{
  52. offset: 0,
  53. color: '#4d72d9' // 0% 处的颜色
  54. }, {
  55. offset: 1,
  56. color: '#75489F' // 100% 处的颜色
  57. }],
  58. global: false // 缺省为 false
  59. }],
  60. title: [{
  61. top: 125,
  62. left: 80,
  63. textStyle: {
  64. fontSize: 18,
  65. color: 'rgba(255,255,255,.6)'
  66. },
  67. text: '楼栋\n信息'
  68. },{
  69. top: 125,
  70. right: 80,
  71. textStyle: {
  72. fontSize: 18,
  73. color: 'rgba(255,255,255,.6)'
  74. },
  75. text: '业主\n信息'
  76. }],
  77. tooltip: {
  78. trigger: 'item',
  79. formatter: '{a} <br/>{b}: {c} ({d}%)'
  80. },
  81. legend: {
  82. left: 10,
  83. textStyle: {
  84. fontSize: 10,
  85. color: 'rgba(255,255,255,.7)'
  86. },
  87. data: ['A区业主', 'B区业主', 'A区楼栋', 'B区楼栋']
  88. },
  89. grid: {
  90. containLabel: true
  91. },
  92. series: [{
  93. name: '访问来源',
  94. type: 'pie',
  95. radius: ['45%', '65%'],
  96. center: ['75%', '55%'],
  97. avoidLabelOverlap: false,
  98. label: {
  99. // show: false,
  100. position: 'inner',
  101. formatter: '{b} {c} 户'
  102. },
  103. emphasis: {
  104. label: {
  105. show: true,
  106. fontSize: '30',
  107. fontWeight: 'bold'
  108. }
  109. },
  110. labelLine: {
  111. show: false
  112. },
  113. data: [
  114. { value: 2335, name: 'A区业主' },
  115. { value: 810, name: 'B区业主' },
  116. ]
  117. }, {
  118. name: '访问来源',
  119. type: 'pie',
  120. radius: ['45%', '65%'],
  121. center: ['25%', '55%'],
  122. avoidLabelOverlap: false,
  123. label: {
  124. // show: false,
  125. position: 'inner',
  126. formatter: '{b} {c} 栋'
  127. },
  128. emphasis: {
  129. label: {
  130. show: true,
  131. fontSize: '30',
  132. fontWeight: 'bold'
  133. }
  134. },
  135. labelLine: {
  136. show: false
  137. },
  138. data: [
  139. { value: 22, name: 'A区楼栋' },
  140. { value: 9, name: 'B区楼栋' }
  141. ]
  142. }]
  143. };
  144. myChart.setOption(option);