regression_polynomial.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <script src="../lib/esl.js"></script>
  7. <script src="../lib/config.js"></script>
  8. <script src="../lib/jquery.min.js"></script>
  9. </head>
  10. <body>
  11. <style>
  12. html, body, #main {
  13. width: 100%;
  14. height: 100%;
  15. margin: 0;
  16. padding: 0;
  17. }
  18. </style>
  19. <div id="main"></div>
  20. <script>
  21. require([
  22. 'echarts',
  23. 'ecStat'
  24. ], function (echarts, ecStat) {
  25. echarts.registerTransform(ecStat.transform.regression);
  26. var chart = echarts.init(document.getElementById('main'));
  27. var data = [
  28. [96.24, 11.35],
  29. [33.09, 85.11],
  30. [57.60, 36.61],
  31. [36.77, 27.26],
  32. [20.10, 6.72],
  33. [45.53, 36.37],
  34. [110.07, 80.13],
  35. [72.05, 20.88],
  36. [39.82, 37.15],
  37. [48.05, 70.50],
  38. [0.85, 2.57],
  39. [51.66, 63.70],
  40. [61.07, 127.13],
  41. [64.54, 33.59],
  42. [35.50, 25.01],
  43. [226.55, 664.02],
  44. [188.60, 175.31],
  45. [81.31, 108.68]
  46. ];
  47. var option = {
  48. dataset: [{
  49. source: [
  50. [96.24, 11.35],
  51. [33.09, 85.11],
  52. [57.60, 36.61],
  53. [36.77, 27.26],
  54. [20.10, 6.72],
  55. [45.53, 36.37],
  56. [110.07, 80.13],
  57. [72.05, 20.88],
  58. [39.82, 37.15],
  59. [48.05, 70.50],
  60. [0.85, 2.57],
  61. [51.66, 63.70],
  62. [61.07, 127.13],
  63. [64.54, 33.59],
  64. [35.50, 25.01],
  65. [226.55, 664.02],
  66. [188.60, 175.31],
  67. [81.31, 108.68]
  68. ]
  69. }, {
  70. transform: {
  71. type: 'ecStat:regression',
  72. config: { method: 'polynomial', order: 3 }
  73. }
  74. }],
  75. tooltip: {
  76. trigger: 'axis',
  77. axisPointer: {
  78. type: 'cross'
  79. }
  80. },
  81. xAxis: {
  82. splitLine: {
  83. lineStyle: {
  84. type: 'dashed'
  85. }
  86. },
  87. splitNumber: 20
  88. },
  89. yAxis: {
  90. min: -40,
  91. splitLine: {
  92. lineStyle: {
  93. type: 'dashed'
  94. }
  95. }
  96. },
  97. series: [{
  98. name: 'scatter',
  99. type: 'scatter'
  100. }, {
  101. name: 'line',
  102. type: 'line',
  103. smooth: true,
  104. datasetIndex: 1,
  105. symbolSize: 0.1,
  106. symbol: 'circle',
  107. label: { show: true, fontSize: 16 },
  108. labelLayout: { dx: -20 },
  109. encode: { label: 2, tooltip: 1 }
  110. }]
  111. };
  112. chart.setOption(option);
  113. });
  114. </script>
  115. </body>
  116. </html>