box4.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. var dom = document.getElementById("box4");
  2. var myChart = echarts.init(dom);
  3. var app = {};
  4. option = null;
  5. option = {
  6. legend: {
  7. textStyle:{//图例文字的样式
  8. color:'#fff',
  9. fontSize:12
  10. },
  11. data: ['图一','图二', '张三', '李四']
  12. },
  13. radar: [
  14. {
  15. indicator: [
  16. { text: '指标一' },
  17. { text: '指标二' },
  18. { text: '指标三' },
  19. { text: '指标四' },
  20. { text: '指标五' }
  21. ],
  22. center: ['25%', '50%'],
  23. radius: 120,
  24. startAngle: 90,
  25. splitNumber: 4,
  26. shape: 'circle',
  27. name: {
  28. formatter:'【{value}】',
  29. textStyle: {
  30. color:'#72ACD1'
  31. }
  32. },
  33. splitArea: {
  34. areaStyle: {
  35. color: ['rgba(114, 172, 209, 0.2)',
  36. 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
  37. 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
  38. shadowColor: 'rgba(0, 0, 0, 0.3)',
  39. shadowBlur: 10
  40. }
  41. },
  42. axisLine: {
  43. lineStyle: {
  44. color: 'rgba(255, 255, 255, 0.5)'
  45. }
  46. },
  47. splitLine: {
  48. lineStyle: {
  49. color: 'rgba(255, 255, 255, 0.5)'
  50. }
  51. }
  52. },
  53. {
  54. indicator: [
  55. { text: '参数一', max: 150 },
  56. { text: '参数二', max: 150 },
  57. { text: '参数三', max: 150 },
  58. { text: '参数四', max: 120 },
  59. { text: '参数五', max: 108 },
  60. { text: '参数六', max: 72 }
  61. ],
  62. center: ['75%', '50%'],
  63. radius: 120
  64. }
  65. ],
  66. series: [
  67. {
  68. name: '雷达图',
  69. type: 'radar',
  70. itemStyle: {
  71. emphasis: {
  72. // color: 各异,
  73. lineStyle: {
  74. width: 4
  75. }
  76. }
  77. },
  78. data: [
  79. {
  80. value: [100, 8, 0.40, -80, 2000],
  81. name: '图一',
  82. symbol: 'rect',
  83. symbolSize: 5,
  84. lineStyle: {
  85. normal: {
  86. type: 'dashed'
  87. }
  88. }
  89. },
  90. {
  91. value: [60, 5, 0.30, -100, 1500],
  92. name: '图二',
  93. areaStyle: {
  94. normal: {
  95. color: 'rgba(255, 255, 255, 0.5)'
  96. }
  97. }
  98. }
  99. ]
  100. },
  101. {
  102. name: '成绩单',
  103. type: 'radar',
  104. radarIndex: 1,
  105. data: [
  106. {
  107. value: [120, 118, 130, 100, 99, 70],
  108. name: '张三',
  109. label: {
  110. normal: {
  111. show: true,
  112. formatter:function(params) {
  113. return params.value;
  114. }
  115. }
  116. }
  117. },
  118. {
  119. value: [90, 113, 140, 30, 70, 60],
  120. name: '李四',
  121. areaStyle: {
  122. normal: {
  123. opacity: 0.9,
  124. color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
  125. {
  126. color: '#B8D3E4',
  127. offset: 0
  128. },
  129. {
  130. color: '#72ACD1',
  131. offset: 1
  132. }
  133. ])
  134. }
  135. }
  136. }
  137. ]
  138. }
  139. ]
  140. };
  141. if (option && typeof option === "object") {
  142. myChart.setOption(option, true);
  143. }