polarScatter.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/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/scatter',
  19. // 'echarts/component/legend',
  20. // 'echarts/component/polar'
  21. ], function (echarts) {
  22. var chart = echarts.init(document.getElementById('main'), null, {
  23. });
  24. var data1 = [];
  25. var data2 = [];
  26. var data3 = [];
  27. for (var i = 0; i < 100; i++) {
  28. data1.push([Math.random() * 5, Math.random() * 360]);
  29. data2.push([Math.random() * 5, Math.random() * 360]);
  30. data3.push([Math.random() * 10, Math.random() * 360]);
  31. }
  32. chart.setOption({
  33. legend: {
  34. data: ['scatter', 'scatter2', 'scatter3']
  35. },
  36. polar: {
  37. },
  38. angleAxis: {
  39. type: 'value'
  40. },
  41. radiusAxis: {
  42. axisAngle: 0
  43. },
  44. series: [{
  45. coordinateSystem: 'polar',
  46. name: 'scatter',
  47. type: 'scatter',
  48. symbolSize: 10,
  49. data: data1
  50. }, {
  51. coordinateSystem: 'polar',
  52. name: 'scatter2',
  53. type: 'scatter',
  54. symbolSize: 10,
  55. data: data2
  56. }, {
  57. coordinateSystem: 'polar',
  58. name: 'scatter3',
  59. type: 'scatter',
  60. symbolSize: 10,
  61. data: data3
  62. }]
  63. });
  64. })
  65. </script>
  66. </body>
  67. </html>