render.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Awesome-pyecharts</title>
  6. <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
  7. </head>
  8. <body >
  9. <div id="bd58e7e217b94c119d969add15496383" class="chart-container" style="width:100%; height:500px; "></div>
  10. <script>
  11. var chart_bd58e7e217b94c119d969add15496383 = echarts.init(
  12. document.getElementById('bd58e7e217b94c119d969add15496383'), 'white', {renderer: 'canvas'});
  13. var option_bd58e7e217b94c119d969add15496383 = {
  14. "animation": true,
  15. "animationThreshold": 2000,
  16. "animationDuration": 1000,
  17. "animationEasing": "cubicOut",
  18. "animationDelay": 0,
  19. "animationDurationUpdate": 300,
  20. "animationEasingUpdate": "cubicOut",
  21. "animationDelayUpdate": 0,
  22. "aria": {
  23. "enabled": false
  24. },
  25. "color": [
  26. "#5470c6",
  27. "#91cc75",
  28. "#fac858",
  29. "#ee6666",
  30. "#73c0de",
  31. "#3ba272",
  32. "#fc8452",
  33. "#9a60b4",
  34. "#ea7ccc"
  35. ],
  36. "series": [
  37. {
  38. "type": "line",
  39. "name": "\u6700\u9ad8\u6c14\u6e29",
  40. "connectNulls": false,
  41. "xAxisIndex": 0,
  42. "symbolSize": 4,
  43. "showSymbol": true,
  44. "smooth": false,
  45. "clip": true,
  46. "step": false,
  47. "data": [
  48. [
  49. "\u5468\u4e00",
  50. 11
  51. ],
  52. [
  53. "\u5468\u4e8c",
  54. 11
  55. ],
  56. [
  57. "\u5468\u4e09",
  58. 15
  59. ],
  60. [
  61. "\u5468\u56db",
  62. 13
  63. ],
  64. [
  65. "\u5468\u4e94",
  66. 12
  67. ],
  68. [
  69. "\u5468\u516d",
  70. 13
  71. ],
  72. [
  73. "\u5468\u65e5",
  74. 10
  75. ]
  76. ],
  77. "hoverAnimation": true,
  78. "label": {
  79. "show": true,
  80. "margin": 8
  81. },
  82. "logBase": 10,
  83. "lineStyle": {
  84. "show": true,
  85. "width": 1,
  86. "opacity": 1,
  87. "curveness": 0,
  88. "type": "solid"
  89. },
  90. "areaStyle": {
  91. "opacity": 0
  92. },
  93. "markPoint": {
  94. "label": {
  95. "show": true,
  96. "position": "inside",
  97. "color": "#fff",
  98. "margin": 8
  99. },
  100. "data": [
  101. {
  102. "name": "\u6700\u5927\u503c",
  103. "type": "max"
  104. },
  105. {
  106. "name": "\u6700\u5c0f\u503c",
  107. "type": "min"
  108. }
  109. ]
  110. },
  111. "markLine": {
  112. "silent": false,
  113. "precision": 2,
  114. "label": {
  115. "show": true,
  116. "margin": 8
  117. },
  118. "data": [
  119. {
  120. "name": "\u5e73\u5747\u503c",
  121. "type": "average"
  122. }
  123. ]
  124. },
  125. "zlevel": 0,
  126. "z": 0
  127. },
  128. {
  129. "type": "line",
  130. "name": "\u6700\u4f4e\u6c14\u6e29",
  131. "connectNulls": false,
  132. "xAxisIndex": 0,
  133. "symbolSize": 4,
  134. "showSymbol": true,
  135. "smooth": false,
  136. "clip": true,
  137. "step": false,
  138. "data": [
  139. [
  140. "\u5468\u4e00",
  141. 1
  142. ],
  143. [
  144. "\u5468\u4e8c",
  145. -2
  146. ],
  147. [
  148. "\u5468\u4e09",
  149. 2
  150. ],
  151. [
  152. "\u5468\u56db",
  153. 5
  154. ],
  155. [
  156. "\u5468\u4e94",
  157. 3
  158. ],
  159. [
  160. "\u5468\u516d",
  161. 2
  162. ],
  163. [
  164. "\u5468\u65e5",
  165. 0
  166. ]
  167. ],
  168. "hoverAnimation": true,
  169. "label": {
  170. "show": true,
  171. "margin": 8
  172. },
  173. "logBase": 10,
  174. "lineStyle": {
  175. "show": true,
  176. "width": 1,
  177. "opacity": 1,
  178. "curveness": 0,
  179. "type": "solid"
  180. },
  181. "areaStyle": {
  182. "opacity": 0
  183. },
  184. "markPoint": {
  185. "label": {
  186. "show": true,
  187. "position": "inside",
  188. "color": "#fff",
  189. "margin": 8
  190. },
  191. "data": [
  192. {
  193. "name": "\u5468\u6700\u4f4e",
  194. "x": 1,
  195. "y": -1.5,
  196. "value": -2
  197. }
  198. ]
  199. },
  200. "markLine": {
  201. "silent": false,
  202. "precision": 2,
  203. "label": {
  204. "show": true,
  205. "margin": 8
  206. },
  207. "data": [
  208. {
  209. "name": "\u5e73\u5747\u503c",
  210. "type": "average"
  211. },
  212. {
  213. "xAxis": "90%",
  214. "yAxis": "max",
  215. "symbol": "none"
  216. },
  217. {
  218. "name": "\u6700\u9ad8\u70b9",
  219. "type": "max",
  220. "symbol": "circle"
  221. }
  222. ]
  223. },
  224. "zlevel": 0,
  225. "z": 0
  226. }
  227. ],
  228. "legend": [
  229. {
  230. "data": [
  231. "\u6700\u9ad8\u6c14\u6e29",
  232. "\u6700\u4f4e\u6c14\u6e29"
  233. ],
  234. "selected": {
  235. "\u6700\u9ad8\u6c14\u6e29": true,
  236. "\u6700\u4f4e\u6c14\u6e29": true
  237. },
  238. "show": true,
  239. "padding": 5,
  240. "itemGap": 10,
  241. "itemWidth": 25,
  242. "itemHeight": 14,
  243. "backgroundColor": "transparent",
  244. "borderColor": "#ccc",
  245. "borderWidth": 1,
  246. "borderRadius": 0,
  247. "pageButtonItemGap": 5,
  248. "pageButtonPosition": "end",
  249. "pageFormatter": "{current}/{total}",
  250. "pageIconColor": "#2f4554",
  251. "pageIconInactiveColor": "#aaa",
  252. "pageIconSize": 15,
  253. "animationDurationUpdate": 800,
  254. "selector": false,
  255. "selectorPosition": "auto",
  256. "selectorItemGap": 7,
  257. "selectorButtonGap": 10
  258. }
  259. ],
  260. "tooltip": {
  261. "show": true,
  262. "trigger": "axis",
  263. "triggerOn": "mousemove|click",
  264. "axisPointer": {
  265. "type": "line"
  266. },
  267. "showContent": true,
  268. "alwaysShowContent": false,
  269. "showDelay": 0,
  270. "hideDelay": 100,
  271. "enterable": false,
  272. "confine": false,
  273. "appendToBody": false,
  274. "transitionDuration": 0.4,
  275. "textStyle": {
  276. "fontSize": 14
  277. },
  278. "borderWidth": 0,
  279. "padding": 5,
  280. "order": "seriesAsc"
  281. },
  282. "xAxis": [
  283. {
  284. "type": "category",
  285. "show": true,
  286. "scale": false,
  287. "nameLocation": "end",
  288. "nameGap": 15,
  289. "gridIndex": 0,
  290. "inverse": false,
  291. "offset": 0,
  292. "splitNumber": 5,
  293. "boundaryGap": false,
  294. "minInterval": 0,
  295. "splitLine": {
  296. "show": true,
  297. "lineStyle": {
  298. "show": true,
  299. "width": 1,
  300. "opacity": 1,
  301. "curveness": 0,
  302. "type": "solid"
  303. }
  304. },
  305. "data": [
  306. "\u5468\u4e00",
  307. "\u5468\u4e8c",
  308. "\u5468\u4e09",
  309. "\u5468\u56db",
  310. "\u5468\u4e94",
  311. "\u5468\u516d",
  312. "\u5468\u65e5"
  313. ]
  314. }
  315. ],
  316. "yAxis": [
  317. {
  318. "show": true,
  319. "scale": false,
  320. "nameLocation": "end",
  321. "nameGap": 15,
  322. "gridIndex": 0,
  323. "inverse": false,
  324. "offset": 0,
  325. "splitNumber": 5,
  326. "minInterval": 0,
  327. "splitLine": {
  328. "show": true,
  329. "lineStyle": {
  330. "show": true,
  331. "width": 1,
  332. "opacity": 1,
  333. "curveness": 0,
  334. "type": "solid"
  335. }
  336. }
  337. }
  338. ],
  339. "title": [
  340. {
  341. "show": true,
  342. "text": "\u672a\u6765\u4e00\u5468\u6c14\u6e29\u53d8\u5316",
  343. "target": "blank",
  344. "subtext": "\u7eaf\u5c5e\u865a\u6784",
  345. "subtarget": "blank",
  346. "padding": 5,
  347. "itemGap": 10,
  348. "textAlign": "auto",
  349. "textVerticalAlign": "auto",
  350. "triggerEvent": false
  351. }
  352. ],
  353. "toolbox": {
  354. "show": true,
  355. "orient": "horizontal",
  356. "itemSize": 15,
  357. "itemGap": 10,
  358. "left": "80%",
  359. "feature": {
  360. "saveAsImage": {
  361. "type": "png",
  362. "backgroundColor": "auto",
  363. "connectedBackgroundColor": "#fff",
  364. "show": true,
  365. "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
  366. "pixelRatio": 1
  367. },
  368. "restore": {
  369. "show": true,
  370. "title": "\u8fd8\u539f"
  371. },
  372. "dataView": {
  373. "show": true,
  374. "title": "\u6570\u636e\u89c6\u56fe",
  375. "readOnly": false,
  376. "lang": [
  377. "\u6570\u636e\u89c6\u56fe",
  378. "\u5173\u95ed",
  379. "\u5237\u65b0"
  380. ],
  381. "backgroundColor": "#fff",
  382. "textareaColor": "#fff",
  383. "textareaBorderColor": "#333",
  384. "textColor": "#000",
  385. "buttonColor": "#c23531",
  386. "buttonTextColor": "#fff"
  387. },
  388. "dataZoom": {
  389. "show": true,
  390. "title": {
  391. "zoom": "\u533a\u57df\u7f29\u653e",
  392. "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
  393. },
  394. "icon": {},
  395. "filterMode": "filter"
  396. },
  397. "magicType": {
  398. "show": true,
  399. "type": [
  400. "line",
  401. "bar",
  402. "stack",
  403. "tiled"
  404. ],
  405. "title": {
  406. "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
  407. "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
  408. "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
  409. "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
  410. },
  411. "icon": {}
  412. }
  413. }
  414. }
  415. };
  416. chart_bd58e7e217b94c119d969add15496383.setOption(option_bd58e7e217b94c119d969add15496383);
  417. window.addEventListener('resize', function(){
  418. chart_bd58e7e217b94c119d969add15496383.resize();
  419. })
  420. </script>
  421. </body>
  422. </html>