histogram_bar.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. window.onresize = function () {
  27. chart.resize();
  28. };
  29. // var height = [70, 65, 63, 72, 81, 83, 66, 75, 80, 75, 79, 76, 76, 69, 75, 74, 85, 86, 71, 64, 78, 80, 74, 72, 77, 81, 82, 80, 80, 80, 87];
  30. var girth = [8.3,8.6, 8.8, 10.5, 10.7, 10.8, 11.0, 11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9, 13.3, 13.7, 13.8, 14.0, 14.2, 14.5, 16.0, 16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6];
  31. var testdata = [0.87659, 0.68975, 0.78613];
  32. var bins = ecStat.histogram(girth);
  33. var option = {
  34. title: {
  35. text: 'Girths of Black Cherry Trees',
  36. left: 'center',
  37. top: 20
  38. },
  39. color: ['rgb(25, 183, 207)'],
  40. grid: {
  41. left: '3%',
  42. right: '3%',
  43. bottom: '3%',
  44. containLabel: true
  45. },
  46. xAxis: {
  47. // boundaryGap: '5%',
  48. scale: true, //这个一定要设,不然barWidth和bins对应不上
  49. },
  50. yAxis: {
  51. },
  52. series: [{
  53. name: 'height',
  54. type: 'bar',
  55. barWidth: '99.3%',
  56. // barCategoryGap: 0,
  57. label: {
  58. normal: {
  59. show: true,
  60. position: 'insideTop'
  61. }
  62. },
  63. data: bins.data
  64. }]
  65. };
  66. chart.setOption(option);
  67. });
  68. </script>
  69. </body>
  70. </html>