v5.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. (function(root, factory) {
  20. if (typeof define === 'function' && define.amd) {
  21. // AMD. Register as an anonymous module.
  22. define(['exports', 'echarts'], factory);
  23. } else if (
  24. typeof exports === 'object' &&
  25. typeof exports.nodeName !== 'string'
  26. ) {
  27. // CommonJS
  28. factory(exports, require('echarts/lib/echarts'));
  29. } else {
  30. // Browser globals
  31. factory({}, root.echarts);
  32. }
  33. })(this, function(exports, echarts) {
  34. var log = function(msg) {
  35. if (typeof console !== 'undefined') {
  36. console && console.error && console.error(msg);
  37. }
  38. };
  39. if (!echarts) {
  40. log('ECharts is not Loaded');
  41. return;
  42. }
  43. var colorPalette = [
  44. '#5470c6',
  45. '#91cc75',
  46. '#fac858',
  47. '#ee6666',
  48. '#73c0de',
  49. '#3ba272',
  50. '#fc8452',
  51. '#9a60b4',
  52. '#ea7ccc'
  53. ];
  54. var axisCommon = function() {
  55. return {
  56. axisLine: {
  57. lineStyle: {
  58. color: '#6E7079'
  59. }
  60. },
  61. axisLabel: {
  62. color: null
  63. },
  64. splitLine: {
  65. lineStyle: {
  66. color: ['#E0E6F1']
  67. }
  68. },
  69. splitArea: {
  70. areaStyle: {
  71. color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
  72. }
  73. },
  74. minorSplitLine: {
  75. color: '#F4F7FD'
  76. }
  77. };
  78. };
  79. var gradientColor = ['#f6efa6', '#d88273', '#bf444c'];
  80. echarts.registerTheme('v5', {
  81. color: colorPalette,
  82. gradientColor: gradientColor,
  83. loading: {
  84. textColor: 'red'
  85. },
  86. // Series
  87. bar: {
  88. defaultBarGap: '20%',
  89. select: {
  90. itemStyle: {
  91. borderColor: '#212121',
  92. borderWidth: 1
  93. }
  94. }
  95. },
  96. boxplot: {
  97. emphasis: {
  98. itemStyle: {
  99. shadowColor: 'rgba(0,0,0,0.2)'
  100. }
  101. }
  102. },
  103. funnel: {
  104. bottom: 60,
  105. select: {
  106. itemStyle: {
  107. borderColor: '#212121',
  108. borderWidth: 1
  109. }
  110. },
  111. label: {
  112. color: 'inherit'
  113. }
  114. },
  115. gauge: {
  116. axisLine: {
  117. lineStyle: {
  118. color: [[1, '#E6EBF8']]
  119. }
  120. },
  121. splitLine: {
  122. lineStyle: {
  123. color: '#63677A'
  124. }
  125. },
  126. axisTick: {
  127. lineStyle: {
  128. color: '#63677A'
  129. }
  130. },
  131. axisLabel: {
  132. color: '#464646'
  133. },
  134. anchor: {
  135. itemStyle: {
  136. color: '#fff',
  137. borderColor: '#5470c6'
  138. }
  139. },
  140. title: {
  141. color: '#464646',
  142. },
  143. detail: {
  144. backgroundColor: 'rgba(0,0,0,0)',
  145. borderColor: '#ccc',
  146. color: '#464646'
  147. }
  148. },
  149. graph: {
  150. lineStyle: {
  151. color: '#aaa'
  152. },
  153. select: {
  154. itemStyle: {
  155. borderColor: '#212121'
  156. }
  157. }
  158. },
  159. heatmap: {
  160. select: {
  161. itemStyle: {
  162. borderColor: '#212121'
  163. }
  164. }
  165. },
  166. line: {
  167. symbolSize: 4
  168. },
  169. pictorialBar: {
  170. select: {
  171. itemStyle: {
  172. borderColor: '#212121',
  173. borderWidth: 1
  174. }
  175. }
  176. },
  177. pie: {
  178. radius: [0, '75%'],
  179. labelLine: {
  180. length2: 15
  181. }
  182. },
  183. map: {
  184. defaultItemStyleColor: '#eee',
  185. label: {
  186. color: '#000'
  187. },
  188. itemStyle: {
  189. borderColor: '#444',
  190. areaColor: '#eee'
  191. },
  192. emphasis: {
  193. label: {
  194. color: 'rgb(100,0,0)'
  195. },
  196. itemStyle: {
  197. areaColor: 'rgba(255,215,0,0.8)'
  198. }
  199. },
  200. select: {
  201. label: {
  202. color: 'rgb(100,0,0)'
  203. },
  204. itemStyle: {
  205. color: 'rgba(255,215,0,0.8)'
  206. }
  207. },
  208. },
  209. sankey: {
  210. lineStyle: {
  211. color: '#314656'
  212. },
  213. select: {
  214. itemStyle: {
  215. borderColor: '#212121'
  216. }
  217. },
  218. },
  219. scatter: {
  220. select: {
  221. itemStyle: {
  222. borderColor: '#212121'
  223. }
  224. }
  225. },
  226. tree: {
  227. lineStyle: {
  228. color: '#ccc'
  229. }
  230. },
  231. treemap: {
  232. left: 'center',
  233. top: 'middle',
  234. width: '80%',
  235. height: '80%',
  236. scaleLimit: {
  237. max: null,
  238. min: null
  239. },
  240. breadcrumb: {
  241. top: 'bottom',
  242. bottom: null,
  243. itemStyle: {
  244. color: 'rgba(0,0,0,0.7)', // '#5793f3',
  245. textStyle: {
  246. color: '#fff'
  247. }
  248. },
  249. emphasis: {
  250. itemStyle: {
  251. color: 'rgba(0,0,0,0.9)' // '#5793f3',
  252. }
  253. }
  254. }
  255. },
  256. // Components
  257. timeAxis: axisCommon(),
  258. logAxis: axisCommon(),
  259. valueAxis: axisCommon(),
  260. categoryAxis: (() => {
  261. const axis = axisCommon();
  262. axis.axisTick = {
  263. show: true
  264. };
  265. return axis;
  266. })(),
  267. axisPointer: {
  268. lineStyle: {
  269. color: '#B9BEC9'
  270. },
  271. shadowStyle: {
  272. color: 'rgba(210,219,238,0.2)'
  273. },
  274. label: {
  275. backgroundColor: 'auto',
  276. color: '#fff'
  277. },
  278. handle: {
  279. color: '#333',
  280. shadowBlur: 3,
  281. shadowColor: '#aaa',
  282. shadowOffsetX: 0,
  283. shadowOffsetY: 2,
  284. }
  285. },
  286. brush: {
  287. brushStyle: {
  288. color: 'rgba(210,219,238,0.3)',
  289. borderColor: '#D2DBEE'
  290. },
  291. defaultOutOfBrushColor: '#ddd'
  292. },
  293. calendar: {
  294. splitLine: {
  295. lineStyle: {
  296. color: '#000'
  297. }
  298. },
  299. itemStyle: {
  300. borderColor: '#ccc'
  301. },
  302. dayLabel: {
  303. margin: '50%',
  304. color: '#000'
  305. },
  306. monthLabel: {
  307. margin: 5,
  308. color: '#000'
  309. },
  310. yearLabel: {
  311. margin: 30,
  312. color: '#ccc'
  313. }
  314. },
  315. dataZoom: {
  316. borderColor: '#d2dbee',
  317. borderRadius: 3,
  318. backgroundColor: 'rgba(47,69,84,0)',
  319. dataBackground: {
  320. lineStyle: {
  321. color: '#d2dbee',
  322. width: 0.5
  323. },
  324. areaStyle: {
  325. color: '#d2dbee',
  326. opacity: 0.2
  327. }
  328. },
  329. selectedDataBackground: {
  330. lineStyle: {
  331. color: '#8fb0f7',
  332. width: 0.5
  333. },
  334. areaStyle: {
  335. color: '#8fb0f7',
  336. opacity: 0.2
  337. }
  338. },
  339. handleStyle: {
  340. color: '#fff',
  341. borderColor: '#ACB8D1'
  342. },
  343. moveHandleStyle: {
  344. color: '#D2DBEE',
  345. opacity: 0.7
  346. },
  347. textStyle: {
  348. color: '#6E7079'
  349. },
  350. brushStyle: {
  351. color: 'rgba(135,175,274,0.15)'
  352. },
  353. emphasis: {
  354. handleStyle: {
  355. borderColor: '#8FB0F7'
  356. },
  357. moveHandleStyle: {
  358. color: '#8FB0F7',
  359. opacity: 0.7
  360. }
  361. },
  362. defaultLocationEdgeGap: 7
  363. },
  364. geo: {
  365. defaultItemStyleColor: '#eee',
  366. label: {
  367. color: '#000'
  368. },
  369. itemStyle: {
  370. borderColor: '#444'
  371. },
  372. emphasis: {
  373. label: {
  374. color: 'rgb(100,0,0)'
  375. },
  376. itemStyle: {
  377. color: 'rgba(255,215,0,0.8)'
  378. }
  379. },
  380. select: {
  381. label: {
  382. color: 'rgb(100,0,0)'
  383. },
  384. itemStyle: {
  385. color: 'rgba(255,215,0,0.8)'
  386. }
  387. }
  388. },
  389. grid: {
  390. left: '10%',
  391. top: 60,
  392. bottom: 70,
  393. borderColor: '#ccc'
  394. },
  395. legend: {
  396. top: 0,
  397. bottom: null,
  398. backgroundColor: 'rgba(0,0,0,0)',
  399. borderColor: '#ccc',
  400. itemGap: 10,
  401. inactiveColor: '#ccc',
  402. inactiveBorderColor: '#ccc',
  403. lineStyle: {
  404. inactiveColor: '#ccc',
  405. },
  406. textStyle: {
  407. color: '#333'
  408. },
  409. selectorLabel: {
  410. color: '#666',
  411. borderColor: '#666'
  412. },
  413. emphasis: {
  414. selectorLabel: {
  415. color: '#eee',
  416. backgroundColor: '#666'
  417. }
  418. },
  419. pageIconColor: '#2f4554',
  420. pageIconInactiveColor: '#aaa',
  421. pageTextStyle: {
  422. color: '#333'
  423. }
  424. },
  425. radar: (() => {
  426. const radar = axisCommon();
  427. radar.radius = '75%';
  428. radar.axisName = {
  429. color: '#bbb'
  430. };
  431. radar.axisLine.lineStyle.color = '#bbb';
  432. return radar;
  433. })(),
  434. timeline: {
  435. padding: 5,
  436. borderColor: '#ccc',
  437. lineStyle: {
  438. color: '#DAE1F5'
  439. },
  440. label: {
  441. color: '#A4B1D7'
  442. },
  443. itemStyle: {
  444. color: '#A4B1D7',
  445. borderWidth: 1
  446. },
  447. checkpointStyle: {
  448. color: '#316bf3',
  449. borderColor: '#fff',
  450. borderWidth: 2,
  451. shadowBlur: 2,
  452. shadowOffsetX: 1,
  453. shadowOffsetY: 1,
  454. shadowColor: 'rgba(0, 0, 0, 0.3)',
  455. },
  456. controlStyle: {
  457. playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
  458. stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
  459. // eslint-disable-next-line max-len
  460. nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
  461. // eslint-disable-next-line max-len
  462. prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
  463. color: '#A4B1D7',
  464. borderColor: '#A4B1D7',
  465. borderWidth: 1
  466. },
  467. emphasis: {
  468. label: {
  469. color: '#6f778d'
  470. },
  471. itemStyle: {
  472. color: '#316BF3'
  473. },
  474. controlStyle: {
  475. color: '#316BF3',
  476. borderColor: '#316BF3',
  477. borderWidth: 2
  478. }
  479. },
  480. progress: {
  481. lineStyle: {
  482. color: '#316BF3'
  483. },
  484. itemStyle: {
  485. color: '#316BF3'
  486. },
  487. label: {
  488. color: '#6f778d'
  489. }
  490. },
  491. },
  492. title: {
  493. left: 0,
  494. top: 0,
  495. backgroundColor: 'rgba(0,0,0,0)',
  496. borderColor: '#ccc',
  497. textStyle: {
  498. color: '#464646'
  499. },
  500. subtextStyle: {
  501. color: '#6E7079'
  502. }
  503. },
  504. toolbox: {
  505. borderColor: '#ccc',
  506. padding: 5,
  507. itemGap: 8,
  508. iconStyle: {
  509. borderColor: '#666',
  510. },
  511. emphasis: {
  512. iconStyle: {
  513. borderColor: '#3E98C5'
  514. }
  515. }
  516. },
  517. tooltip: {
  518. axisPointer: {
  519. crossStyle: {
  520. color: '#999'
  521. }
  522. },
  523. textStyle: {
  524. color: '#666'
  525. },
  526. backgroundColor: '#fff',
  527. borderWidth: 1,
  528. defaultBorderColor: '#fff'
  529. },
  530. visualMap: {
  531. color: [gradientColor[2], gradientColor[1], gradientColor[0]],
  532. inactive: ['rgba(0,0,0,0)'],
  533. indicatorStyle: {
  534. shadowColor: 'rgba(0,0,0,0.2)'
  535. },
  536. backgroundColor: 'rgba(0,0,0,0)',
  537. borderColor: '#ccc',
  538. contentColor: '#5793f3',
  539. inactiveColor: '#aaa',
  540. padding: 5,
  541. textStyle: {
  542. color: '#333'
  543. }
  544. }
  545. });
  546. });