radar2.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="config.js"></script>
  6. </head>
  7. <body>
  8. <style>
  9. html, body, #main {
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <div id="main"></div>
  15. <script>
  16. require([
  17. 'echarts',
  18. 'echarts/chart/radar',
  19. 'echarts/component/legend',
  20. 'echarts/component/tooltip',
  21. 'echarts/component/visualMap'
  22. ], function (echarts) {
  23. var chart = echarts.init(document.getElementById('main'));
  24. chart.setOption({
  25. title : {
  26. text: '浏览器占比变化',
  27. subtext: '纯属虚构',
  28. x:'right',
  29. y:'bottom'
  30. },
  31. tooltip : {
  32. trigger: 'item',
  33. backgroundColor : 'rgba(0,0,250,0.2)'
  34. },
  35. legend: {
  36. data: (function (){
  37. var list = [];
  38. for (var i = 1; i <=28; i++) {
  39. list.push(i + 2000 + '');
  40. }
  41. return list;
  42. })()
  43. },
  44. visualMap: {
  45. color: ['red', 'yellow']
  46. },
  47. radar: {
  48. indicator : [
  49. { text: 'IE8-', max: 400},
  50. { text: 'IE9+', max: 400},
  51. { text: 'Safari', max: 400},
  52. { text: 'Firefox', max: 400},
  53. { text: 'Chrome', max: 400}
  54. ]
  55. },
  56. series : (function (){
  57. var series = [];
  58. for (var i = 1; i <= 28; i++) {
  59. series.push({
  60. name:'浏览器(数据纯属虚构)',
  61. type: 'radar',
  62. symbol: 'none',
  63. itemStyle: {
  64. normal: {
  65. lineStyle: {
  66. width:1
  67. }
  68. },
  69. emphasis : {
  70. areaStyle: {color:'rgba(0,250,0,0.3)'}
  71. }
  72. },
  73. data:[
  74. {
  75. value:[
  76. (40 - i) * 10,
  77. (38 - i) * 4 + 60,
  78. i * 5 + 10,
  79. i * 9,
  80. i * i /2
  81. ],
  82. name:i + 2000 + ''
  83. }
  84. ]
  85. });
  86. }
  87. return series;
  88. })()
  89. });
  90. });
  91. </script>
  92. </body>
  93. </html>