regression_exponential.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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. var chart = echarts.init(document.getElementById('main'));
  26. var dataSH = [
  27. [1, 4862.4],
  28. [2, 5294.7],
  29. [3, 5934.5],
  30. [4, 7171.0],
  31. [5, 8964.4],
  32. [6, 10202.2],
  33. [7, 11962.5],
  34. [8, 14928.3],
  35. [9, 16909.2],
  36. [10, 18547.9],
  37. [11, 21617.8],
  38. [12, 26638.1],
  39. [13, 34634.4],
  40. [14, 46759.4],
  41. [15, 58478.1],
  42. [16, 67884.6],
  43. [17, 74462.6],
  44. [18, 79395.7]
  45. ];
  46. var myRegression = ecStat.regression('exponential', dataSH);
  47. myRegression.points.sort(function (a, b) {
  48. return a[0] - b[0];
  49. });
  50. chart.setOption({
  51. title: {
  52. text: '1981至1998年国内生产总值GDP(万亿元)',
  53. left: 'center',
  54. top: 21
  55. },
  56. tooltip: {
  57. trigger: 'axis',
  58. axisPointer: {
  59. type: 'cross'
  60. }
  61. },
  62. xAxis: {
  63. type: 'value',
  64. splitLine: {
  65. lineStyle: {
  66. type: 'dashed'
  67. }
  68. },
  69. splitNumber: 20
  70. },
  71. yAxis: {
  72. type: 'value',
  73. splitLine: {
  74. lineStyle: {
  75. type: 'dashed'
  76. }
  77. }
  78. },
  79. series: [{
  80. name: 'scatter',
  81. type: 'scatter',
  82. label: {
  83. emphasis: {
  84. show: true
  85. }
  86. },
  87. data: dataSH
  88. },{
  89. name: 'line',
  90. type: 'line',
  91. showSymbol: false,
  92. smooth: true,
  93. data: myRegression.points,
  94. markPoint: {
  95. itemStyle: {
  96. normal: {
  97. color: 'transparent'
  98. }
  99. },
  100. label: {
  101. normal: {
  102. show: true,
  103. formatter: myRegression.expression,
  104. textStyle: {
  105. color: '#333',
  106. fontSize: 14
  107. }
  108. }
  109. },
  110. data: [{
  111. coord: myRegression.points[myRegression.points.length - 1]
  112. }]
  113. }
  114. }]
  115. });
  116. });
  117. </script>
  118. </body>
  119. </html>