dataZoom-axes.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  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. #main {
  10. position: relative;
  11. text-align: center;
  12. }
  13. .title {
  14. display: block;
  15. cursor: pointer;
  16. text-decoration: none;
  17. clear: both;
  18. text-align: center;
  19. margin: 0;
  20. background: #eef;
  21. line-height: 22px;
  22. }
  23. .block {
  24. display: inline-block;
  25. *display: inline;
  26. *zoom: 1;
  27. vertical-align: top;
  28. margin: 30px 0 30px 50px;
  29. }
  30. .block .ec {
  31. width: 800px;
  32. height: 240px;
  33. }
  34. .block .info {
  35. display: block;
  36. text-align: left;
  37. background: #eee;
  38. border-radius: 3px;
  39. font-size: 12px;
  40. line-height: 18px;
  41. padding: 0 5px;
  42. }
  43. .block .info td {
  44. font-size: 12px;
  45. border: 1px solid #bbb;
  46. padding: 1px 3px;
  47. }
  48. strong {
  49. color: red;
  50. font-weight: bold;
  51. font-size: 18px;
  52. padding: 0 3px;
  53. }
  54. </style>
  55. <div id="main"></div>
  56. <script>
  57. var echarts;
  58. var zrUtil;
  59. var charts = [];
  60. var els = [];
  61. require([
  62. 'echarts',
  63. 'zrender/core/util',
  64. 'echarts/chart/line',
  65. 'echarts/chart/scatter',
  66. 'echarts/component/legend',
  67. 'echarts/component/grid',
  68. 'echarts/component/tooltip',
  69. 'echarts/component/toolbox',
  70. 'echarts/component/dataZoom'
  71. ], function (ec, zu) {
  72. echarts = ec;
  73. zrUtil = zu;
  74. renderTitle('Order sensitive in processing: no min/max on y (<strong>Try zooming y slider to check if normal</strong>)');
  75. makeChart(getOption(
  76. makeSpecialTrendData(),
  77. {
  78. xAxisType: 'value',
  79. xStart: 15,
  80. xEnd: 80,
  81. yScale: true,
  82. symbolSize: 5
  83. }
  84. ), 500);
  85. renderTitle('Order sensitive in processing: min/max set on y (<strong>Try zooming y slider to check if normal</strong>)');
  86. makeChart(getOption(
  87. makeSpecialTrendData(),
  88. {
  89. xAxisType: 'value',
  90. xStart: 15,
  91. xEnd: 80,
  92. yScale: true,
  93. symbolSize: 5,
  94. yMin: 500,
  95. yMax: 3000
  96. }
  97. ), 500);
  98. renderTitle('Order sensitive in processing: only max set on y and scale (<strong>Try zooming y slider to check if normal</strong>)');
  99. makeChart(getOption(
  100. makeSpecialTrendData(),
  101. {
  102. xAxisType: 'value',
  103. xStart: 15,
  104. xEnd: 80,
  105. yScale: true,
  106. symbolSize: 5,
  107. yMax: 3000
  108. }
  109. ), 500);
  110. renderTitle('Order sensitive in processing: only max set on y and no scale (<strong>Try zooming y slider to check if normal</strong>)');
  111. makeChart(getOption(
  112. makeSpecialTrendData(),
  113. {
  114. xAxisType: 'value',
  115. xStart: 15,
  116. xEnd: 80,
  117. yScale: false,
  118. symbolSize: 5,
  119. yMax: 3000
  120. }
  121. ), 500);
  122. });
  123. function makeSpecialTrendData() {
  124. var data = {data1: []};
  125. var base = -100;
  126. for (var i = 0; i < 50; i++) {
  127. if (i < 10) {
  128. data.data1.push([i * 10, base += 197 + random(3)]);
  129. }
  130. else if (i < 20) {
  131. data.data1.push([i * 10, base -= 17 + random(3)]);
  132. }
  133. else if (i < 30) {
  134. data.data1.push([i * 10, base += 3 + random(3)]);
  135. }
  136. else if (i < 40) {
  137. data.data1.push([i * 10, base -= 5 + random(3)]);
  138. }
  139. else {
  140. data.data1.push([i * 10, base += 157 + random(3)]);
  141. }
  142. }
  143. return data;
  144. }
  145. function renderTitle(label) {
  146. var containerEl = document.getElementById('main');
  147. var el = document.createElement('a');
  148. el.className = 'title';
  149. var html = label; // label is html
  150. el.innerHTML = html;
  151. el.href = '#' + html.replace(/\s/g, '_');
  152. el.name = html.replace(/\s/g, '_');
  153. containerEl.appendChild(el);
  154. }
  155. function makeChart(opt, height) {
  156. var heightStyle = height ? ' style="height:' + height + 'px;" ' : '';
  157. var containerEl = document.getElementById('main');
  158. var el = document.createElement('div');
  159. el.className = 'block';
  160. el.innerHTML = '<div ' + heightStyle + ' class="ec"></div><div class="info"></div>';
  161. containerEl.appendChild(el);
  162. var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
  163. chart.setOption(opt);
  164. charts.push(chart);
  165. els.push(el);
  166. chart.on('dataZoom', zrUtil.curry(renderProp, chart, el, false));
  167. renderProp(chart, el, true);
  168. }
  169. function renderProp(chart, el, isInit) {
  170. var resultOpt = chart.getOption();
  171. var dataZoomOpt = zrUtil.map(resultOpt.dataZoom, function (rawOpt) {
  172. return ''
  173. + '<tr>'
  174. + '<td>name:</td><td>' + encodeHTML(rawOpt.name) + '</td>'
  175. + '<td>start:</td><td>' + encodeHTML(rawOpt.start) + '</td>'
  176. + '<td>end:</td><td>' + encodeHTML(rawOpt.end) + '</td>'
  177. + '<td>startValue:</td><td>' + encodeHTML(rawOpt.startValue) + '</td>'
  178. + '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>'
  179. + '</tr>';
  180. });
  181. el.lastChild.innerHTML = ''
  182. + (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>'
  183. + '<table><tbody>' + dataZoomOpt.join('') + '</tbody></table>';
  184. }
  185. function encodeHTML(source) {
  186. return source == null
  187. ? ''
  188. : String(source)
  189. .replace(/&/g, '&amp;')
  190. .replace(/</g, '&lt;')
  191. .replace(/>/g, '&gt;')
  192. .replace(/"/g, '&quot;')
  193. .replace(/'/g, '&#39;');
  194. }
  195. function random(max) {
  196. return +(Math.random() * max).toFixed(3);
  197. };
  198. function getOption(data, args) {
  199. args = zrUtil.defaults(
  200. args || {},
  201. {
  202. symbol: null,
  203. xStart: 1,
  204. xEnd: 5,
  205. yStart: 0,
  206. yEnd: 100,
  207. yFitlerMode: 'empty',
  208. symbolSize: 10
  209. }
  210. );
  211. var option = {
  212. animation: false,
  213. legend: {
  214. data: ['n1', 'n2']
  215. },
  216. toolbox: {
  217. feature: {
  218. dataView: {},
  219. dataZoom: {show: true},
  220. restore: {show: true},
  221. saveAsImage: {}
  222. }
  223. },
  224. tooltip: {
  225. trigger: 'axis'
  226. },
  227. xAxis: {
  228. type: args.xAxisType,
  229. splitLine: {
  230. show: true
  231. },
  232. data: args.xAxisData
  233. },
  234. yAxis: {
  235. scale: args.yScale,
  236. type: 'value',
  237. min: args.yMin,
  238. max: args.yMax,
  239. splitLine: {
  240. show: true
  241. }
  242. },
  243. dataZoom: [
  244. {
  245. id: 'xSlider',
  246. name: 'xSlider',
  247. show: true,
  248. filterMode: args.xFilterMode,
  249. xAxisIndex: [0],
  250. start: args.xStart,
  251. end: args.xEnd
  252. },
  253. {
  254. name: 'ySlider',
  255. show: true,
  256. filterMode: args.yFitlerMode,
  257. yAxisIndex: [0],
  258. start: args.yStart,
  259. end: args.yEnd
  260. },
  261. {
  262. name: 'xInside',
  263. type: 'inside',
  264. filterMode: args.xFilterMode,
  265. xAxisIndex: [0],
  266. start: args.xStart,
  267. end: args.xEnd
  268. },
  269. {
  270. name: 'yInside',
  271. type: 'inside',
  272. filterMode: args.yFilterMode,
  273. yAxisIndex: [0],
  274. start: args.yStart,
  275. end: args.yEnd
  276. }
  277. ],
  278. series: [
  279. {
  280. name: 'n1',
  281. type: 'line',
  282. symbolSize: args.symbolSize,
  283. symbol: args.symbol,
  284. data: data.data1
  285. },
  286. {
  287. name: 'n2',
  288. type: 'line',
  289. symbol: args.symbol,
  290. symbolSize: args.symbolSize,
  291. data: data.data2
  292. }
  293. ]
  294. };
  295. if (!data.data2) {
  296. option.series.splice(1, 1);
  297. }
  298. return option;
  299. }
  300. </script>
  301. </body>
  302. </html>