polarLine.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. // 'echarts/component/markPoint',
  23. // 'echarts/component/markLine'
  24. ], function (echarts) {
  25. var chart = echarts.init(document.getElementById('main'), null, {
  26. });
  27. var xAxisData = [];
  28. var data1 = [];
  29. var data2 = [];
  30. var data3 = [];
  31. for (var i = 0; i < 10; i++) {
  32. xAxisData.push('类目' + i);
  33. data1.push((Math.random() * 2 + 1).toFixed(3));
  34. data3.push((Math.random() + 0.5).toFixed(3));
  35. data2.push((Math.random() + 0.5).toFixed(3));
  36. }
  37. chart.setOption({
  38. legend: {
  39. data: ['line', 'line2', 'line3']
  40. },
  41. tooltip: {
  42. trigger: 'axis',
  43. axisPointer: {
  44. type: 'shadow'
  45. }
  46. },
  47. polar: {},
  48. angleAxis: {
  49. // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
  50. data: xAxisData
  51. },
  52. radiusAxis: {
  53. },
  54. series: [{
  55. coordinateSystem: 'polar',
  56. name: 'line',
  57. stack: 'all',
  58. type: 'line',
  59. symbolSize: 10,
  60. itemStyle: {
  61. normal: {
  62. areaStyle: {}
  63. }
  64. },
  65. markPoint: {
  66. data: [{
  67. type: 'max'
  68. }]
  69. },
  70. data: data1
  71. }, {
  72. coordinateSystem: 'polar',
  73. name: 'line2',
  74. stack: 'all',
  75. type: 'line',
  76. symbolSize: 10,
  77. itemStyle: {
  78. normal: {
  79. areaStyle: {}
  80. }
  81. },
  82. markLine: {
  83. data: [[{
  84. type: 'max'
  85. }, {
  86. type: 'min'
  87. }]]
  88. },
  89. data: data2
  90. }, {
  91. coordinateSystem: 'polar',
  92. name: 'line3',
  93. stack: 'all',
  94. type: 'line',
  95. symbolSize: 10,
  96. itemStyle: {
  97. normal: {
  98. areaStyle: {}
  99. }
  100. },
  101. data: data3
  102. }]
  103. });
  104. })
  105. </script>
  106. </body>
  107. </html>