radar.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. ], function (echarts) {
  22. var chart = echarts.init(document.getElementById('main'));
  23. chart.setOption({
  24. tooltip: {},
  25. legend: {
  26. data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
  27. },
  28. radar: {
  29. // shape: 'circle',
  30. indicator: [
  31. { text: '销售(sales)', max: 6500},
  32. { text: '管理(Administration)', max: 16000},
  33. { text: '信息技术(Information Techology)', max: 30000},
  34. { text: '客服(Customer Support)', max: 38000},
  35. { text: '研发(Development)', max: 52000},
  36. { text: '市场(Marketing)', max: 25000}
  37. ]
  38. },
  39. series: [{
  40. name: '预算 vs 开销(Budget vs spending)',
  41. type: 'radar',
  42. label: {
  43. normal: {
  44. show: true
  45. }
  46. },
  47. // areaStyle: {normal: {}},
  48. data : [
  49. {
  50. value : [4300, 10000, 28000, 35000, 50000, 19000],
  51. name : '预算分配(Allocated Budget)'
  52. },
  53. {
  54. value : [5000, 14000, 28000, 31000, 42000, 21000],
  55. name : '实际开销(Actual Spending)'
  56. }
  57. ]
  58. }]
  59. });
  60. chart.on('click', function (params) {
  61. console.log(params)
  62. })
  63. });
  64. </script>
  65. </body>
  66. </html>