dataZoom-dataShadow1.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/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. });
  32. var data1dim = [];
  33. for (var i = 0; i < 2000; i++) {
  34. data1dim.push([i * Math.cos(i / 100), i * Math.sin(i / 100)]);
  35. }
  36. chart.setOption({
  37. animation: false,
  38. legend: {
  39. data: ['line', 'line2', 'line3']
  40. },
  41. tooltip: {
  42. },
  43. xAxis: {
  44. // position: 'top',
  45. type: 'value',
  46. // data: xAxisData,
  47. // boundaryGap: false
  48. },
  49. yAxis: {
  50. type: 'value',
  51. // inverse: true
  52. // data: xAxisData
  53. },
  54. series: [
  55. {
  56. name: 'line2',
  57. type: 'line',
  58. stack: 'all',
  59. symbol: 'none',
  60. data: data1dim
  61. // itemStyle: {
  62. // normal: {
  63. // areaStyle: {}
  64. // }
  65. // }
  66. }
  67. ],
  68. dataZoom: [
  69. {
  70. show: true,
  71. start: 60,
  72. filterMode: 'empty'
  73. },
  74. {
  75. show: true,
  76. orient: 'vertical',
  77. filterMode: 'empty'
  78. }
  79. ]
  80. });
  81. })
  82. </script>
  83. </body>
  84. </html>