sunburst-drink.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729
  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. /* background-image: url(old_mathematics.png); */
  13. /* background-repeat: repeat; */
  14. }
  15. </style>
  16. <div id="main"></div>
  17. <script>
  18. var chart;
  19. require([
  20. 'echarts'
  21. ], function (echarts) {
  22. chart = echarts.init(document.getElementById('main'), null, {
  23. // renderer: 'svg'
  24. });
  25. var data = [{
  26. name: 'Flora',
  27. itemStyle: {
  28. color: '#da0d68'
  29. },
  30. children: [{
  31. name: 'Black Tea',
  32. value: 1,
  33. itemStyle: {
  34. color: '#975e6d'
  35. }
  36. }, {
  37. name: 'Floral',
  38. itemStyle: {
  39. color: '#e0719c'
  40. },
  41. children: [{
  42. name: 'Chamomile',
  43. value: 1,
  44. itemStyle: {
  45. color: '#f99e1c'
  46. }
  47. }, {
  48. name: 'Rose',
  49. value: 1,
  50. itemStyle: {
  51. color: '#ef5a78'
  52. }
  53. }, {
  54. name: 'Jasmine',
  55. value: 1,
  56. itemStyle: {
  57. color: '#f7f1bd'
  58. }
  59. }]
  60. }]
  61. }, {
  62. name: 'Fruity',
  63. itemStyle: {
  64. color: '#da1d23'
  65. },
  66. children: [{
  67. name: 'Berry',
  68. itemStyle: {
  69. color: '#dd4c51'
  70. },
  71. children: [{
  72. name: 'Blackberry',
  73. value: 1,
  74. itemStyle: {
  75. color: '#3e0317'
  76. }
  77. }, {
  78. name: 'Raspberry',
  79. value: 1,
  80. itemStyle: {
  81. color: '#e62969'
  82. }
  83. }, {
  84. name: 'Blueberry',
  85. value: 1,
  86. itemStyle: {
  87. color: '#6569b0'
  88. }
  89. }, {
  90. name: 'Strawberry',
  91. value: 1,
  92. itemStyle: {
  93. color: '#ef2d36'
  94. }
  95. }]
  96. }, {
  97. name: 'Dried Fruit',
  98. itemStyle: {
  99. color: '#c94a44'
  100. },
  101. children: [{
  102. name: 'Raisin',
  103. value: 1,
  104. itemStyle: {
  105. color: '#b53b54'
  106. }
  107. }, {
  108. name: 'Prune',
  109. value: 1,
  110. itemStyle: {
  111. color: '#a5446f'
  112. }
  113. }]
  114. }, {
  115. name: 'Other Fruit',
  116. itemStyle: {
  117. color: '#dd4c51'
  118. },
  119. children: [{
  120. name: 'Coconut',
  121. value: 1,
  122. itemStyle: {
  123. color: '#f2684b'
  124. }
  125. }, {
  126. name: 'Cherry',
  127. value: 1,
  128. itemStyle: {
  129. color: '#e73451'
  130. }
  131. }, {
  132. name: 'Pomegranate',
  133. value: 1,
  134. itemStyle: {
  135. color: '#e65656'
  136. }
  137. }, {
  138. name: 'Pineapple',
  139. value: 1,
  140. itemStyle: {
  141. color: '#f89a1c'
  142. }
  143. }, {
  144. name: 'Grape',
  145. value: 1,
  146. itemStyle: {
  147. color: '#aeb92c'
  148. }
  149. }, {
  150. name: 'Apple',
  151. value: 1,
  152. itemStyle: {
  153. color: '#4eb849'
  154. }
  155. }, {
  156. name: 'Peach',
  157. value: 1,
  158. itemStyle: {
  159. color: '#f68a5c'
  160. }
  161. }, {
  162. name: 'Pear',
  163. value: 1,
  164. itemStyle: {
  165. color: '#baa635'
  166. }
  167. }]
  168. }, {
  169. name: 'Citrus Fruit',
  170. itemStyle: {
  171. color: '#f7a128'
  172. },
  173. children: [{
  174. name: 'Grapefruit',
  175. value: 1,
  176. itemStyle: {
  177. color: '#f26355'
  178. }
  179. }, {
  180. name: 'Orange',
  181. value: 1,
  182. itemStyle: {
  183. color: '#e2631e'
  184. }
  185. }, {
  186. name: 'Lemon',
  187. value: 1,
  188. itemStyle: {
  189. color: '#fde404'
  190. }
  191. }, {
  192. name: 'Lime',
  193. value: 1,
  194. itemStyle: {
  195. color: '#7eb138'
  196. }
  197. }]
  198. }]
  199. }, {
  200. name: 'Sour/\nFermented',
  201. itemStyle: {
  202. color: '#ebb40f'
  203. },
  204. children: [{
  205. name: 'Sour',
  206. itemStyle: {
  207. color: '#e1c315'
  208. },
  209. children: [{
  210. name: 'Sour Aromatics',
  211. value: 1,
  212. itemStyle: {
  213. color: '#9ea718'
  214. }
  215. }, {
  216. name: 'Acetic Acid',
  217. value: 1,
  218. itemStyle: {
  219. color: '#94a76f'
  220. }
  221. }, {
  222. name: 'Butyric Acid',
  223. value: 1,
  224. itemStyle: {
  225. color: '#d0b24f'
  226. }
  227. }, {
  228. name: 'Isovaleric Acid',
  229. value: 1,
  230. itemStyle: {
  231. color: '#8eb646'
  232. }
  233. }, {
  234. name: 'Citric Acid',
  235. value: 1,
  236. itemStyle: {
  237. color: '#faef07'
  238. }
  239. }, {
  240. name: 'Malic Acid',
  241. value: 1,
  242. itemStyle: {
  243. color: '#c1ba07'
  244. }
  245. }]
  246. }, {
  247. name: 'Alcohol/\nFremented',
  248. itemStyle: {
  249. color: '#b09733'
  250. },
  251. children: [{
  252. name: 'Winey',
  253. value: 1,
  254. itemStyle: {
  255. color: '#8f1c53'
  256. }
  257. }, {
  258. name: 'Whiskey',
  259. value: 1,
  260. itemStyle: {
  261. color: '#b34039'
  262. }
  263. }, {
  264. name: 'Fremented',
  265. value: 1,
  266. itemStyle: {
  267. color: '#ba9232'
  268. }
  269. }, {
  270. name: 'Overripe',
  271. value: 1,
  272. itemStyle: {
  273. color: '#8b6439'
  274. }
  275. }]
  276. }]
  277. }, {
  278. name: 'Green/\nVegetative',
  279. itemStyle: {
  280. color: '#187a2f'
  281. },
  282. children: [{
  283. name: 'Olive Oil',
  284. value: 1,
  285. itemStyle: {
  286. color: '#a2b029'
  287. }
  288. }, {
  289. name: 'Raw',
  290. value: 1,
  291. itemStyle: {
  292. color: '#718933'
  293. }
  294. }, {
  295. name: 'Green/\nVegetative',
  296. itemStyle: {
  297. color: '#3aa255'
  298. },
  299. children: [{
  300. name: 'Under-ripe',
  301. value: 1,
  302. itemStyle: {
  303. color: '#a2bb2b'
  304. }
  305. }, {
  306. name: 'Peapod',
  307. value: 1,
  308. itemStyle: {
  309. color: '#62aa3c'
  310. }
  311. }, {
  312. name: 'Fresh',
  313. value: 1,
  314. itemStyle: {
  315. color: '#03a653'
  316. }
  317. }, {
  318. name: 'Dark Green',
  319. value: 1,
  320. itemStyle: {
  321. color: '#038549'
  322. }
  323. }, {
  324. name: 'Vegetative',
  325. value: 1,
  326. itemStyle: {
  327. color: '#28b44b'
  328. }
  329. }, {
  330. name: 'Hay-like',
  331. value: 1,
  332. itemStyle: {
  333. color: '#a3a830'
  334. }
  335. }, {
  336. name: 'Herb-like',
  337. value: 1,
  338. itemStyle: {
  339. color: '#7ac141'
  340. }
  341. }]
  342. }, {
  343. name: 'Beany',
  344. value: 1,
  345. itemStyle: {
  346. color: '#5e9a80'
  347. }
  348. }]
  349. }, {
  350. name: 'Other',
  351. itemStyle: {
  352. color: '#0aa3b5'
  353. },
  354. children: [{
  355. name: 'Papery/Musty',
  356. itemStyle: {
  357. color: '#9db2b7'
  358. },
  359. children: [{
  360. name: 'Stale',
  361. value: 1,
  362. itemStyle: {
  363. color: '#8b8c90'
  364. }
  365. }, {
  366. name: 'Cardboard',
  367. value: 1,
  368. itemStyle: {
  369. color: '#beb276'
  370. }
  371. }, {
  372. name: 'Papery',
  373. value: 1,
  374. itemStyle: {
  375. color: '#fefef4'
  376. }
  377. }, {
  378. name: 'Woody',
  379. value: 1,
  380. itemStyle: {
  381. color: '#744e03'
  382. }
  383. }, {
  384. name: 'Moldy/Damp',
  385. value: 1,
  386. itemStyle: {
  387. color: '#a3a36f'
  388. }
  389. }, {
  390. name: 'Musty/Dusty',
  391. value: 1,
  392. itemStyle: {
  393. color: '#c9b583'
  394. }
  395. }, {
  396. name: 'Musty/Earthy',
  397. value: 1,
  398. itemStyle: {
  399. color: '#978847'
  400. }
  401. }, {
  402. name: 'Animalic',
  403. value: 1,
  404. itemStyle: {
  405. color: '#9d977f'
  406. }
  407. }, {
  408. name: 'Meaty Brothy',
  409. value: 1,
  410. itemStyle: {
  411. color: '#cc7b6a'
  412. }
  413. }, {
  414. name: 'Phenolic',
  415. value: 1,
  416. itemStyle: {
  417. color: '#db646a'
  418. }
  419. }]
  420. }, {
  421. name: 'Chemical',
  422. itemStyle: {
  423. color: '#76c0cb'
  424. },
  425. children: [{
  426. name: 'Bitter',
  427. value: 1,
  428. itemStyle: {
  429. color: '#80a89d'
  430. }
  431. }, {
  432. name: 'Salty',
  433. value: 1,
  434. itemStyle: {
  435. color: '#def2fd'
  436. }
  437. }, {
  438. name: 'Medicinal',
  439. value: 1,
  440. itemStyle: {
  441. color: '#7a9bae'
  442. }
  443. }, {
  444. name: 'Petroleum',
  445. value: 1,
  446. itemStyle: {
  447. color: '#039fb8'
  448. }
  449. }, {
  450. name: 'Skunky',
  451. value: 1,
  452. itemStyle: {
  453. color: '#5e777b'
  454. }
  455. }, {
  456. name: 'Rubber',
  457. value: 1,
  458. itemStyle: {
  459. color: '#120c0c'
  460. }
  461. }]
  462. }]
  463. }, {
  464. name: 'Roasted',
  465. itemStyle: {
  466. color: '#c94930'
  467. },
  468. children: [{
  469. name: 'Pipe Tobacco',
  470. value: 1,
  471. itemStyle: {
  472. color: '#caa465'
  473. }
  474. }, {
  475. name: 'Tobacco',
  476. value: 1,
  477. itemStyle: {
  478. color: '#dfbd7e'
  479. }
  480. }, {
  481. name: 'Burnt',
  482. itemStyle: {
  483. color: '#be8663'
  484. },
  485. children: [{
  486. name: 'Acrid',
  487. value: 1,
  488. itemStyle: {
  489. color: '#b9a449'
  490. }
  491. }, {
  492. name: 'Ashy',
  493. value: 1,
  494. itemStyle: {
  495. color: '#899893'
  496. }
  497. }, {
  498. name: 'Smoky',
  499. value: 1,
  500. itemStyle: {
  501. color: '#a1743b'
  502. }
  503. }, {
  504. name: 'Brown, Roast',
  505. value: 1,
  506. itemStyle: {
  507. color: '#894810'
  508. }
  509. }]
  510. }, {
  511. name: 'Cereal',
  512. itemStyle: {
  513. color: '#ddaf61'
  514. },
  515. children: [{
  516. name: 'Grain',
  517. value: 1,
  518. itemStyle: {
  519. color: '#b7906f'
  520. }
  521. }, {
  522. name: 'Malt',
  523. value: 1,
  524. itemStyle: {
  525. color: '#eb9d5f'
  526. }
  527. }]
  528. }]
  529. }, {
  530. name: 'Spices',
  531. itemStyle: {
  532. color: '#ad213e'
  533. },
  534. children: [{
  535. name: 'Pungent',
  536. value: 1,
  537. itemStyle: {
  538. color: '#794752'
  539. }
  540. }, {
  541. name: 'Pepper',
  542. value: 1,
  543. itemStyle: {
  544. color: '#cc3d41'
  545. }
  546. }, {
  547. name: 'Brown Spice',
  548. itemStyle: {
  549. color: '#b14d57'
  550. },
  551. children: [{
  552. name: 'Anise',
  553. value: 1,
  554. itemStyle: {
  555. color: '#c78936'
  556. }
  557. }, {
  558. name: 'Nutmeg',
  559. value: 1,
  560. itemStyle: {
  561. color: '#8c292c'
  562. }
  563. }, {
  564. name: 'Cinnamon',
  565. value: 1,
  566. itemStyle: {
  567. color: '#e5762e'
  568. }
  569. }, {
  570. name: 'Clove',
  571. value: 1,
  572. itemStyle: {
  573. color: '#a16c5a'
  574. }
  575. }]
  576. }]
  577. }, {
  578. name: 'Nutty/\nCocoa',
  579. itemStyle: {
  580. color: '#a87b64'
  581. },
  582. children: [{
  583. name: 'Nutty',
  584. itemStyle: {
  585. color: '#c78869'
  586. },
  587. children: [ {
  588. name: 'Peanuts',
  589. value: 1,
  590. itemStyle: {
  591. color: '#d4ad12'
  592. }
  593. }, {
  594. name: 'Hazelnut',
  595. value: 1,
  596. itemStyle: {
  597. color: '#9d5433'
  598. }
  599. }, {
  600. name: 'Almond',
  601. value: 1,
  602. itemStyle: {
  603. color: '#c89f83'
  604. }
  605. }]
  606. }, {
  607. name: 'Cocoa',
  608. itemStyle: {
  609. color: '#bb764c'
  610. },
  611. children: [{
  612. name: 'Chocolate',
  613. value: 1,
  614. itemStyle: {
  615. color: '#692a19'
  616. }
  617. }, {
  618. name: 'Dark Chocolate',
  619. value: 1,
  620. itemStyle: {
  621. color: '#470604'
  622. }
  623. }]
  624. }]
  625. }, {
  626. name: 'Sweet',
  627. itemStyle: {
  628. color: '#e65832'
  629. },
  630. children: [{
  631. name: 'Brown Sugar',
  632. itemStyle: {
  633. color: '#d45a59'
  634. },
  635. children: [{
  636. name: 'Molasses',
  637. value: 1,
  638. itemStyle: {
  639. color: '#310d0f'
  640. }
  641. }, {
  642. name: 'Maple Syrup',
  643. value: 1,
  644. itemStyle: {
  645. color: '#ae341f'
  646. }
  647. }, {
  648. name: 'Caramelized',
  649. value: 1,
  650. itemStyle: {
  651. color: '#d78823'
  652. }
  653. }, {
  654. name: 'Honey',
  655. value: 1,
  656. itemStyle: {
  657. color: '#da5c1f'
  658. }
  659. }]
  660. }, {
  661. name: 'Vanilla',
  662. value: 1,
  663. itemStyle: {
  664. color: '#f89a80'
  665. }
  666. }, {
  667. name: 'Vanillin',
  668. value: 1,
  669. itemStyle: {
  670. color: '#f37674'
  671. }
  672. }, {
  673. name: 'Overall Sweet',
  674. value: 1,
  675. itemStyle: {
  676. color: '#e75b68'
  677. }
  678. }, {
  679. name: 'Sweet Aromatics',
  680. value: 1,
  681. itemStyle: {
  682. color: '#d0545f'
  683. }
  684. }]
  685. }];
  686. chart.setOption({
  687. series: {
  688. type: 'sunburst',
  689. highlightPolicy: 'ancestor',
  690. data: data,
  691. radius: [0, '95%'],
  692. sort: null,
  693. levels: [{}, {
  694. r0: '15%',
  695. r: '35%',
  696. itemStyle: {
  697. borderWidth: 2
  698. },
  699. label: {
  700. rotate: 'tangential'
  701. }
  702. }, {
  703. r0: '35%',
  704. r: '70%',
  705. label: {
  706. align: 'right'
  707. }
  708. }, {
  709. r0: '70%',
  710. r: '72%',
  711. label: {
  712. position: 'outside',
  713. padding: 3,
  714. silent: false
  715. },
  716. itemStyle: {
  717. borderWidth: 3
  718. }
  719. }]
  720. }
  721. });
  722. });
  723. </script>
  724. </body>
  725. </html>