tooltipTestHelper.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  1. /*jshint unused:false*/
  2. /*jshint camelcase:false*/
  3. function createChart(id, echarts, option, height) {
  4. return window.testHelper.createChart(echarts, id, option, height);
  5. }
  6. function extend(target, source) {
  7. for (var key in source) {
  8. if (source.hasOwnProperty(key)) {
  9. target[key] = source[key];
  10. }
  11. }
  12. return target;
  13. }
  14. function makeCategoryData(scale, catePrefix, dataCount) {
  15. var categoryData = [];
  16. var data1 = [];
  17. var data2 = [];
  18. var data3 = [];
  19. scale = scale || 1;
  20. catePrefix = catePrefix || 'category';
  21. dataCount = dataCount || 10;
  22. categoryData.push(catePrefix + -1);
  23. data1.push('-');
  24. data2.push('-');
  25. data3.push('-');
  26. for (var i = 0; i < 5; i++) {
  27. categoryData.push(catePrefix + i);
  28. data1.push(((-Math.random() - 0.2) * scale).toFixed(3));
  29. data2.push(((Math.random() + 0.3) * scale).toFixed(3));
  30. data3.push(((Math.random() + 0.2) * scale).toFixed(3));
  31. }
  32. categoryData.push(catePrefix + i);
  33. data1.push('-');
  34. data2.push('-');
  35. data3.push('-');
  36. for (; i < dataCount - 1; i++) {
  37. categoryData.push(catePrefix + i);
  38. data1.push(((-Math.random() - 0.2) * scale).toFixed(3));
  39. data2.push(((Math.random() + 0.3) * scale).toFixed(3));
  40. data3.push(((Math.random() + 0.2) * scale).toFixed(3));
  41. }
  42. categoryData.push(catePrefix + i);
  43. data1.push('-');
  44. data2.push('-');
  45. data3.push('-');
  46. return {categoryData: categoryData, data1: data1, data2: data2, data3: data3};
  47. }
  48. function makeValueData() {
  49. var data1 = [];
  50. var data2 = [];
  51. var data3 = [];
  52. data1.push(['-', '-']);
  53. data2.push(['-', '-']);
  54. data3.push(['-', '-']);
  55. for (var i = 0; i < 5; i++) {
  56. data1.push([(Math.random() * 1000).toFixed(2), (-Math.random() - 0.4).toFixed(3)]);
  57. data2.push([(Math.random() * 1000).toFixed(2), (Math.random() + 1.8).toFixed(3)]);
  58. data3.push([(Math.random() * 1000).toFixed(2), (Math.random() + 0.2).toFixed(3)]);
  59. }
  60. data1.push(['-', '-']);
  61. data2.push(['-', '-']);
  62. data3.push(['-', '-']);
  63. for (; i < 10; i++) {
  64. data1.push([(Math.random() * 1000).toFixed(2), (-Math.random() - 0.2).toFixed(3)]);
  65. data2.push([(Math.random() * 1000).toFixed(2), (Math.random() + 0.3).toFixed(3)]);
  66. data3.push([(Math.random() * 1000).toFixed(2), (Math.random() + 0.2).toFixed(3)]);
  67. }
  68. data1.push(['-', '-']);
  69. data2.push(['-', '-']);
  70. data3.push(['-', '-']);
  71. return {data1: data1, data2: data2, data3: data3};
  72. }
  73. function makeTimeData() {
  74. var data1 = [];
  75. var data2 = [];
  76. var data3 = [];
  77. data1.push(['-', '-']);
  78. data2.push(['-', '-']);
  79. data3.push(['-', '-']);
  80. var day = 3600 * 1000 * 24;
  81. var time = +new Date(2017, 2, 15);
  82. for (var i = 0; i < 100; i++, time += day) {
  83. var d = new Date(time);
  84. var dayStr = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join('-');
  85. data1.push([dayStr, (-Math.random() - 0.2).toFixed(3)]);
  86. var val2 = (Math.random() + 0.3).toFixed(3);
  87. if (i >= 25 && i <= 30) {
  88. val2 = '-';
  89. }
  90. var val3 = (Math.random() + 0.2).toFixed(3);
  91. if (i >= 25 && i <= 30) {
  92. val3 = '-';
  93. }
  94. data2.push([dayStr, val2]);
  95. data3.push([dayStr, val3]);
  96. }
  97. return {data1: data1, data2: data2, data3: data3};
  98. }
  99. function getArray(obj, name) {
  100. return (obj[name] = obj[name] || []);
  101. }
  102. function makeCategoryPolar(option, patterns, inV) {
  103. var data = makeCategoryData();
  104. var key = Math.random().toFixed(5);
  105. option.legend = option.legend || {
  106. tooltip: {show: true}
  107. };
  108. getArray(option.legend, 'data').push('line1' + key, 'line2' + key, 'line3' + key);
  109. var polar = extend({}, patterns.polar);
  110. polar.id = 'polar' + key;
  111. getArray(option, 'polar').push(polar);
  112. var axisNames = ['radiusAxis', 'angleAxis'];
  113. inV && axisNames.reverse();
  114. getArray(option, axisNames[0]).push(extend({
  115. id: axisNames[0] + key,
  116. polarId: polar.id,
  117. data: data.categoryData,
  118. boundaryGap: false,
  119. splitArea: {
  120. show: true
  121. }
  122. }, patterns[axisNames[0]]));
  123. getArray(option, axisNames[1]).push(extend({
  124. id: axisNames[1] + key,
  125. polarId: polar.id,
  126. nameLocation: 'middle',
  127. nameGap: 40
  128. }, patterns[axisNames[1]]));
  129. var patternsSeries = patterns.series || [];
  130. getArray(option, 'series').push(
  131. extend({
  132. id: 'line1-id' + key,
  133. name: 'line1' + key,
  134. coordinateSystem: 'polar',
  135. polarId: polar.id,
  136. type: 'line',
  137. symbolSize: 10,
  138. data: data.data1,
  139. connectNulls: true
  140. }, patternsSeries[0]),
  141. extend({
  142. id: 'line2-id' + key,
  143. name: 'line2' + key,
  144. coordinateSystem: 'polar',
  145. polarId: polar.id,
  146. type: 'line',
  147. symbolSize: 10,
  148. data: data.data2
  149. }, patternsSeries[1]),
  150. extend({
  151. id: 'line3-id' + key,
  152. name: 'line3' + key,
  153. coordinateSystem: 'polar',
  154. polarId: polar.id,
  155. type: 'line',
  156. symbolSize: 10,
  157. symbol: 'circle',
  158. data: data.data3,
  159. label: {
  160. normal: {
  161. show: true
  162. }
  163. }
  164. }, patternsSeries[2])
  165. );
  166. }
  167. function makeCategoryGrid(option, patterns, inV, dataCount, seriesType, catePrefix) {
  168. var data = makeCategoryData(null, catePrefix, dataCount);
  169. var key = Math.random().toFixed(5);
  170. seriesType = seriesType || 'line';
  171. option.legend = option.legend || {
  172. tooltip: {show: true}
  173. };
  174. getArray(option.legend, 'data').push('line1' + key, 'line2' + key, 'line3' + key);
  175. var grid = extend({}, patterns.grid);
  176. grid.id = 'grid' + key;
  177. getArray(option, 'grid').push(grid);
  178. var axisNames = ['xAxis', 'yAxis'];
  179. inV && axisNames.reverse();
  180. getArray(option, axisNames[0]).push(extend({
  181. id: axisNames[0] + key,
  182. gridId: grid.id,
  183. data: data.categoryData,
  184. boundaryGap: false,
  185. splitArea: {
  186. show: true
  187. }
  188. }, patterns[axisNames[0]]));
  189. getArray(option, axisNames[1]).push(extend({
  190. id: axisNames[1] + key,
  191. gridId: grid.id,
  192. nameLocation: 'middle',
  193. nameGap: 40
  194. }, patterns[axisNames[1]]));
  195. var patternsSeries = patterns.series || [];
  196. getArray(option, 'series').push(
  197. extend({
  198. id: 'line1-id' + key,
  199. name: 'line1' + key,
  200. xAxisId: 'xAxis' + key,
  201. yAxisId: 'yAxis' + key,
  202. type: seriesType,
  203. symbolSize: 10,
  204. data: data.data1,
  205. smooth: true,
  206. connectNulls: true
  207. }, patternsSeries[0]),
  208. extend({
  209. id: 'line2-id' + key,
  210. name: 'line2' + key,
  211. xAxisId: 'xAxis' + key,
  212. yAxisId: 'yAxis' + key,
  213. type: seriesType,
  214. symbolSize: 10,
  215. data: data.data2,
  216. connectNulls: true,
  217. smooth: true
  218. }, patternsSeries[1]),
  219. extend({
  220. id: 'line3-id' + key,
  221. name: 'line3' + key,
  222. xAxisId: 'xAxis' + key,
  223. yAxisId: 'yAxis' + key,
  224. type: seriesType,
  225. symbolSize: 10,
  226. symbol: 'circle',
  227. data: data.data3,
  228. label: {
  229. normal: {
  230. show: true
  231. }
  232. },
  233. connectNulls: true,
  234. smooth: true
  235. }, patternsSeries[2])
  236. );
  237. }
  238. function makeValueGrid(option, patterns) {
  239. var data = makeValueData();
  240. var key = Math.random().toFixed(5);
  241. option.legend = option.legend || {
  242. tooltip: {show: true}
  243. };
  244. getArray(option.legend, 'data').push('line1' + key, 'line2' + key, 'line3' + key);
  245. var grid = extend({}, patterns.grid);
  246. grid.id = 'grid' + key;
  247. getArray(option, 'grid').push(grid);
  248. getArray(option, 'xAxis').push(extend({
  249. id: 'xAxis' + key,
  250. gridId: grid.id,
  251. type: 'value',
  252. splitArea: {
  253. show: true
  254. }
  255. }, patterns['xAxis']));
  256. getArray(option, 'yAxis').push(extend({
  257. id: 'yAxis' + key,
  258. gridId: grid.id,
  259. nameLocation: 'middle',
  260. nameGap: 40
  261. }, patterns['yAxis']));
  262. var patternsSeries = patterns.series || [];
  263. getArray(option, 'series').push(
  264. extend({
  265. id: 'scatter1-id' + key,
  266. name: 'scatter1' + key,
  267. xAxisId: 'xAxis' + key,
  268. yAxisId: 'yAxis' + key,
  269. type: 'scatter',
  270. symbolSize: 10,
  271. data: data.data1,
  272. smooth: true,
  273. connectNulls: true
  274. }, patternsSeries[0]),
  275. extend({
  276. id: 'scatter2-id' + key,
  277. name: 'scatter2' + key,
  278. xAxisId: 'xAxis' + key,
  279. yAxisId: 'yAxis' + key,
  280. type: 'scatter',
  281. symbolSize: 10,
  282. data: data.data2,
  283. connectNulls: true,
  284. smooth: true
  285. }, patternsSeries[1]),
  286. extend({
  287. id: 'scatter3-id' + key,
  288. name: 'scatter3' + key,
  289. xAxisId: 'xAxis' + key,
  290. yAxisId: 'yAxis' + key,
  291. type: 'scatter',
  292. symbolSize: 10,
  293. symbol: 'circle',
  294. data: data.data3,
  295. label: {
  296. normal: {
  297. show: true,
  298. textStyle: {color: '#333'}
  299. }
  300. },
  301. connectNulls: true,
  302. smooth: true
  303. }, patternsSeries[2])
  304. );
  305. }
  306. function makeTimeGrid(option, patterns) {
  307. var data = makeTimeData();
  308. var key = Math.random().toFixed(5);
  309. option.legend = option.legend || {
  310. tooltip: {show: true}
  311. };
  312. getArray(option.legend, 'data').push('scatter1' + key, 'scatter2' + key, 'scatter3' + key);
  313. var grid = extend({}, patterns.grid);
  314. grid.id = 'grid' + key;
  315. getArray(option, 'grid').push(grid);
  316. getArray(option, 'xAxis').push(extend({
  317. id: 'xAxis' + key,
  318. type: 'time',
  319. gridId: grid.id,
  320. splitArea: {
  321. show: true
  322. }
  323. }, patterns['xAxis']));
  324. getArray(option, 'yAxis').push(extend({
  325. id: 'yAxis' + key,
  326. gridId: grid.id,
  327. nameLocation: 'middle',
  328. nameGap: 40
  329. }, patterns['yAxis']));
  330. var patternsSeries = patterns.series || [];
  331. getArray(option, 'series').push(
  332. extend({
  333. id: 'scatter1-id' + key,
  334. name: 'scatter1' + key,
  335. xAxisId: 'xAxis' + key,
  336. yAxisId: 'yAxis' + key,
  337. type: 'line',
  338. symbolSize: 5,
  339. label: {
  340. emphasis: {
  341. show: true,
  342. textStyle: {
  343. color: '#333'
  344. }
  345. }
  346. },
  347. data: data.data1,
  348. smooth: true,
  349. connectNulls: true
  350. }, patternsSeries[0]),
  351. extend({
  352. id: 'scatter2-id' + key,
  353. name: 'scatter2' + key,
  354. xAxisId: 'xAxis' + key,
  355. yAxisId: 'yAxis' + key,
  356. type: 'line',
  357. symbolSize: 5,
  358. label: {
  359. emphasis: {
  360. show: true,
  361. textStyle: {
  362. color: '#333'
  363. }
  364. }
  365. },
  366. data: data.data2,
  367. connectNulls: true,
  368. smooth: true
  369. }, patternsSeries[1]),
  370. extend({
  371. id: 'scatter3-id' + key,
  372. name: 'scatter3' + key,
  373. xAxisId: 'xAxis' + key,
  374. yAxisId: 'yAxis' + key,
  375. type: 'line',
  376. symbolSize: 5,
  377. symbol: 'circle',
  378. data: data.data3,
  379. label: {
  380. emphasis: {
  381. show: true,
  382. textStyle: {
  383. color: '#333'
  384. }
  385. }
  386. },
  387. connectNulls: true,
  388. smooth: true
  389. }, patternsSeries[2])
  390. );
  391. }
  392. function makeCategoryCartesian(option, patterns, xAxisIndex, yAxisIndex, scale, catePrefix) {
  393. var data = makeCategoryData(scale, catePrefix);
  394. var key = Math.random().toFixed(5);
  395. var axisColors = [
  396. '#2f4554', '#c23531', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'
  397. ];
  398. if (option.___test_axisColorIndex == null) {
  399. option.___test_axisColorIndex = 0;
  400. }
  401. option.legend = option.legend || {
  402. tooltip: {show: true}
  403. };
  404. getArray(option.legend, 'data').push('line1' + key, 'line2' + key, 'line3' + key);
  405. var xAxes = getArray(option, 'xAxis');
  406. var yAxes = getArray(option, 'yAxis');
  407. if (!xAxes[xAxisIndex]) {
  408. xAxes[xAxisIndex] = extend({
  409. data: data.categoryData,
  410. boundaryGap: false,
  411. splitArea: {
  412. show: true
  413. },
  414. axisLine: {
  415. lineStyle: {
  416. color: axisColors[option.___test_axisColorIndex++]
  417. }
  418. }
  419. }, patterns['xAxis']);
  420. }
  421. if (!yAxes[yAxisIndex]) {
  422. yAxes[yAxisIndex] = extend({
  423. nameLocation: 'middle',
  424. nameGap: 40,
  425. axisLine: {
  426. lineStyle: {
  427. color: axisColors[option.___test_axisColorIndex++]
  428. }
  429. }
  430. }, patterns['yAxis']);
  431. }
  432. var patternsSeries = patterns.series || [];
  433. getArray(option, 'series').push(
  434. extend({
  435. id: 'line1-id' + key,
  436. name: 'line1' + key,
  437. xAxisIndex: xAxisIndex,
  438. yAxisIndex: yAxisIndex,
  439. type: 'line',
  440. symbolSize: 10,
  441. itemStyle: {
  442. normal: {
  443. color: yAxes[yAxisIndex].axisLine.lineStyle.color
  444. }
  445. },
  446. data: data.data1,
  447. smooth: true,
  448. connectNulls: true
  449. }, patternsSeries[0]),
  450. extend({
  451. id: 'line2-id' + key,
  452. name: 'line2' + key,
  453. xAxisIndex: xAxisIndex,
  454. yAxisIndex: yAxisIndex,
  455. itemStyle: {
  456. normal: {
  457. color: yAxes[yAxisIndex].axisLine.lineStyle.color
  458. }
  459. },
  460. type: 'line',
  461. symbolSize: 10,
  462. data: data.data2,
  463. connectNulls: true,
  464. smooth: true
  465. }, patternsSeries[1])
  466. );
  467. }