regression_exponential.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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 option = {
  28. dataset: [{
  29. source: [
  30. [1, 4862.4],
  31. [2, 5294.7],
  32. [3, 5934.5],
  33. [4, 7171.0],
  34. [5, 8964.4],
  35. [6, 10202.2],
  36. [7, 11962.5],
  37. [8, 14928.3],
  38. [9, 16909.2],
  39. [10, 18547.9],
  40. [11, 21617.8],
  41. [12, 26638.1],
  42. [13, 34634.4],
  43. [14, 46759.4],
  44. [15, 58478.1],
  45. [16, 67884.6],
  46. [17, 74462.6],
  47. [18, 79395.7]
  48. ]
  49. }, {
  50. transform: {
  51. type: 'ecStat:regression',
  52. config: {
  53. method: 'exponential',
  54. // 'end' by default
  55. // formulaOn: 'start'
  56. }
  57. }
  58. }],
  59. title: {
  60. text: '1981至1998年国内生产总值GDP(万亿元)',
  61. left: 'center',
  62. top: 21
  63. },
  64. tooltip: {
  65. trigger: 'axis',
  66. axisPointer: {
  67. type: 'cross'
  68. }
  69. },
  70. xAxis: {
  71. splitLine: {
  72. lineStyle: {
  73. type: 'dashed'
  74. }
  75. }
  76. },
  77. yAxis: {
  78. splitLine: {
  79. lineStyle: {
  80. type: 'dashed'
  81. }
  82. }
  83. },
  84. series: [{
  85. name: 'scatter',
  86. type: 'scatter',
  87. datasetIndex: 0
  88. },{
  89. name: 'line',
  90. type: 'line',
  91. smooth: true,
  92. datasetIndex: 1,
  93. symbolSize: 0.1,
  94. symbol: 'circle',
  95. label: { show: true, fontSize: 16 },
  96. labelLayout: { dx: -20 },
  97. encode: { label: 2, tooltip: 1 }
  98. }]
  99. };
  100. chart.setOption(option);
  101. });
  102. </script>
  103. </body>
  104. </html>