polarLine2.html 1.9 KB

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