dataZoom-dataShadow.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="config.js"></script>
  6. </head>
  7. <body>
  8. <style>
  9. html, body, #main {
  10. width: 100%;
  11. height: 100%;
  12. }
  13. body {
  14. margin: 0;
  15. }
  16. </style>
  17. <div id="main"></div>
  18. <script>
  19. require([
  20. 'echarts',
  21. 'echarts/chart/line',
  22. 'echarts/component/legend',
  23. 'echarts/component/grid',
  24. 'echarts/component/axis',
  25. 'echarts/component/dataZoom',
  26. 'echarts/component/tooltip',
  27. 'echarts/component/markPoint',
  28. 'echarts/component/markLine'
  29. ], function (echarts) {
  30. var chart = echarts.init(document.getElementById('main'), null, {
  31. renderer: 'canvas'
  32. });
  33. var xAxisData = [];
  34. var data1dim = [];
  35. var data2dim = [];
  36. var offset = 50;
  37. for (var i = 0; i < 200; i++) {
  38. xAxisData.push('类目' + i);
  39. if (i < 150) {
  40. var v = Math.log(i + 4) + offset;
  41. data1dim.push(v);
  42. // data2dim.push([i, v]);
  43. data2dim.push([v, i]);
  44. }
  45. else {
  46. var v = -Math.log(i + 19) + offset;
  47. data1dim.push(v);
  48. // data2dim.push([i, v]);
  49. data2dim.push([v, i]);
  50. }
  51. }
  52. chart.setOption({
  53. animation: false,
  54. legend: {
  55. data: ['line', 'line2', 'line3']
  56. },
  57. tooltip: {
  58. },
  59. xAxis: {
  60. // position: 'top',
  61. type: 'value',
  62. // data: xAxisData,
  63. // boundaryGap: false
  64. },
  65. yAxis: {
  66. type: 'category',
  67. // inverse: true
  68. data: xAxisData
  69. },
  70. series: [
  71. {
  72. name: 'line2',
  73. type: 'line',
  74. stack: 'all',
  75. symbol: 'none',
  76. data: data1dim,
  77. // data: data2dim,
  78. itemStyle: {
  79. normal: {
  80. areaStyle: {}
  81. }
  82. }
  83. }
  84. ],
  85. dataZoom: [
  86. {
  87. show: true,
  88. start: 60
  89. },
  90. {
  91. show: true,
  92. orient: 'vertical'
  93. }
  94. ]
  95. });
  96. })
  97. </script>
  98. </body>
  99. </html>