legend.js 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340
  1. describe('legend', function() {
  2. var uiHelper = window.uiHelper;
  3. var suites = [{
  4. name: 'show',
  5. cases: [{
  6. name: 'should display legend as default',
  7. option: {
  8. series: [{
  9. name: 'a',
  10. type: 'line',
  11. data: [1, 2, 4]
  12. }],
  13. xAxis: [{
  14. type: 'category',
  15. data: ['x','y','z']
  16. }],
  17. yAxis: [{
  18. type: 'value'
  19. }],
  20. legend: {
  21. data: ['a']
  22. }
  23. }
  24. }, {
  25. name: 'should hide legend when show set to be false',
  26. option: {
  27. series: [{
  28. name: 'a',
  29. type: 'line',
  30. data: [1, 2, 4]
  31. }],
  32. xAxis: [{
  33. type: 'category',
  34. data: ['x','y','z']
  35. }],
  36. yAxis: [{
  37. type: 'value'
  38. }],
  39. legend: {
  40. data: ['a'],
  41. show: false
  42. }
  43. }
  44. }]
  45. }, {
  46. name: 'left',
  47. cases: [{
  48. name: 'should display left position',
  49. option: {
  50. series: [{
  51. name: 'a',
  52. type: 'line',
  53. data: [1, 2, 4]
  54. }],
  55. xAxis: [{
  56. type: 'category',
  57. data: ['x','y','z']
  58. }],
  59. yAxis: [{
  60. type: 'value'
  61. }],
  62. legend: {
  63. data: ['a'],
  64. left: 'left'
  65. }
  66. }
  67. }, {
  68. name: 'should display at 20%',
  69. option: {
  70. series: [{
  71. name: 'a',
  72. type: 'line',
  73. data: [1, 2, 4]
  74. }],
  75. xAxis: [{
  76. type: 'category',
  77. data: ['x','y','z']
  78. }],
  79. yAxis: [{
  80. type: 'value'
  81. }],
  82. legend: {
  83. data: ['a'],
  84. left: '20%'
  85. }
  86. }
  87. }, {
  88. name: 'should display at center',
  89. option: {
  90. series: [{
  91. name: 'a',
  92. type: 'line',
  93. data: [1, 2, 4]
  94. }],
  95. xAxis: [{
  96. type: 'category',
  97. data: ['x','y','z']
  98. }],
  99. yAxis: [{
  100. type: 'value'
  101. }],
  102. legend: {
  103. data: ['a'],
  104. left: 'center'
  105. }
  106. }
  107. }, {
  108. name: 'should display at right',
  109. option: {
  110. series: [{
  111. name: 'a',
  112. type: 'line',
  113. data: [1, 2, 4]
  114. }],
  115. xAxis: [{
  116. type: 'category',
  117. data: ['x','y','z']
  118. }],
  119. yAxis: [{
  120. type: 'value'
  121. }],
  122. legend: {
  123. data: ['a'],
  124. left: 'right'
  125. }
  126. }
  127. }]
  128. }, {
  129. name: 'top',
  130. cases: [{
  131. name: 'should display top position',
  132. option: {
  133. series: [{
  134. name: 'a',
  135. type: 'line',
  136. data: [1, 2, 4]
  137. }],
  138. xAxis: [{
  139. type: 'category',
  140. data: ['x','y','z']
  141. }],
  142. yAxis: [{
  143. type: 'value'
  144. }],
  145. legend: {
  146. data: ['a'],
  147. top: 50
  148. }
  149. }
  150. }, {
  151. name: 'should display at 20%',
  152. option: {
  153. series: [{
  154. name: 'a',
  155. type: 'line',
  156. data: [1, 2, 4]
  157. }],
  158. xAxis: [{
  159. type: 'category',
  160. data: ['x','y','z']
  161. }],
  162. yAxis: [{
  163. type: 'value'
  164. }],
  165. legend: {
  166. data: ['a'],
  167. top: '20%'
  168. }
  169. }
  170. }, {
  171. name: 'should display at middle',
  172. option: {
  173. series: [{
  174. name: 'a',
  175. type: 'line',
  176. data: [1, 2, 4]
  177. }],
  178. xAxis: [{
  179. type: 'category',
  180. data: ['x','y','z']
  181. }],
  182. yAxis: [{
  183. type: 'value'
  184. }],
  185. legend: {
  186. data: ['a'],
  187. top: 'middle'
  188. }
  189. }
  190. }, {
  191. name: 'should display at bottom',
  192. option: {
  193. series: [{
  194. name: 'a',
  195. type: 'line',
  196. data: [1, 2, 4]
  197. }],
  198. xAxis: [{
  199. type: 'category',
  200. data: ['x','y','z']
  201. }],
  202. yAxis: [{
  203. type: 'value'
  204. }],
  205. legend: {
  206. data: ['a'],
  207. top: 'bottom'
  208. }
  209. }
  210. }]
  211. }, {
  212. name: 'right',
  213. cases: [{
  214. name: 'should display right position',
  215. option: {
  216. series: [{
  217. name: 'a',
  218. type: 'line',
  219. data: [1, 2, 4]
  220. }],
  221. xAxis: [{
  222. type: 'category',
  223. data: ['x','y','z']
  224. }],
  225. yAxis: [{
  226. type: 'value'
  227. }],
  228. legend: {
  229. data: ['a'],
  230. right: 50
  231. }
  232. }
  233. }]
  234. }, {
  235. name: 'left and right',
  236. cases: [{
  237. name: 'are both set',
  238. test: 'equalOption',
  239. option1: {
  240. series: [{
  241. name: 'a',
  242. type: 'line',
  243. data: [1, 2, 4]
  244. }],
  245. xAxis: [{
  246. type: 'category',
  247. data: ['x','y','z']
  248. }],
  249. yAxis: [{
  250. type: 'value'
  251. }],
  252. legend: {
  253. data: ['a'],
  254. left: 50,
  255. right: 50
  256. }
  257. },
  258. option2: {
  259. series: [{
  260. name: 'a',
  261. type: 'line',
  262. data: [1, 2, 4]
  263. }],
  264. xAxis: [{
  265. type: 'category',
  266. data: ['x','y','z']
  267. }],
  268. yAxis: [{
  269. type: 'value'
  270. }],
  271. legend: {
  272. data: ['a'],
  273. left: 50
  274. }
  275. }
  276. }]
  277. }, {
  278. name: 'top and bottom',
  279. cases: [{
  280. name: 'are both set',
  281. test: 'equalOption',
  282. option1: {
  283. series: [{
  284. name: 'a',
  285. type: 'line',
  286. data: [1, 2, 4]
  287. }],
  288. xAxis: [{
  289. type: 'category',
  290. data: ['x','y','z']
  291. }],
  292. yAxis: [{
  293. type: 'value'
  294. }],
  295. legend: {
  296. data: ['a'],
  297. top: 50,
  298. bottom: 50
  299. }
  300. },
  301. option2: {
  302. series: [{
  303. name: 'a',
  304. type: 'line',
  305. data: [1, 2, 4]
  306. }],
  307. xAxis: [{
  308. type: 'category',
  309. data: ['x','y','z']
  310. }],
  311. yAxis: [{
  312. type: 'value'
  313. }],
  314. legend: {
  315. data: ['a'],
  316. top: 50
  317. }
  318. }
  319. }]
  320. }, {
  321. name: 'width',
  322. cases: [{
  323. name: 'should display in seperate lines',
  324. test: 'notEqualOption',
  325. option1: {
  326. series: [{
  327. name: 'this is a',
  328. type: 'line',
  329. data: []
  330. }, {
  331. name: 'this is b ...',
  332. type: 'line',
  333. data: []
  334. }, {
  335. name: 'this is c ... ...',
  336. type: 'line',
  337. data: []
  338. }],
  339. xAxis: [{
  340. type: 'category',
  341. data: ['x','y','z']
  342. }],
  343. yAxis: [{
  344. type: 'value'
  345. }],
  346. legend: {
  347. data: ['this is a', 'this is b ...',
  348. 'this is c ... ...'],
  349. width: 200
  350. }
  351. },
  352. option2: {
  353. series: [{
  354. name: 'this is a',
  355. type: 'line',
  356. data: []
  357. }, {
  358. name: 'this is b ...',
  359. type: 'line',
  360. data: []
  361. }, {
  362. name: 'this is c ... ...',
  363. type: 'line',
  364. data: []
  365. }],
  366. xAxis: [{
  367. type: 'category',
  368. data: ['x','y','z']
  369. }],
  370. yAxis: [{
  371. type: 'value'
  372. }],
  373. legend: {
  374. data: ['this is a', 'this is b ...',
  375. 'this is c ... ...']
  376. }
  377. }
  378. }]
  379. }, {
  380. name: 'hight',
  381. cases: [{
  382. name: 'should display in seperate lines',
  383. test: 'notEqualOption',
  384. option1: {
  385. series: [{
  386. name: 'this is a',
  387. type: 'line',
  388. data: []
  389. }, {
  390. name: 'this is b ...',
  391. type: 'line',
  392. data: []
  393. }, {
  394. name: 'this is c ... ...',
  395. type: 'line',
  396. data: []
  397. }],
  398. xAxis: [{
  399. type: 'category',
  400. data: ['x','y','z']
  401. }],
  402. yAxis: [{
  403. type: 'value'
  404. }],
  405. legend: {
  406. data: ['this is a', 'this is b ...',
  407. 'this is c ... ...'],
  408. height: 50,
  409. orient: 'vertical'
  410. }
  411. },
  412. option2: {
  413. series: [{
  414. name: 'this is a',
  415. type: 'line',
  416. data: []
  417. }, {
  418. name: 'this is b ...',
  419. type: 'line',
  420. data: []
  421. }, {
  422. name: 'this is c ... ...',
  423. type: 'line',
  424. data: []
  425. }],
  426. xAxis: [{
  427. type: 'category',
  428. data: ['x','y','z']
  429. }],
  430. yAxis: [{
  431. type: 'value'
  432. }],
  433. legend: {
  434. data: ['this is a', 'this is b ...',
  435. 'this is c ... ...'],
  436. orient: 'vertical'
  437. }
  438. }
  439. }]
  440. }, {
  441. name: 'orient',
  442. cases: [{
  443. name: 'should display horizontally',
  444. option: {
  445. series: [{
  446. name: 'this is a',
  447. type: 'line',
  448. data: []
  449. }, {
  450. name: 'this is b ...',
  451. type: 'line',
  452. data: []
  453. }, {
  454. name: 'this is c ... ...',
  455. type: 'line',
  456. data: []
  457. }],
  458. xAxis: [{
  459. type: 'category',
  460. data: ['x','y','z']
  461. }],
  462. yAxis: [{
  463. type: 'value'
  464. }],
  465. legend: {
  466. data: ['this is a', 'this is b ...',
  467. 'this is c ... ...'],
  468. orient: 'horizontal'
  469. }
  470. }
  471. }, {
  472. name: 'should display vertically',
  473. option: {
  474. series: [{
  475. name: 'this is a',
  476. type: 'line',
  477. data: []
  478. }, {
  479. name: 'this is b ...',
  480. type: 'line',
  481. data: []
  482. }, {
  483. name: 'this is c ... ...',
  484. type: 'line',
  485. data: []
  486. }],
  487. xAxis: [{
  488. type: 'category',
  489. data: ['x','y','z']
  490. }],
  491. yAxis: [{
  492. type: 'value'
  493. }],
  494. legend: {
  495. data: ['this is a', 'this is b ...',
  496. 'this is c ... ...'],
  497. orient: 'vertical'
  498. }
  499. }
  500. }, {
  501. name: 'should display different with horizontal and vertical',
  502. test: 'notEqualOption',
  503. option1: {
  504. series: [{
  505. name: 'this is a',
  506. type: 'line',
  507. data: []
  508. }, {
  509. name: 'this is b ...',
  510. type: 'line',
  511. data: []
  512. }, {
  513. name: 'this is c ... ...',
  514. type: 'line',
  515. data: []
  516. }],
  517. xAxis: [{
  518. type: 'category',
  519. data: ['x','y','z']
  520. }],
  521. yAxis: [{
  522. type: 'value'
  523. }],
  524. legend: {
  525. data: ['this is a', 'this is b ...',
  526. 'this is c ... ...'],
  527. orient: 'vertical'
  528. }
  529. },
  530. option2: {
  531. series: [{
  532. name: 'this is a',
  533. type: 'line',
  534. data: []
  535. }, {
  536. name: 'this is b ...',
  537. type: 'line',
  538. data: []
  539. }, {
  540. name: 'this is c ...',
  541. type: 'line',
  542. data: []
  543. }],
  544. xAxis: [{
  545. type: 'category',
  546. data: ['x','y','z']
  547. }],
  548. yAxis: [{
  549. type: 'value'
  550. }],
  551. legend: {
  552. data: ['this is a', 'this is b ...',
  553. 'this is c ... ...']
  554. }
  555. }
  556. }]
  557. }, {
  558. name: 'align',
  559. cases: [{
  560. name: 'should render correctly with align right',
  561. option: {
  562. series: [{
  563. name: 'this is a',
  564. type: 'line',
  565. data: []
  566. }, {
  567. name: 'this is b bbb',
  568. type: 'line',
  569. data: []
  570. }, {
  571. name: 'this is c ccc ccc',
  572. type: 'line',
  573. data: []
  574. }],
  575. xAxis: [{
  576. type: 'category',
  577. data: ['x','y','z']
  578. }],
  579. yAxis: [{
  580. type: 'value'
  581. }],
  582. legend: {
  583. data: ['this is a', 'this is b bbb',
  584. 'this is c ccc ccc'],
  585. left: 'right',
  586. height: 50,
  587. orient: 'vertical'
  588. }
  589. }
  590. }, {
  591. name: 'should align to right when left is right and orient is vertical',
  592. test: 'equalOption',
  593. option1: {
  594. series: [{
  595. name: 'this is a',
  596. type: 'line',
  597. data: []
  598. }, {
  599. name: 'this is b ...',
  600. type: 'line',
  601. data: []
  602. }, {
  603. name: 'this is c ... ...',
  604. type: 'line',
  605. data: []
  606. }],
  607. xAxis: [{
  608. type: 'category',
  609. data: ['x','y','z']
  610. }],
  611. yAxis: [{
  612. type: 'value'
  613. }],
  614. legend: {
  615. data: ['this is a', 'this is b ...',
  616. 'this is c ... ...'],
  617. left: 'right',
  618. orient: 'vertical'
  619. }
  620. },
  621. option2: {
  622. series: [{
  623. name: 'this is a',
  624. type: 'line',
  625. data: []
  626. }, {
  627. name: 'this is b ...',
  628. type: 'line',
  629. data: []
  630. }, {
  631. name: 'this is c ... ...',
  632. type: 'line',
  633. data: []
  634. }],
  635. xAxis: [{
  636. type: 'category',
  637. data: ['x','y','z']
  638. }],
  639. yAxis: [{
  640. type: 'value'
  641. }],
  642. legend: {
  643. data: ['this is a', 'this is b ...',
  644. 'this is c ... ...'],
  645. left: 'right',
  646. orient: 'vertical',
  647. align: 'right'
  648. }
  649. }
  650. }, {
  651. name: 'should align to right when left is right and orient is vertical with height',
  652. test: 'equalOption',
  653. option1: {
  654. series: [{
  655. name: 'a',
  656. type: 'line',
  657. data: []
  658. }, {
  659. name: 'b',
  660. type: 'line',
  661. data: []
  662. }, {
  663. name: 'c',
  664. type: 'line',
  665. data: []
  666. }],
  667. xAxis: [{
  668. type: 'category',
  669. data: ['x','y','z']
  670. }],
  671. yAxis: [{
  672. type: 'value'
  673. }],
  674. legend: {
  675. data: ['a', 'b', 'c'],
  676. left: 'right',
  677. height: 50,
  678. orient: 'vertical'
  679. }
  680. },
  681. option2: {
  682. series: [{
  683. name: 'a',
  684. type: 'line',
  685. data: []
  686. }, {
  687. name: 'b',
  688. type: 'line',
  689. data: []
  690. }, {
  691. name: 'c',
  692. type: 'line',
  693. data: []
  694. }],
  695. xAxis: [{
  696. type: 'category',
  697. data: ['x','y','z']
  698. }],
  699. yAxis: [{
  700. type: 'value'
  701. }],
  702. legend: {
  703. data: ['a', 'b', 'c'],
  704. left: 'right',
  705. orient: 'vertical',
  706. height: 50,
  707. align: 'right'
  708. }
  709. }
  710. }]
  711. }, {
  712. name: 'padding',
  713. cases: [{
  714. name: 'should display padding at 5px by default',
  715. test: 'equalOption',
  716. option1: {
  717. series: [{
  718. name: 'a',
  719. type: 'bar',
  720. }],
  721. xAxis: [{
  722. type: 'category',
  723. data: ['x','y','z']
  724. }],
  725. yAxis: [{
  726. type: 'value'
  727. }],
  728. legend: {
  729. data: ['a'],
  730. backgroundColor: 'yellow'
  731. }
  732. },
  733. option2: {
  734. series: [{
  735. name: 'a',
  736. type: 'bar',
  737. }],
  738. xAxis: [{
  739. type: 'category',
  740. data: ['x','y','z']
  741. }],
  742. yAxis: [{
  743. type: 'value'
  744. }],
  745. legend: {
  746. data: ['a'],
  747. padding: 5,
  748. backgroundColor: 'yellow'
  749. }
  750. }
  751. }, {
  752. name: 'should display padding with two values',
  753. test: 'equalOption',
  754. option1: {
  755. series: [{
  756. name: 'a',
  757. type: 'bar',
  758. }],
  759. xAxis: [{
  760. type: 'category',
  761. data: ['x','y','z']
  762. }],
  763. yAxis: [{
  764. type: 'value'
  765. }],
  766. legend: {
  767. data: ['a'],
  768. padding: [5, 10],
  769. backgroundColor: 'yellow'
  770. }
  771. },
  772. option2: {
  773. series: [{
  774. name: 'a',
  775. type: 'bar',
  776. }],
  777. xAxis: [{
  778. type: 'category',
  779. data: ['x','y','z']
  780. }],
  781. yAxis: [{
  782. type: 'value'
  783. }],
  784. legend: {
  785. data: ['a'],
  786. padding: [5, 10, 5, 10],
  787. backgroundColor: 'yellow'
  788. }
  789. }
  790. }]
  791. }, {
  792. name: 'itemGap',
  793. cases: [{
  794. name: 'should display itemGap at 10 by default',
  795. test: 'equalOption',
  796. option1: {
  797. series: [{
  798. name: 'a',
  799. type: 'bar',
  800. }, {
  801. name: 'b',
  802. type: 'bar',
  803. }],
  804. xAxis: [{
  805. type: 'category',
  806. data: ['x','y','z']
  807. }],
  808. yAxis: [{
  809. type: 'value'
  810. }],
  811. legend: {
  812. data: ['a', 'b'],
  813. backgroundColor: 'yellow'
  814. }
  815. },
  816. option2: {
  817. series: [{
  818. name: 'a',
  819. type: 'bar',
  820. }, {
  821. name: 'b',
  822. type: 'bar',
  823. }],
  824. xAxis: [{
  825. type: 'category',
  826. data: ['x','y','z']
  827. }],
  828. yAxis: [{
  829. type: 'value'
  830. }],
  831. legend: {
  832. data: ['a', 'b'],
  833. itemGap: 10,
  834. backgroundColor: 'yellow'
  835. }
  836. }
  837. }]
  838. }, {
  839. name: 'itemGap',
  840. cases: [{
  841. name: 'should display larger itemGap',
  842. test: 'notEqualOption',
  843. option1: {
  844. series: [{
  845. name: 'a',
  846. type: 'bar',
  847. }, {
  848. name: 'b',
  849. type: 'bar',
  850. }],
  851. xAxis: [{
  852. type: 'category',
  853. data: ['x','y','z']
  854. }],
  855. yAxis: [{
  856. type: 'value'
  857. }],
  858. legend: {
  859. data: ['a', 'b'],
  860. backgroundColor: 'yellow'
  861. }
  862. },
  863. option2: {
  864. series: [{
  865. name: 'a',
  866. type: 'bar',
  867. }, {
  868. name: 'b',
  869. type: 'bar',
  870. }],
  871. xAxis: [{
  872. type: 'category',
  873. data: ['x','y','z']
  874. }],
  875. yAxis: [{
  876. type: 'value'
  877. }],
  878. legend: {
  879. data: ['a', 'b'],
  880. itemGap: 100,
  881. backgroundColor: 'yellow'
  882. }
  883. }
  884. }]
  885. }, {
  886. name: 'itemGap',
  887. cases: [{
  888. name: 'should display larger itemGap into another line',
  889. test: 'notEqualOption',
  890. option1: {
  891. series: [{
  892. name: 'a',
  893. type: 'bar',
  894. }, {
  895. name: 'b',
  896. type: 'bar',
  897. }],
  898. xAxis: [{
  899. type: 'category',
  900. data: ['x','y','z']
  901. }],
  902. yAxis: [{
  903. type: 'value'
  904. }],
  905. legend: {
  906. data: ['a', 'b'],
  907. itemGap: 350,
  908. backgroundColor: 'yellow'
  909. }
  910. },
  911. option2: {
  912. series: [{
  913. name: 'a',
  914. type: 'bar',
  915. }, {
  916. name: 'b',
  917. type: 'bar',
  918. }],
  919. xAxis: [{
  920. type: 'category',
  921. data: ['x','y','z']
  922. }],
  923. yAxis: [{
  924. type: 'value'
  925. }],
  926. legend: {
  927. data: ['a', 'b'],
  928. backgroundColor: 'yellow'
  929. }
  930. }
  931. }]
  932. }, {
  933. name: 'itemWidth',
  934. cases: [{
  935. name: 'should have default value of 25',
  936. test: 'equalOption',
  937. option1: {
  938. series: [{
  939. name: 'a',
  940. type: 'bar',
  941. }, {
  942. name: 'b',
  943. type: 'bar',
  944. }],
  945. xAxis: [{
  946. type: 'category',
  947. data: []
  948. }],
  949. yAxis: [{
  950. type: 'value'
  951. }],
  952. legend: {
  953. data: ['a', 'b'],
  954. backgroundColor: 'yellow'
  955. }
  956. },
  957. option2: {
  958. series: [{
  959. name: 'a',
  960. type: 'bar',
  961. }, {
  962. name: 'b',
  963. type: 'bar',
  964. }],
  965. xAxis: [{
  966. type: 'category',
  967. data: []
  968. }],
  969. yAxis: [{
  970. type: 'value'
  971. }],
  972. legend: {
  973. data: ['a', 'b'],
  974. backgroundColor: 'yellow',
  975. itemWidth: 25
  976. }
  977. }
  978. }, {
  979. name: 'should have larger itemWidth',
  980. cases: (function() {
  981. var types = ['bar', 'line', 'scatter', 'effectScatter',
  982. 'radar'];
  983. var res = [];
  984. for (var i = 0; i < types.length; ++i) {
  985. res.push({
  986. name: types[i],
  987. option: {
  988. series: [{
  989. name: 'a',
  990. type: types[i],
  991. }, {
  992. name: 'b',
  993. type: types[i],
  994. }],
  995. xAxis: [{
  996. type: 'category',
  997. data: []
  998. }],
  999. yAxis: [{
  1000. type: 'value'
  1001. }],
  1002. legend: {
  1003. data: ['a', 'b'],
  1004. backgroundColor: 'yellow',
  1005. itemWidth: 50
  1006. }
  1007. }
  1008. });
  1009. }
  1010. res.push({
  1011. name: 'pie',
  1012. option: {
  1013. series: [{
  1014. type: 'pie',
  1015. data: [{
  1016. name: 'a'
  1017. }, {
  1018. name: 'b'
  1019. }, {
  1020. name: 'c'
  1021. }]
  1022. }],
  1023. legend: {
  1024. data: ['a', 'b', 'c'],
  1025. backgroundColor: 'yellow',
  1026. itemWidth: 50
  1027. }
  1028. }
  1029. })
  1030. return res;
  1031. })()
  1032. }]
  1033. }, {
  1034. name: 'itemHeight',
  1035. cases: [{
  1036. name: 'should have default value of 14',
  1037. test: 'equalOption',
  1038. option1: {
  1039. series: [{
  1040. name: 'a',
  1041. type: 'bar',
  1042. }, {
  1043. name: 'b',
  1044. type: 'bar',
  1045. }],
  1046. xAxis: [{
  1047. type: 'category',
  1048. data: []
  1049. }],
  1050. yAxis: [{
  1051. type: 'value'
  1052. }],
  1053. legend: {
  1054. data: ['a', 'b'],
  1055. backgroundColor: 'yellow'
  1056. }
  1057. },
  1058. option2: {
  1059. series: [{
  1060. name: 'a',
  1061. type: 'bar',
  1062. }, {
  1063. name: 'b',
  1064. type: 'bar',
  1065. }],
  1066. xAxis: [{
  1067. type: 'category',
  1068. data: []
  1069. }],
  1070. yAxis: [{
  1071. type: 'value'
  1072. }],
  1073. legend: {
  1074. data: ['a', 'b'],
  1075. backgroundColor: 'yellow',
  1076. itemHeight: 14
  1077. }
  1078. }
  1079. }, {
  1080. name: 'should have larger itemHeight',
  1081. cases: (function() {
  1082. var types = ['bar', 'line', 'scatter', 'effectScatter',
  1083. 'radar'];
  1084. var res = [];
  1085. for (var i = 0; i < types.length; ++i) {
  1086. res.push({
  1087. name: types[i],
  1088. option: {
  1089. series: [{
  1090. name: 'a',
  1091. type: types[i],
  1092. }, {
  1093. name: 'b',
  1094. type: types[i],
  1095. }],
  1096. xAxis: [{
  1097. type: 'category',
  1098. data: []
  1099. }],
  1100. yAxis: [{
  1101. type: 'value'
  1102. }],
  1103. legend: {
  1104. data: ['a', 'b'],
  1105. backgroundColor: 'yellow',
  1106. itemHeight: 30
  1107. }
  1108. }
  1109. });
  1110. }
  1111. res.push({
  1112. name: 'pie',
  1113. option: {
  1114. series: [{
  1115. type: 'pie',
  1116. data: [{
  1117. name: 'a'
  1118. }, {
  1119. name: 'b'
  1120. }, {
  1121. name: 'c'
  1122. }]
  1123. }],
  1124. legend: {
  1125. data: ['a', 'b', 'c'],
  1126. backgroundColor: 'yellow',
  1127. itemHeight: 30
  1128. }
  1129. }
  1130. })
  1131. return res;
  1132. })()
  1133. }]
  1134. }, {
  1135. name: 'formatter',
  1136. cases: [{
  1137. name: 'should have default value as null',
  1138. test: 'equalOption',
  1139. option1: {
  1140. series: [{
  1141. name: 'abc',
  1142. type: 'pie',
  1143. data: []
  1144. }],
  1145. legend: {
  1146. data: ['abc']
  1147. }
  1148. },
  1149. option2: {
  1150. series: [{
  1151. name: 'abc',
  1152. type: 'pie',
  1153. data: []
  1154. }],
  1155. legend: {
  1156. data: ['abc'],
  1157. formatter: null
  1158. }
  1159. }
  1160. }, {
  1161. name: 'should work with string formatter',
  1162. option: {
  1163. series: [{
  1164. name: 'abc',
  1165. type: 'pie',
  1166. data: []
  1167. }],
  1168. legend: {
  1169. data: ['abc'],
  1170. formatter: '{name} series'
  1171. }
  1172. }
  1173. }, {
  1174. name: 'should work with callback formatter',
  1175. test: 'equalOption',
  1176. option1: {
  1177. series: [{
  1178. name: 'abc',
  1179. type: 'pie',
  1180. data: []
  1181. }],
  1182. legend: {
  1183. data: ['abc'],
  1184. formatter: function(name) {
  1185. return name + ' series';
  1186. }
  1187. }
  1188. },
  1189. option2: {
  1190. series: [{
  1191. name: 'abc',
  1192. type: 'pie',
  1193. data: []
  1194. }],
  1195. legend: {
  1196. data: ['abc'],
  1197. formatter: '{name} series'
  1198. }
  1199. }
  1200. }]
  1201. }, {
  1202. name: 'inactiveColor',
  1203. cases: [{
  1204. name: 'should have default value as #ccc',
  1205. test: 'equalOption',
  1206. option1: {
  1207. series: [{
  1208. name: 'a',
  1209. type: 'pie',
  1210. data: []
  1211. }],
  1212. legend: {
  1213. data: ['a'],
  1214. selected: {
  1215. a: false
  1216. }
  1217. }
  1218. },
  1219. option2: {
  1220. series: [{
  1221. name: 'a',
  1222. type: 'pie',
  1223. data: []
  1224. }],
  1225. legend: {
  1226. data: ['a'],
  1227. selected: {
  1228. a: false
  1229. },
  1230. inactiveColor: '#ccc'
  1231. }
  1232. }
  1233. }, {
  1234. name: 'can be changed to other color',
  1235. option: {
  1236. series: [{
  1237. name: 'a',
  1238. type: 'pie',
  1239. data: []
  1240. }],
  1241. legend: {
  1242. data: ['a'],
  1243. selected: {
  1244. a: false
  1245. },
  1246. inactiveColor: '#f00'
  1247. }
  1248. }
  1249. }]
  1250. }, {
  1251. name: 'selected',
  1252. cases: [{
  1253. name: 'should select all by default',
  1254. test: 'equalOption',
  1255. option1: {
  1256. series: [{
  1257. type: 'pie',
  1258. data: [{
  1259. name: 'a'
  1260. }, {
  1261. name: 'b'
  1262. }, {
  1263. name: 'c'
  1264. }]
  1265. }],
  1266. legend: {
  1267. data: ['a', 'b', 'c']
  1268. }
  1269. },
  1270. option2: {
  1271. series: [{
  1272. type: 'pie',
  1273. data: [{
  1274. name: 'a'
  1275. }, {
  1276. name: 'b'
  1277. }, {
  1278. name: 'c'
  1279. }]
  1280. }],
  1281. legend: {
  1282. data: ['a', 'b', 'c'],
  1283. selected: {
  1284. a: true,
  1285. b: true,
  1286. c: true
  1287. }
  1288. }
  1289. }
  1290. }, {
  1291. name: 'should hide when selected is set to be false',
  1292. test: 'notEqualOption',
  1293. option1: {
  1294. series: [{
  1295. type: 'pie',
  1296. data: [{
  1297. name: 'a'
  1298. }, {
  1299. name: 'b'
  1300. }, {
  1301. name: 'c'
  1302. }]
  1303. }],
  1304. legend: {
  1305. data: ['a', 'b', 'c'],
  1306. selected: {
  1307. a: false,
  1308. b: true,
  1309. c: true
  1310. }
  1311. }
  1312. },
  1313. option2: {
  1314. series: [{
  1315. type: 'pie',
  1316. data: [{
  1317. name: 'a'
  1318. }, {
  1319. name: 'b'
  1320. }, {
  1321. name: 'c'
  1322. }]
  1323. }],
  1324. legend: {
  1325. data: ['a', 'b', 'c'],
  1326. selected: {
  1327. a: true,
  1328. b: true,
  1329. c: true
  1330. }
  1331. }
  1332. }
  1333. }]
  1334. }];
  1335. uiHelper.testOptionSpec('legend', suites, false);
  1336. });