data_visualization.html 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Data Visualization Report</title>
  6. <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
  7. <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/themes/roma.js"></script>
  8. </head>
  9. <body >
  10. <style>.box { justify-content:center; display:flex; flex-wrap:wrap; } </style>
  11. <div class="box">
  12. <div id="7ae3e4c82ea5417ab96fcd1bb766bc69" class="chart-container" style="width:700px; height:600px; "></div>
  13. <script>
  14. var chart_7ae3e4c82ea5417ab96fcd1bb766bc69 = echarts.init(
  15. document.getElementById('7ae3e4c82ea5417ab96fcd1bb766bc69'), 'roma', {renderer: 'canvas'});
  16. var option_7ae3e4c82ea5417ab96fcd1bb766bc69 = {
  17. "animation": true,
  18. "animationThreshold": 2000,
  19. "animationDuration": 1000,
  20. "animationEasing": "cubicOut",
  21. "animationDelay": 0,
  22. "animationDurationUpdate": 300,
  23. "animationEasingUpdate": "cubicOut",
  24. "animationDelayUpdate": 0,
  25. "aria": {
  26. "enabled": false
  27. },
  28. "series": [
  29. {
  30. "type": "bar",
  31. "name": "Mean",
  32. "xAxisIndex": 0,
  33. "yAxisIndex": 0,
  34. "legendHoverLink": true,
  35. "data": [
  36. 35.0,
  37. 30.0
  38. ],
  39. "realtimeSort": false,
  40. "showBackground": false,
  41. "stackStrategy": "samesign",
  42. "cursor": "pointer",
  43. "barMinHeight": 0,
  44. "barCategoryGap": "20%",
  45. "barGap": "30%",
  46. "large": false,
  47. "largeThreshold": 400,
  48. "seriesLayoutBy": "column",
  49. "datasetIndex": 0,
  50. "clip": true,
  51. "zlevel": 0,
  52. "z": 2,
  53. "label": {
  54. "show": true,
  55. "position": "top",
  56. "margin": 8
  57. }
  58. },
  59. {
  60. "type": "bar",
  61. "name": "Median",
  62. "xAxisIndex": 0,
  63. "yAxisIndex": 0,
  64. "legendHoverLink": true,
  65. "data": [
  66. 35.0,
  67. 30.0
  68. ],
  69. "realtimeSort": false,
  70. "showBackground": false,
  71. "stackStrategy": "samesign",
  72. "cursor": "pointer",
  73. "barMinHeight": 0,
  74. "barCategoryGap": "20%",
  75. "barGap": "30%",
  76. "large": false,
  77. "largeThreshold": 400,
  78. "seriesLayoutBy": "column",
  79. "datasetIndex": 0,
  80. "clip": true,
  81. "zlevel": 0,
  82. "z": 2,
  83. "label": {
  84. "show": true,
  85. "position": "top",
  86. "margin": 8
  87. }
  88. }
  89. ],
  90. "legend": [
  91. {
  92. "data": [
  93. "Mean",
  94. "Median"
  95. ],
  96. "selected": {},
  97. "show": true,
  98. "top": "10%",
  99. "padding": 5,
  100. "itemGap": 10,
  101. "itemWidth": 25,
  102. "itemHeight": 14,
  103. "backgroundColor": "transparent",
  104. "borderColor": "#ccc",
  105. "borderRadius": 0,
  106. "pageButtonItemGap": 5,
  107. "pageButtonPosition": "end",
  108. "pageFormatter": "{current}/{total}",
  109. "pageIconColor": "#2f4554",
  110. "pageIconInactiveColor": "#aaa",
  111. "pageIconSize": 15,
  112. "animationDurationUpdate": 800,
  113. "selector": false,
  114. "selectorPosition": "auto",
  115. "selectorItemGap": 7,
  116. "selectorButtonGap": 10
  117. }
  118. ],
  119. "tooltip": {
  120. "show": true,
  121. "trigger": "item",
  122. "triggerOn": "mousemove|click",
  123. "axisPointer": {
  124. "type": "line"
  125. },
  126. "showContent": true,
  127. "alwaysShowContent": false,
  128. "showDelay": 0,
  129. "hideDelay": 100,
  130. "enterable": false,
  131. "confine": false,
  132. "appendToBody": false,
  133. "transitionDuration": 0.4,
  134. "textStyle": {
  135. "fontSize": 14
  136. },
  137. "borderWidth": 0,
  138. "padding": 5,
  139. "order": "seriesAsc"
  140. },
  141. "xAxis": [
  142. {
  143. "show": true,
  144. "scale": false,
  145. "nameLocation": "end",
  146. "nameGap": 15,
  147. "gridIndex": 0,
  148. "axisLabel": {
  149. "show": true,
  150. "rotate": -45,
  151. "margin": 8
  152. },
  153. "inverse": false,
  154. "offset": 0,
  155. "splitNumber": 5,
  156. "minInterval": 0,
  157. "splitLine": {
  158. "show": true,
  159. "lineStyle": {
  160. "show": true,
  161. "width": 1,
  162. "opacity": 1,
  163. "curveness": 0,
  164. "type": "solid"
  165. }
  166. },
  167. "data": [
  168. "\u5e74\u9f84",
  169. "\u4f53\u91cd"
  170. ]
  171. }
  172. ],
  173. "yAxis": [
  174. {
  175. "show": true,
  176. "scale": false,
  177. "nameLocation": "end",
  178. "nameGap": 15,
  179. "gridIndex": 0,
  180. "inverse": false,
  181. "offset": 0,
  182. "splitNumber": 5,
  183. "minInterval": 0,
  184. "splitLine": {
  185. "show": true,
  186. "lineStyle": {
  187. "show": true,
  188. "width": 1,
  189. "opacity": 1,
  190. "curveness": 0,
  191. "type": "solid"
  192. }
  193. }
  194. }
  195. ],
  196. "title": [
  197. {
  198. "show": true,
  199. "text": "Distribution of Numeric Columns",
  200. "target": "blank",
  201. "subtarget": "blank",
  202. "top": "5%",
  203. "padding": [
  204. 0,
  205. 0,
  206. 20,
  207. 0
  208. ],
  209. "itemGap": 10,
  210. "textAlign": "auto",
  211. "textVerticalAlign": "auto",
  212. "triggerEvent": false
  213. }
  214. ],
  215. "toolbox": {
  216. "show": true,
  217. "orient": "horizontal",
  218. "itemSize": 15,
  219. "itemGap": 10,
  220. "left": "80%",
  221. "top": "5%",
  222. "feature": {
  223. "saveAsImage": {
  224. "type": "png",
  225. "backgroundColor": "auto",
  226. "connectedBackgroundColor": "#fff",
  227. "show": true,
  228. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  229. "pixelRatio": 1
  230. },
  231. "restore": {
  232. "show": true,
  233. "title": "\u8fd8\u539f"
  234. },
  235. "dataView": {
  236. "show": true,
  237. "title": "\u6570\u636e\u89c6\u56fe",
  238. "readOnly": false,
  239. "lang": [
  240. "\u6570\u636e\u89c6\u56fe",
  241. "\u5173\u95ed",
  242. "\u5237\u65b0"
  243. ],
  244. "backgroundColor": "#fff",
  245. "textareaColor": "#fff",
  246. "textareaBorderColor": "#333",
  247. "textColor": "#000",
  248. "buttonColor": "#c23531",
  249. "buttonTextColor": "#fff"
  250. },
  251. "dataZoom": {
  252. "show": true,
  253. "title": {
  254. "zoom": "\u533a\u57df\u7f29\u653e",
  255. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  256. },
  257. "icon": {},
  258. "filterMode": "filter"
  259. },
  260. "magicType": {
  261. "show": true,
  262. "type": [
  263. "line",
  264. "bar",
  265. "stack",
  266. "tiled"
  267. ],
  268. "title": {
  269. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  270. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  271. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  272. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  273. },
  274. "icon": {}
  275. }
  276. }
  277. },
  278. "grid": [
  279. {
  280. "show": false,
  281. "zlevel": 0,
  282. "z": 2,
  283. "left": "100px",
  284. "top": "100px",
  285. "right": "200px",
  286. "bottom": "100px",
  287. "containLabel": false,
  288. "backgroundColor": "transparent",
  289. "borderColor": "#ccc",
  290. "borderWidth": 1,
  291. "shadowOffsetX": 0,
  292. "shadowOffsetY": 0
  293. }
  294. ],
  295. "color": []
  296. };
  297. chart_7ae3e4c82ea5417ab96fcd1bb766bc69.setOption(option_7ae3e4c82ea5417ab96fcd1bb766bc69);
  298. </script>
  299. <br/> <div id="d9eab51730c54d2b847e05b98b44627d" class="chart-container" style="width:700px; height:600px; "></div>
  300. <script>
  301. var chart_d9eab51730c54d2b847e05b98b44627d = echarts.init(
  302. document.getElementById('d9eab51730c54d2b847e05b98b44627d'), 'roma', {renderer: 'canvas'});
  303. var option_d9eab51730c54d2b847e05b98b44627d = {
  304. "animation": true,
  305. "animationThreshold": 2000,
  306. "animationDuration": 1000,
  307. "animationEasing": "cubicOut",
  308. "animationDelay": 0,
  309. "animationDurationUpdate": 300,
  310. "animationEasingUpdate": "cubicOut",
  311. "animationDelayUpdate": 0,
  312. "aria": {
  313. "enabled": false
  314. },
  315. "series": [
  316. {
  317. "type": "scatter",
  318. "name": "\u4f53\u91cd",
  319. "xAxisIndex": 0,
  320. "yAxisIndex": 0,
  321. "symbolSize": 10,
  322. "data": [
  323. [
  324. 10,
  325. 10,
  326. 5
  327. ],
  328. [
  329. 20,
  330. 20,
  331. 15
  332. ],
  333. [
  334. 30,
  335. 30,
  336. 25
  337. ],
  338. [
  339. 40,
  340. 40,
  341. 35
  342. ],
  343. [
  344. 50,
  345. 50,
  346. 45
  347. ],
  348. [
  349. 60,
  350. 60,
  351. 55
  352. ]
  353. ],
  354. "label": {
  355. "show": false,
  356. "margin": 8
  357. }
  358. }
  359. ],
  360. "legend": [
  361. {
  362. "data": [
  363. "\u4f53\u91cd"
  364. ],
  365. "selected": {},
  366. "show": true,
  367. "top": "10%",
  368. "padding": 5,
  369. "itemGap": 10,
  370. "itemWidth": 25,
  371. "itemHeight": 14,
  372. "backgroundColor": "transparent",
  373. "borderColor": "#ccc",
  374. "borderRadius": 0,
  375. "pageButtonItemGap": 5,
  376. "pageButtonPosition": "end",
  377. "pageFormatter": "{current}/{total}",
  378. "pageIconColor": "#2f4554",
  379. "pageIconInactiveColor": "#aaa",
  380. "pageIconSize": 15,
  381. "animationDurationUpdate": 800,
  382. "selector": false,
  383. "selectorPosition": "auto",
  384. "selectorItemGap": 7,
  385. "selectorButtonGap": 10
  386. }
  387. ],
  388. "tooltip": {
  389. "show": true,
  390. "trigger": "item",
  391. "triggerOn": "mousemove|click",
  392. "axisPointer": {
  393. "type": "line"
  394. },
  395. "showContent": true,
  396. "alwaysShowContent": false,
  397. "showDelay": 0,
  398. "hideDelay": 100,
  399. "enterable": false,
  400. "confine": false,
  401. "appendToBody": false,
  402. "transitionDuration": 0.4,
  403. "textStyle": {
  404. "fontSize": 14
  405. },
  406. "borderWidth": 0,
  407. "padding": 5,
  408. "order": "seriesAsc"
  409. },
  410. "xAxis": [
  411. {
  412. "type": "value",
  413. "name": "\u5e74\u9f84",
  414. "show": true,
  415. "scale": false,
  416. "nameLocation": "end",
  417. "nameGap": 15,
  418. "gridIndex": 0,
  419. "inverse": false,
  420. "offset": 0,
  421. "splitNumber": 5,
  422. "minInterval": 0,
  423. "splitLine": {
  424. "show": true,
  425. "lineStyle": {
  426. "show": true,
  427. "width": 1,
  428. "opacity": 1,
  429. "curveness": 0,
  430. "type": "solid"
  431. }
  432. },
  433. "data": [
  434. 10,
  435. 20,
  436. 30,
  437. 40,
  438. 50,
  439. 60
  440. ]
  441. }
  442. ],
  443. "yAxis": [
  444. {
  445. "type": "value",
  446. "name": "\u4f53\u91cd",
  447. "show": true,
  448. "scale": false,
  449. "nameLocation": "end",
  450. "nameGap": 15,
  451. "gridIndex": 0,
  452. "inverse": false,
  453. "offset": 0,
  454. "splitNumber": 5,
  455. "minInterval": 0,
  456. "splitLine": {
  457. "show": true,
  458. "lineStyle": {
  459. "show": true,
  460. "width": 1,
  461. "opacity": 1,
  462. "curveness": 0,
  463. "type": "solid"
  464. }
  465. }
  466. }
  467. ],
  468. "title": [
  469. {
  470. "show": true,
  471. "text": "\u5e74\u9f84 vs \u4f53\u91cd Scatter Plot",
  472. "target": "blank",
  473. "subtarget": "blank",
  474. "top": "5%",
  475. "padding": [
  476. 0,
  477. 0,
  478. 20,
  479. 0
  480. ],
  481. "itemGap": 10,
  482. "textAlign": "auto",
  483. "textVerticalAlign": "auto",
  484. "triggerEvent": false
  485. }
  486. ],
  487. "toolbox": {
  488. "show": true,
  489. "orient": "horizontal",
  490. "itemSize": 15,
  491. "itemGap": 10,
  492. "left": "80%",
  493. "top": "5%",
  494. "feature": {
  495. "saveAsImage": {
  496. "type": "png",
  497. "backgroundColor": "auto",
  498. "connectedBackgroundColor": "#fff",
  499. "show": true,
  500. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  501. "pixelRatio": 1
  502. },
  503. "restore": {
  504. "show": true,
  505. "title": "\u8fd8\u539f"
  506. },
  507. "dataView": {
  508. "show": true,
  509. "title": "\u6570\u636e\u89c6\u56fe",
  510. "readOnly": false,
  511. "lang": [
  512. "\u6570\u636e\u89c6\u56fe",
  513. "\u5173\u95ed",
  514. "\u5237\u65b0"
  515. ],
  516. "backgroundColor": "#fff",
  517. "textareaColor": "#fff",
  518. "textareaBorderColor": "#333",
  519. "textColor": "#000",
  520. "buttonColor": "#c23531",
  521. "buttonTextColor": "#fff"
  522. },
  523. "dataZoom": {
  524. "show": true,
  525. "title": {
  526. "zoom": "\u533a\u57df\u7f29\u653e",
  527. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  528. },
  529. "icon": {},
  530. "filterMode": "filter"
  531. },
  532. "magicType": {
  533. "show": true,
  534. "type": [
  535. "line",
  536. "bar",
  537. "stack",
  538. "tiled"
  539. ],
  540. "title": {
  541. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  542. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  543. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  544. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  545. },
  546. "icon": {}
  547. }
  548. }
  549. },
  550. "grid": [
  551. {
  552. "show": false,
  553. "zlevel": 0,
  554. "z": 2,
  555. "left": "100px",
  556. "top": "100px",
  557. "right": "200px",
  558. "bottom": "100px",
  559. "containLabel": false,
  560. "backgroundColor": "transparent",
  561. "borderColor": "#ccc",
  562. "borderWidth": 1,
  563. "shadowOffsetX": 0,
  564. "shadowOffsetY": 0
  565. }
  566. ],
  567. "color": []
  568. };
  569. chart_d9eab51730c54d2b847e05b98b44627d.setOption(option_d9eab51730c54d2b847e05b98b44627d);
  570. </script>
  571. <br/> <div id="30af3f6682204c4b88adb02ee29afa55" class="chart-container" style="width:700px; height:600px; "></div>
  572. <script>
  573. var chart_30af3f6682204c4b88adb02ee29afa55 = echarts.init(
  574. document.getElementById('30af3f6682204c4b88adb02ee29afa55'), 'roma', {renderer: 'canvas'});
  575. var option_30af3f6682204c4b88adb02ee29afa55 = {
  576. "animation": true,
  577. "animationThreshold": 2000,
  578. "animationDuration": 1000,
  579. "animationEasing": "cubicOut",
  580. "animationDelay": 0,
  581. "animationDurationUpdate": 300,
  582. "animationEasingUpdate": "cubicOut",
  583. "animationDelayUpdate": 0,
  584. "aria": {
  585. "enabled": false
  586. },
  587. "series": [
  588. {
  589. "type": "bar",
  590. "name": "\u5e74\u9f84",
  591. "xAxisIndex": 0,
  592. "yAxisIndex": 0,
  593. "legendHoverLink": true,
  594. "data": [
  595. 30.0,
  596. 40.0
  597. ],
  598. "realtimeSort": false,
  599. "showBackground": false,
  600. "stackStrategy": "samesign",
  601. "cursor": "pointer",
  602. "barMinHeight": 0,
  603. "barCategoryGap": "20%",
  604. "barGap": "30%",
  605. "large": false,
  606. "largeThreshold": 400,
  607. "seriesLayoutBy": "column",
  608. "datasetIndex": 0,
  609. "clip": true,
  610. "zlevel": 0,
  611. "z": 2,
  612. "label": {
  613. "show": true,
  614. "position": "top",
  615. "margin": 8
  616. }
  617. }
  618. ],
  619. "legend": [
  620. {
  621. "data": [
  622. "\u5e74\u9f84"
  623. ],
  624. "selected": {},
  625. "show": true,
  626. "top": "10%",
  627. "padding": 5,
  628. "itemGap": 10,
  629. "itemWidth": 25,
  630. "itemHeight": 14,
  631. "backgroundColor": "transparent",
  632. "borderColor": "#ccc",
  633. "borderRadius": 0,
  634. "pageButtonItemGap": 5,
  635. "pageButtonPosition": "end",
  636. "pageFormatter": "{current}/{total}",
  637. "pageIconColor": "#2f4554",
  638. "pageIconInactiveColor": "#aaa",
  639. "pageIconSize": 15,
  640. "animationDurationUpdate": 800,
  641. "selector": false,
  642. "selectorPosition": "auto",
  643. "selectorItemGap": 7,
  644. "selectorButtonGap": 10
  645. }
  646. ],
  647. "tooltip": {
  648. "show": true,
  649. "trigger": "item",
  650. "triggerOn": "mousemove|click",
  651. "axisPointer": {
  652. "type": "line"
  653. },
  654. "showContent": true,
  655. "alwaysShowContent": false,
  656. "showDelay": 0,
  657. "hideDelay": 100,
  658. "enterable": false,
  659. "confine": false,
  660. "appendToBody": false,
  661. "transitionDuration": 0.4,
  662. "textStyle": {
  663. "fontSize": 14
  664. },
  665. "borderWidth": 0,
  666. "padding": 5,
  667. "order": "seriesAsc"
  668. },
  669. "xAxis": [
  670. {
  671. "show": true,
  672. "scale": false,
  673. "nameLocation": "end",
  674. "nameGap": 15,
  675. "gridIndex": 0,
  676. "axisLabel": {
  677. "show": true,
  678. "rotate": -45,
  679. "margin": 8
  680. },
  681. "inverse": false,
  682. "offset": 0,
  683. "splitNumber": 5,
  684. "minInterval": 0,
  685. "splitLine": {
  686. "show": true,
  687. "lineStyle": {
  688. "show": true,
  689. "width": 1,
  690. "opacity": 1,
  691. "curveness": 0,
  692. "type": "solid"
  693. }
  694. },
  695. "data": [
  696. "A",
  697. "B"
  698. ]
  699. }
  700. ],
  701. "yAxis": [
  702. {
  703. "show": true,
  704. "scale": false,
  705. "nameLocation": "end",
  706. "nameGap": 15,
  707. "gridIndex": 0,
  708. "inverse": false,
  709. "offset": 0,
  710. "splitNumber": 5,
  711. "minInterval": 0,
  712. "splitLine": {
  713. "show": true,
  714. "lineStyle": {
  715. "show": true,
  716. "width": 1,
  717. "opacity": 1,
  718. "curveness": 0,
  719. "type": "solid"
  720. }
  721. }
  722. }
  723. ],
  724. "title": [
  725. {
  726. "show": true,
  727. "text": "\u5e74\u9f84 Distribution by \u7c7b\u76ee",
  728. "target": "blank",
  729. "subtarget": "blank",
  730. "top": "5%",
  731. "padding": [
  732. 0,
  733. 0,
  734. 20,
  735. 0
  736. ],
  737. "itemGap": 10,
  738. "textAlign": "auto",
  739. "textVerticalAlign": "auto",
  740. "triggerEvent": false
  741. }
  742. ],
  743. "toolbox": {
  744. "show": true,
  745. "orient": "horizontal",
  746. "itemSize": 15,
  747. "itemGap": 10,
  748. "left": "80%",
  749. "top": "5%",
  750. "feature": {
  751. "saveAsImage": {
  752. "type": "png",
  753. "backgroundColor": "auto",
  754. "connectedBackgroundColor": "#fff",
  755. "show": true,
  756. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  757. "pixelRatio": 1
  758. },
  759. "restore": {
  760. "show": true,
  761. "title": "\u8fd8\u539f"
  762. },
  763. "dataView": {
  764. "show": true,
  765. "title": "\u6570\u636e\u89c6\u56fe",
  766. "readOnly": false,
  767. "lang": [
  768. "\u6570\u636e\u89c6\u56fe",
  769. "\u5173\u95ed",
  770. "\u5237\u65b0"
  771. ],
  772. "backgroundColor": "#fff",
  773. "textareaColor": "#fff",
  774. "textareaBorderColor": "#333",
  775. "textColor": "#000",
  776. "buttonColor": "#c23531",
  777. "buttonTextColor": "#fff"
  778. },
  779. "dataZoom": {
  780. "show": true,
  781. "title": {
  782. "zoom": "\u533a\u57df\u7f29\u653e",
  783. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  784. },
  785. "icon": {},
  786. "filterMode": "filter"
  787. },
  788. "magicType": {
  789. "show": true,
  790. "type": [
  791. "line",
  792. "bar",
  793. "stack",
  794. "tiled"
  795. ],
  796. "title": {
  797. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  798. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  799. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  800. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  801. },
  802. "icon": {}
  803. }
  804. }
  805. },
  806. "grid": [
  807. {
  808. "show": false,
  809. "zlevel": 0,
  810. "z": 2,
  811. "left": "100px",
  812. "top": "100px",
  813. "right": "200px",
  814. "bottom": "100px",
  815. "containLabel": false,
  816. "backgroundColor": "transparent",
  817. "borderColor": "#ccc",
  818. "borderWidth": 1,
  819. "shadowOffsetX": 0,
  820. "shadowOffsetY": 0
  821. }
  822. ],
  823. "color": []
  824. };
  825. chart_30af3f6682204c4b88adb02ee29afa55.setOption(option_30af3f6682204c4b88adb02ee29afa55);
  826. </script>
  827. <br/> <div id="ae07658406c844ba8b33b6d5ee078991" class="chart-container" style="width:700px; height:600px; "></div>
  828. <script>
  829. var chart_ae07658406c844ba8b33b6d5ee078991 = echarts.init(
  830. document.getElementById('ae07658406c844ba8b33b6d5ee078991'), 'roma', {renderer: 'canvas'});
  831. var option_ae07658406c844ba8b33b6d5ee078991 = {
  832. "animation": true,
  833. "animationThreshold": 2000,
  834. "animationDuration": 1000,
  835. "animationEasing": "cubicOut",
  836. "animationDelay": 0,
  837. "animationDurationUpdate": 300,
  838. "animationEasingUpdate": "cubicOut",
  839. "animationDelayUpdate": 0,
  840. "aria": {
  841. "enabled": false
  842. },
  843. "series": [
  844. {
  845. "type": "bar",
  846. "name": "\u4f53\u91cd",
  847. "xAxisIndex": 0,
  848. "yAxisIndex": 0,
  849. "legendHoverLink": true,
  850. "data": [
  851. 25.0,
  852. 35.0
  853. ],
  854. "realtimeSort": false,
  855. "showBackground": false,
  856. "stackStrategy": "samesign",
  857. "cursor": "pointer",
  858. "barMinHeight": 0,
  859. "barCategoryGap": "20%",
  860. "barGap": "30%",
  861. "large": false,
  862. "largeThreshold": 400,
  863. "seriesLayoutBy": "column",
  864. "datasetIndex": 0,
  865. "clip": true,
  866. "zlevel": 0,
  867. "z": 2,
  868. "label": {
  869. "show": true,
  870. "position": "top",
  871. "margin": 8
  872. }
  873. }
  874. ],
  875. "legend": [
  876. {
  877. "data": [
  878. "\u4f53\u91cd"
  879. ],
  880. "selected": {},
  881. "show": true,
  882. "top": "10%",
  883. "padding": 5,
  884. "itemGap": 10,
  885. "itemWidth": 25,
  886. "itemHeight": 14,
  887. "backgroundColor": "transparent",
  888. "borderColor": "#ccc",
  889. "borderRadius": 0,
  890. "pageButtonItemGap": 5,
  891. "pageButtonPosition": "end",
  892. "pageFormatter": "{current}/{total}",
  893. "pageIconColor": "#2f4554",
  894. "pageIconInactiveColor": "#aaa",
  895. "pageIconSize": 15,
  896. "animationDurationUpdate": 800,
  897. "selector": false,
  898. "selectorPosition": "auto",
  899. "selectorItemGap": 7,
  900. "selectorButtonGap": 10
  901. }
  902. ],
  903. "tooltip": {
  904. "show": true,
  905. "trigger": "item",
  906. "triggerOn": "mousemove|click",
  907. "axisPointer": {
  908. "type": "line"
  909. },
  910. "showContent": true,
  911. "alwaysShowContent": false,
  912. "showDelay": 0,
  913. "hideDelay": 100,
  914. "enterable": false,
  915. "confine": false,
  916. "appendToBody": false,
  917. "transitionDuration": 0.4,
  918. "textStyle": {
  919. "fontSize": 14
  920. },
  921. "borderWidth": 0,
  922. "padding": 5,
  923. "order": "seriesAsc"
  924. },
  925. "xAxis": [
  926. {
  927. "show": true,
  928. "scale": false,
  929. "nameLocation": "end",
  930. "nameGap": 15,
  931. "gridIndex": 0,
  932. "axisLabel": {
  933. "show": true,
  934. "rotate": -45,
  935. "margin": 8
  936. },
  937. "inverse": false,
  938. "offset": 0,
  939. "splitNumber": 5,
  940. "minInterval": 0,
  941. "splitLine": {
  942. "show": true,
  943. "lineStyle": {
  944. "show": true,
  945. "width": 1,
  946. "opacity": 1,
  947. "curveness": 0,
  948. "type": "solid"
  949. }
  950. },
  951. "data": [
  952. "A",
  953. "B"
  954. ]
  955. }
  956. ],
  957. "yAxis": [
  958. {
  959. "show": true,
  960. "scale": false,
  961. "nameLocation": "end",
  962. "nameGap": 15,
  963. "gridIndex": 0,
  964. "inverse": false,
  965. "offset": 0,
  966. "splitNumber": 5,
  967. "minInterval": 0,
  968. "splitLine": {
  969. "show": true,
  970. "lineStyle": {
  971. "show": true,
  972. "width": 1,
  973. "opacity": 1,
  974. "curveness": 0,
  975. "type": "solid"
  976. }
  977. }
  978. }
  979. ],
  980. "title": [
  981. {
  982. "show": true,
  983. "text": "\u4f53\u91cd Distribution by \u7c7b\u76ee",
  984. "target": "blank",
  985. "subtarget": "blank",
  986. "top": "5%",
  987. "padding": [
  988. 0,
  989. 0,
  990. 20,
  991. 0
  992. ],
  993. "itemGap": 10,
  994. "textAlign": "auto",
  995. "textVerticalAlign": "auto",
  996. "triggerEvent": false
  997. }
  998. ],
  999. "toolbox": {
  1000. "show": true,
  1001. "orient": "horizontal",
  1002. "itemSize": 15,
  1003. "itemGap": 10,
  1004. "left": "80%",
  1005. "top": "5%",
  1006. "feature": {
  1007. "saveAsImage": {
  1008. "type": "png",
  1009. "backgroundColor": "auto",
  1010. "connectedBackgroundColor": "#fff",
  1011. "show": true,
  1012. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  1013. "pixelRatio": 1
  1014. },
  1015. "restore": {
  1016. "show": true,
  1017. "title": "\u8fd8\u539f"
  1018. },
  1019. "dataView": {
  1020. "show": true,
  1021. "title": "\u6570\u636e\u89c6\u56fe",
  1022. "readOnly": false,
  1023. "lang": [
  1024. "\u6570\u636e\u89c6\u56fe",
  1025. "\u5173\u95ed",
  1026. "\u5237\u65b0"
  1027. ],
  1028. "backgroundColor": "#fff",
  1029. "textareaColor": "#fff",
  1030. "textareaBorderColor": "#333",
  1031. "textColor": "#000",
  1032. "buttonColor": "#c23531",
  1033. "buttonTextColor": "#fff"
  1034. },
  1035. "dataZoom": {
  1036. "show": true,
  1037. "title": {
  1038. "zoom": "\u533a\u57df\u7f29\u653e",
  1039. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  1040. },
  1041. "icon": {},
  1042. "filterMode": "filter"
  1043. },
  1044. "magicType": {
  1045. "show": true,
  1046. "type": [
  1047. "line",
  1048. "bar",
  1049. "stack",
  1050. "tiled"
  1051. ],
  1052. "title": {
  1053. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  1054. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  1055. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  1056. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  1057. },
  1058. "icon": {}
  1059. }
  1060. }
  1061. },
  1062. "grid": [
  1063. {
  1064. "show": false,
  1065. "zlevel": 0,
  1066. "z": 2,
  1067. "left": "100px",
  1068. "top": "100px",
  1069. "right": "200px",
  1070. "bottom": "100px",
  1071. "containLabel": false,
  1072. "backgroundColor": "transparent",
  1073. "borderColor": "#ccc",
  1074. "borderWidth": 1,
  1075. "shadowOffsetX": 0,
  1076. "shadowOffsetY": 0
  1077. }
  1078. ],
  1079. "color": []
  1080. };
  1081. chart_ae07658406c844ba8b33b6d5ee078991.setOption(option_ae07658406c844ba8b33b6d5ee078991);
  1082. </script>
  1083. <br/> <div id="efc1cfbed7b54cf5a3e580761f7c4043" class="chart-container" style="width:700px; height:600px; "></div>
  1084. <script>
  1085. var chart_efc1cfbed7b54cf5a3e580761f7c4043 = echarts.init(
  1086. document.getElementById('efc1cfbed7b54cf5a3e580761f7c4043'), 'roma', {renderer: 'canvas'});
  1087. var option_efc1cfbed7b54cf5a3e580761f7c4043 = {
  1088. "animation": true,
  1089. "animationThreshold": 2000,
  1090. "animationDuration": 1000,
  1091. "animationEasing": "cubicOut",
  1092. "animationDelay": 0,
  1093. "animationDurationUpdate": 300,
  1094. "animationEasingUpdate": "cubicOut",
  1095. "animationDelayUpdate": 0,
  1096. "aria": {
  1097. "enabled": false
  1098. },
  1099. "series": [
  1100. {
  1101. "type": "line",
  1102. "name": "\u5e74\u9f84",
  1103. "connectNulls": false,
  1104. "xAxisIndex": 0,
  1105. "yAxisIndex": 0,
  1106. "symbolSize": 4,
  1107. "showSymbol": true,
  1108. "smooth": true,
  1109. "clip": true,
  1110. "step": false,
  1111. "stackStrategy": "samesign",
  1112. "data": [
  1113. [
  1114. "2023-01-01",
  1115. 10
  1116. ],
  1117. [
  1118. "2023-01-02",
  1119. 20
  1120. ],
  1121. [
  1122. "2023-01-03",
  1123. 30
  1124. ],
  1125. [
  1126. "2023-01-04",
  1127. 40
  1128. ],
  1129. [
  1130. "2023-01-05",
  1131. 50
  1132. ],
  1133. [
  1134. "2023-01-06",
  1135. 60
  1136. ]
  1137. ],
  1138. "hoverAnimation": true,
  1139. "label": {
  1140. "show": true,
  1141. "margin": 8
  1142. },
  1143. "logBase": 10,
  1144. "seriesLayoutBy": "column",
  1145. "lineStyle": {
  1146. "show": true,
  1147. "width": 1,
  1148. "opacity": 1,
  1149. "curveness": 0,
  1150. "type": "solid"
  1151. },
  1152. "areaStyle": {
  1153. "opacity": 0
  1154. },
  1155. "zlevel": 0,
  1156. "z": 0
  1157. },
  1158. {
  1159. "type": "line",
  1160. "name": "\u4f53\u91cd",
  1161. "connectNulls": false,
  1162. "xAxisIndex": 0,
  1163. "yAxisIndex": 0,
  1164. "symbolSize": 4,
  1165. "showSymbol": true,
  1166. "smooth": true,
  1167. "clip": true,
  1168. "step": false,
  1169. "stackStrategy": "samesign",
  1170. "data": [
  1171. [
  1172. "2023-01-01",
  1173. 5
  1174. ],
  1175. [
  1176. "2023-01-02",
  1177. 15
  1178. ],
  1179. [
  1180. "2023-01-03",
  1181. 25
  1182. ],
  1183. [
  1184. "2023-01-04",
  1185. 35
  1186. ],
  1187. [
  1188. "2023-01-05",
  1189. 45
  1190. ],
  1191. [
  1192. "2023-01-06",
  1193. 55
  1194. ]
  1195. ],
  1196. "hoverAnimation": true,
  1197. "label": {
  1198. "show": true,
  1199. "margin": 8
  1200. },
  1201. "logBase": 10,
  1202. "seriesLayoutBy": "column",
  1203. "lineStyle": {
  1204. "show": true,
  1205. "width": 1,
  1206. "opacity": 1,
  1207. "curveness": 0,
  1208. "type": "solid"
  1209. },
  1210. "areaStyle": {
  1211. "opacity": 0
  1212. },
  1213. "zlevel": 0,
  1214. "z": 0
  1215. }
  1216. ],
  1217. "legend": [
  1218. {
  1219. "data": [
  1220. "\u5e74\u9f84",
  1221. "\u4f53\u91cd"
  1222. ],
  1223. "selected": {},
  1224. "show": true,
  1225. "top": "10%",
  1226. "padding": 5,
  1227. "itemGap": 10,
  1228. "itemWidth": 25,
  1229. "itemHeight": 14,
  1230. "backgroundColor": "transparent",
  1231. "borderColor": "#ccc",
  1232. "borderRadius": 0,
  1233. "pageButtonItemGap": 5,
  1234. "pageButtonPosition": "end",
  1235. "pageFormatter": "{current}/{total}",
  1236. "pageIconColor": "#2f4554",
  1237. "pageIconInactiveColor": "#aaa",
  1238. "pageIconSize": 15,
  1239. "animationDurationUpdate": 800,
  1240. "selector": false,
  1241. "selectorPosition": "auto",
  1242. "selectorItemGap": 7,
  1243. "selectorButtonGap": 10
  1244. }
  1245. ],
  1246. "tooltip": {
  1247. "show": true,
  1248. "trigger": "item",
  1249. "triggerOn": "mousemove|click",
  1250. "axisPointer": {
  1251. "type": "line"
  1252. },
  1253. "showContent": true,
  1254. "alwaysShowContent": false,
  1255. "showDelay": 0,
  1256. "hideDelay": 100,
  1257. "enterable": false,
  1258. "confine": false,
  1259. "appendToBody": false,
  1260. "transitionDuration": 0.4,
  1261. "textStyle": {
  1262. "fontSize": 14
  1263. },
  1264. "borderWidth": 0,
  1265. "padding": 5,
  1266. "order": "seriesAsc"
  1267. },
  1268. "xAxis": [
  1269. {
  1270. "type": "category",
  1271. "name": "Time",
  1272. "show": true,
  1273. "scale": false,
  1274. "nameLocation": "end",
  1275. "nameGap": 15,
  1276. "gridIndex": 0,
  1277. "inverse": false,
  1278. "offset": 0,
  1279. "splitNumber": 5,
  1280. "minInterval": 0,
  1281. "splitLine": {
  1282. "show": true,
  1283. "lineStyle": {
  1284. "show": true,
  1285. "width": 1,
  1286. "opacity": 1,
  1287. "curveness": 0,
  1288. "type": "solid"
  1289. }
  1290. },
  1291. "data": [
  1292. "2023-01-01",
  1293. "2023-01-02",
  1294. "2023-01-03",
  1295. "2023-01-04",
  1296. "2023-01-05",
  1297. "2023-01-06"
  1298. ]
  1299. }
  1300. ],
  1301. "yAxis": [
  1302. {
  1303. "type": "value",
  1304. "name": "Values",
  1305. "show": true,
  1306. "scale": false,
  1307. "nameLocation": "end",
  1308. "nameGap": 15,
  1309. "gridIndex": 0,
  1310. "inverse": false,
  1311. "offset": 0,
  1312. "splitNumber": 5,
  1313. "minInterval": 0,
  1314. "splitLine": {
  1315. "show": true,
  1316. "lineStyle": {
  1317. "show": true,
  1318. "width": 1,
  1319. "opacity": 1,
  1320. "curveness": 0,
  1321. "type": "solid"
  1322. }
  1323. }
  1324. }
  1325. ],
  1326. "title": [
  1327. {
  1328. "show": true,
  1329. "text": "\u5e74\u9f84, \u4f53\u91cd Trends Over Time",
  1330. "target": "blank",
  1331. "subtarget": "blank",
  1332. "top": "5%",
  1333. "padding": [
  1334. 0,
  1335. 0,
  1336. 20,
  1337. 0
  1338. ],
  1339. "itemGap": 10,
  1340. "textAlign": "auto",
  1341. "textVerticalAlign": "auto",
  1342. "triggerEvent": false
  1343. }
  1344. ],
  1345. "toolbox": {
  1346. "show": true,
  1347. "orient": "horizontal",
  1348. "itemSize": 15,
  1349. "itemGap": 10,
  1350. "left": "80%",
  1351. "top": "5%",
  1352. "feature": {
  1353. "saveAsImage": {
  1354. "type": "png",
  1355. "backgroundColor": "auto",
  1356. "connectedBackgroundColor": "#fff",
  1357. "show": true,
  1358. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  1359. "pixelRatio": 1
  1360. },
  1361. "restore": {
  1362. "show": true,
  1363. "title": "\u8fd8\u539f"
  1364. },
  1365. "dataView": {
  1366. "show": true,
  1367. "title": "\u6570\u636e\u89c6\u56fe",
  1368. "readOnly": false,
  1369. "lang": [
  1370. "\u6570\u636e\u89c6\u56fe",
  1371. "\u5173\u95ed",
  1372. "\u5237\u65b0"
  1373. ],
  1374. "backgroundColor": "#fff",
  1375. "textareaColor": "#fff",
  1376. "textareaBorderColor": "#333",
  1377. "textColor": "#000",
  1378. "buttonColor": "#c23531",
  1379. "buttonTextColor": "#fff"
  1380. },
  1381. "dataZoom": {
  1382. "show": true,
  1383. "title": {
  1384. "zoom": "\u533a\u57df\u7f29\u653e",
  1385. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  1386. },
  1387. "icon": {},
  1388. "filterMode": "filter"
  1389. },
  1390. "magicType": {
  1391. "show": true,
  1392. "type": [
  1393. "line",
  1394. "bar",
  1395. "stack",
  1396. "tiled"
  1397. ],
  1398. "title": {
  1399. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  1400. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  1401. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  1402. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  1403. },
  1404. "icon": {}
  1405. }
  1406. }
  1407. },
  1408. "grid": [
  1409. {
  1410. "show": false,
  1411. "zlevel": 0,
  1412. "z": 2,
  1413. "left": "100px",
  1414. "top": "100px",
  1415. "right": "200px",
  1416. "bottom": "100px",
  1417. "containLabel": false,
  1418. "backgroundColor": "transparent",
  1419. "borderColor": "#ccc",
  1420. "borderWidth": 1,
  1421. "shadowOffsetX": 0,
  1422. "shadowOffsetY": 0
  1423. }
  1424. ],
  1425. "color": []
  1426. };
  1427. chart_efc1cfbed7b54cf5a3e580761f7c4043.setOption(option_efc1cfbed7b54cf5a3e580761f7c4043);
  1428. </script>
  1429. <br/> <div id="b6be9620c40b403d910eac9060c5c41b" class="chart-container" style="width:700px; height:600px; "></div>
  1430. <script>
  1431. var chart_b6be9620c40b403d910eac9060c5c41b = echarts.init(
  1432. document.getElementById('b6be9620c40b403d910eac9060c5c41b'), 'roma', {renderer: 'canvas'});
  1433. var option_b6be9620c40b403d910eac9060c5c41b = {
  1434. "animation": true,
  1435. "animationThreshold": 2000,
  1436. "animationDuration": 1000,
  1437. "animationEasing": "cubicOut",
  1438. "animationDelay": 0,
  1439. "animationDurationUpdate": 300,
  1440. "animationEasingUpdate": "cubicOut",
  1441. "animationDelayUpdate": 0,
  1442. "aria": {
  1443. "enabled": false
  1444. },
  1445. "series": [
  1446. {
  1447. "type": "pie",
  1448. "name": "Sum Distribution",
  1449. "colorBy": "data",
  1450. "legendHoverLink": true,
  1451. "selectedMode": false,
  1452. "selectedOffset": 10,
  1453. "clockwise": true,
  1454. "startAngle": 90,
  1455. "minAngle": 0,
  1456. "minShowLabelAngle": 0,
  1457. "avoidLabelOverlap": true,
  1458. "stillShowZeroSum": true,
  1459. "percentPrecision": 2,
  1460. "showEmptyCircle": true,
  1461. "emptyCircleStyle": {
  1462. "color": "lightgray",
  1463. "borderColor": "#000",
  1464. "borderWidth": 0,
  1465. "borderType": "solid",
  1466. "borderDashOffset": 0,
  1467. "borderCap": "butt",
  1468. "borderJoin": "bevel",
  1469. "borderMiterLimit": 10,
  1470. "opacity": 1
  1471. },
  1472. "data": [
  1473. {
  1474. "name": "\u5e74\u9f84",
  1475. "value": 210
  1476. },
  1477. {
  1478. "name": "\u4f53\u91cd",
  1479. "value": 180
  1480. }
  1481. ],
  1482. "radius": [
  1483. "40%",
  1484. "75%"
  1485. ],
  1486. "center": [
  1487. "50%",
  1488. "50%"
  1489. ],
  1490. "label": {
  1491. "show": true,
  1492. "margin": 8,
  1493. "formatter": "{b}: {c}"
  1494. },
  1495. "labelLine": {
  1496. "show": true,
  1497. "showAbove": false,
  1498. "length": 15,
  1499. "length2": 15,
  1500. "smooth": false,
  1501. "minTurnAngle": 90,
  1502. "maxSurfaceAngle": 90
  1503. },
  1504. "rippleEffect": {
  1505. "show": true,
  1506. "brushType": "stroke",
  1507. "scale": 2.5,
  1508. "period": 4
  1509. },
  1510. "xAxisIndex": 0,
  1511. "yAxisIndex": 0
  1512. }
  1513. ],
  1514. "legend": [
  1515. {
  1516. "data": [
  1517. "\u5e74\u9f84",
  1518. "\u4f53\u91cd"
  1519. ],
  1520. "selected": {},
  1521. "show": true,
  1522. "left": "15%",
  1523. "top": "15%",
  1524. "padding": 5,
  1525. "itemGap": 10,
  1526. "itemWidth": 25,
  1527. "itemHeight": 14,
  1528. "backgroundColor": "transparent",
  1529. "borderColor": "#ccc",
  1530. "borderRadius": 0,
  1531. "pageButtonItemGap": 5,
  1532. "pageButtonPosition": "end",
  1533. "pageFormatter": "{current}/{total}",
  1534. "pageIconColor": "#2f4554",
  1535. "pageIconInactiveColor": "#aaa",
  1536. "pageIconSize": 15,
  1537. "animationDurationUpdate": 800,
  1538. "selector": false,
  1539. "selectorPosition": "auto",
  1540. "selectorItemGap": 7,
  1541. "selectorButtonGap": 10
  1542. }
  1543. ],
  1544. "tooltip": {
  1545. "show": true,
  1546. "trigger": "item",
  1547. "triggerOn": "mousemove|click",
  1548. "axisPointer": {
  1549. "type": "line"
  1550. },
  1551. "showContent": true,
  1552. "alwaysShowContent": false,
  1553. "showDelay": 0,
  1554. "hideDelay": 100,
  1555. "enterable": false,
  1556. "confine": false,
  1557. "appendToBody": false,
  1558. "transitionDuration": 0.4,
  1559. "textStyle": {
  1560. "fontSize": 14
  1561. },
  1562. "borderWidth": 0,
  1563. "padding": 5,
  1564. "order": "seriesAsc"
  1565. },
  1566. "title": [
  1567. {
  1568. "show": true,
  1569. "text": "Sum Distribution of Numeric Columns",
  1570. "target": "blank",
  1571. "subtarget": "blank",
  1572. "top": "5%",
  1573. "padding": [
  1574. 0,
  1575. 0,
  1576. 20,
  1577. 0
  1578. ],
  1579. "itemGap": 10,
  1580. "textAlign": "auto",
  1581. "textVerticalAlign": "auto",
  1582. "triggerEvent": false
  1583. }
  1584. ],
  1585. "toolbox": {
  1586. "show": true,
  1587. "orient": "horizontal",
  1588. "itemSize": 15,
  1589. "itemGap": 10,
  1590. "left": "80%",
  1591. "top": "5%",
  1592. "feature": {
  1593. "saveAsImage": {
  1594. "type": "png",
  1595. "backgroundColor": "auto",
  1596. "connectedBackgroundColor": "#fff",
  1597. "show": true,
  1598. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  1599. "pixelRatio": 1
  1600. },
  1601. "restore": {
  1602. "show": true,
  1603. "title": "\u8fd8\u539f"
  1604. },
  1605. "dataView": {
  1606. "show": true,
  1607. "title": "\u6570\u636e\u89c6\u56fe",
  1608. "readOnly": false,
  1609. "lang": [
  1610. "\u6570\u636e\u89c6\u56fe",
  1611. "\u5173\u95ed",
  1612. "\u5237\u65b0"
  1613. ],
  1614. "backgroundColor": "#fff",
  1615. "textareaColor": "#fff",
  1616. "textareaBorderColor": "#333",
  1617. "textColor": "#000",
  1618. "buttonColor": "#c23531",
  1619. "buttonTextColor": "#fff"
  1620. },
  1621. "dataZoom": {
  1622. "show": true,
  1623. "title": {
  1624. "zoom": "\u533a\u57df\u7f29\u653e",
  1625. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  1626. },
  1627. "icon": {},
  1628. "filterMode": "filter"
  1629. },
  1630. "magicType": {
  1631. "show": true,
  1632. "type": [
  1633. "line",
  1634. "bar",
  1635. "stack",
  1636. "tiled"
  1637. ],
  1638. "title": {
  1639. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  1640. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  1641. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  1642. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  1643. },
  1644. "icon": {}
  1645. }
  1646. }
  1647. },
  1648. "grid": [
  1649. {
  1650. "show": false,
  1651. "zlevel": 0,
  1652. "z": 2,
  1653. "left": "100px",
  1654. "top": "100px",
  1655. "right": "200px",
  1656. "bottom": "100px",
  1657. "containLabel": false,
  1658. "backgroundColor": "transparent",
  1659. "borderColor": "#ccc",
  1660. "borderWidth": 1,
  1661. "shadowOffsetX": 0,
  1662. "shadowOffsetY": 0
  1663. }
  1664. ],
  1665. "color": []
  1666. };
  1667. chart_b6be9620c40b403d910eac9060c5c41b.setOption(option_b6be9620c40b403d910eac9060c5c41b);
  1668. </script>
  1669. <br/> </div>
  1670. <script>
  1671. </script>
  1672. </body>
  1673. </html>