box5.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. var dom = document.getElementById("box5");
  2. var myChart = echarts.init(dom);
  3. var app = {};
  4. option = null;
  5. var dataCount = 5e5;
  6. var data = generateData(dataCount);
  7. var option = {
  8. title: {
  9. textStyle:{//图例文字的样式
  10. color:'#fff',
  11. fontSize:12
  12. },
  13. text: echarts.format.addCommas(dataCount) + ' Data',
  14. left: 10
  15. },
  16. toolbox: {
  17. feature: {
  18. dataZoom: {
  19. yAxisIndex: false
  20. },
  21. saveAsImage: {
  22. pixelRatio: 2
  23. }
  24. }
  25. },
  26. tooltip: {
  27. trigger: 'axis',
  28. axisPointer: {
  29. type: 'shadow'
  30. }
  31. },
  32. grid: {
  33. bottom: 90
  34. },
  35. dataZoom: [{
  36. type: 'inside'
  37. }, {
  38. type: 'slider'
  39. }],
  40. textStyle:{//图例文字的样式
  41. color:'#fff',
  42. fontSize:12
  43. },
  44. xAxis: {
  45. data: data.categoryData,
  46. silent: false,
  47. splitLine: {
  48. show: false
  49. },
  50. splitArea: {
  51. show: false
  52. }
  53. },
  54. yAxis: {
  55. splitArea: {
  56. show: false
  57. }
  58. },
  59. series: [{
  60. type: 'bar',
  61. data: data.valueData,
  62. // Set `large` for large data amount
  63. large: true
  64. }]
  65. };
  66. function generateData(count) {
  67. var baseValue = Math.random() * 1000;
  68. var time = +new Date(2011, 0, 1);
  69. var smallBaseValue;
  70. function next(idx) {
  71. smallBaseValue = idx % 30 === 0
  72. ? Math.random() * 700
  73. : (smallBaseValue + Math.random() * 500 - 250);
  74. baseValue += Math.random() * 20 - 10;
  75. return Math.max(
  76. 0,
  77. Math.round(baseValue + smallBaseValue) + 3000
  78. );
  79. }
  80. var categoryData = [];
  81. var valueData = [];
  82. for (var i = 0; i < count; i++) {
  83. categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
  84. valueData.push(next(i).toFixed(2));
  85. time += 1000;
  86. }
  87. return {
  88. categoryData: categoryData,
  89. valueData: valueData
  90. };
  91. }
  92. ;
  93. if (option && typeof option === "object") {
  94. myChart.setOption(option, true);
  95. }