regression_linear.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. $.getJSON('../data/regression_data0.json')
  27. .done(function (data) {
  28. var myRegression = ecStat.regression('linear', data);
  29. chart.setOption({
  30. tooltip: {
  31. trigger: 'axis',
  32. axisPointer: {
  33. type: 'cross'
  34. }
  35. },
  36. xAxis: {
  37. type: 'value',
  38. splitLine: {
  39. lineStyle: {
  40. type: 'dashed'
  41. }
  42. },
  43. },
  44. yAxis: {
  45. type: 'value',
  46. min: 1.5,
  47. splitLine: {
  48. lineStyle: {
  49. type: 'dashed'
  50. }
  51. },
  52. },
  53. series: [{
  54. name: 'scatter',
  55. type: 'scatter',
  56. label: {
  57. emphasis: {
  58. show: true
  59. }
  60. },
  61. data: data
  62. },{
  63. name: 'line',
  64. type: 'line',
  65. showSymbol: false,
  66. data: myRegression.points,
  67. markPoint: {
  68. itemStyle: {
  69. normal: {
  70. color: 'transparent'
  71. }
  72. },
  73. label: {
  74. normal: {
  75. show: true,
  76. formatter: myRegression.expression,
  77. textStyle: {
  78. color: '#333',
  79. fontSize: 14
  80. }
  81. }
  82. },
  83. data: [{
  84. coord: myRegression.points[myRegression.points.length - 1]
  85. }]
  86. }
  87. }]
  88. });
  89. });
  90. });
  91. </script>
  92. </body>
  93. </html>