polarLine2.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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/line',
  19. // 'echarts/component/legend',
  20. // 'echarts/component/polar',
  21. // 'echarts/component/tooltip'
  22. ], function (echarts) {
  23. var chart = echarts.init(document.getElementById('main'), null, {
  24. });
  25. var data = [];
  26. for (var i = 0; i < 100; i++) {
  27. var theta = i / 100 * 360;
  28. var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
  29. data.push([r, theta]);
  30. }
  31. chart.setOption({
  32. legend: {
  33. data: ['line']
  34. },
  35. polar: {},
  36. tooltip: {
  37. trigger: 'axis',
  38. axisPointer: {
  39. type: 'cross'
  40. }
  41. },
  42. angleAxis: {
  43. type: 'value',
  44. startAngle: 0
  45. },
  46. radiusAxis: {
  47. min: 10,
  48. max: 20
  49. },
  50. series: [{
  51. coordinateSystem: 'polar',
  52. name: 'line',
  53. type: 'line',
  54. data: data
  55. }]
  56. });
  57. })
  58. </script>
  59. </body>
  60. </html>