config-ucharts.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601
  1. /*
  2. * uCharts®
  3. * 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
  4. * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
  5. * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  6. * 复制使用请保留本段注释,感谢支持开源!
  7. *
  8. * uCharts®官方网站
  9. * https://www.uCharts.cn
  10. *
  11. * 开源地址:
  12. * https://gitee.com/uCharts/uCharts
  13. *
  14. * uni-app插件市场地址:
  15. * http://ext.dcloud.net.cn/plugin?id=271
  16. *
  17. */
  18. // 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
  19. const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
  20. //事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
  21. const formatDateTime = (timeStamp, returnType)=>{
  22. var date = new Date();
  23. date.setTime(timeStamp * 1000);
  24. var y = date.getFullYear();
  25. var m = date.getMonth() + 1;
  26. m = m < 10 ? ('0' + m) : m;
  27. var d = date.getDate();
  28. d = d < 10 ? ('0' + d) : d;
  29. var h = date.getHours();
  30. h = h < 10 ? ('0' + h) : h;
  31. var minute = date.getMinutes();
  32. var second = date.getSeconds();
  33. minute = minute < 10 ? ('0' + minute) : minute;
  34. second = second < 10 ? ('0' + second) : second;
  35. if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
  36. if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
  37. if(returnType == 'h:m'){return h +':' + minute;}
  38. if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
  39. return [y, m, d, h, minute, second];
  40. }
  41. const cfu = {
  42. //demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
  43. "type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
  44. "range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
  45. //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
  46. //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
  47. "categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
  48. //instance为实例变量承载属性,不要删除
  49. "instance":{},
  50. //option为opts及eopts承载属性,不要删除
  51. "option":{},
  52. //下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
  53. "formatter":{
  54. "yAxisDemo1":function(val, index, opts){return val+'元'},
  55. "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
  56. "xAxisDemo1":function(val, index, opts){return val+'年';},
  57. "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
  58. "seriesDemo1":function(val, index, series, opts){return val+'元'},
  59. "tooltipDemo1":function(item, category, index, opts){
  60. if(index==0){
  61. return '随便用'+item.data+'年'
  62. }else{
  63. return '其他我没改'+item.data+'天'
  64. }
  65. },
  66. "pieDemo":function(val, index, series, opts){
  67. if(index !== undefined){
  68. return series[index].name+':'+series[index].data+'元'
  69. }
  70. },
  71. },
  72. //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
  73. "demotype":{
  74. //我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
  75. "type": "line",
  76. "color": color,
  77. "padding": [15,10,0,15],
  78. "xAxis": {
  79. "disableGrid": true,
  80. },
  81. "yAxis": {
  82. "gridType": "dash",
  83. "dashLength": 2,
  84. },
  85. "legend": {
  86. },
  87. "extra": {
  88. "line": {
  89. "type": "curve",
  90. "width": 2
  91. },
  92. }
  93. },
  94. //下面是自定义配置,请添加项目所需的通用配置
  95. "pie":{
  96. "type": "pie",
  97. "color": color,
  98. "padding": [5,5,5,5],
  99. "extra": {
  100. "pie": {
  101. "activeOpacity": 0.5,
  102. "activeRadius": 10,
  103. "offsetAngle": 0,
  104. "labelWidth": 15,
  105. "border": true,
  106. "borderWidth": 3,
  107. "borderColor": "#FFFFFF"
  108. },
  109. }
  110. },
  111. "ring":{
  112. "type": "ring",
  113. "color": color,
  114. "padding": [5,5,5,5],
  115. "rotate": false,
  116. "dataLabel": true,
  117. "legend": {
  118. "show": true,
  119. "position": "right",
  120. "lineHeight": 25,
  121. },
  122. "title": {
  123. "name": "收益率",
  124. "fontSize": 15,
  125. "color": "#666666"
  126. },
  127. "subtitle": {
  128. "name": "70%",
  129. "fontSize": 25,
  130. "color": "#7cb5ec"
  131. },
  132. "extra": {
  133. "ring": {
  134. "ringWidth":30,
  135. "activeOpacity": 0.5,
  136. "activeRadius": 10,
  137. "offsetAngle": 0,
  138. "labelWidth": 15,
  139. "border": true,
  140. "borderWidth": 3,
  141. "borderColor": "#FFFFFF"
  142. },
  143. },
  144. },
  145. "rose":{
  146. "type": "rose",
  147. "color": color,
  148. "padding": [5,5,5,5],
  149. "legend": {
  150. "show": true,
  151. "position": "left",
  152. "lineHeight": 25,
  153. },
  154. "extra": {
  155. "rose": {
  156. "type": "area",
  157. "minRadius": 50,
  158. "activeOpacity": 0.5,
  159. "activeRadius": 10,
  160. "offsetAngle": 0,
  161. "labelWidth": 15,
  162. "border": false,
  163. "borderWidth": 2,
  164. "borderColor": "#FFFFFF"
  165. },
  166. }
  167. },
  168. "word":{
  169. "type": "word",
  170. "color": color,
  171. "extra": {
  172. "word": {
  173. "type": "normal",
  174. "autoColors": false
  175. }
  176. }
  177. },
  178. "funnel":{
  179. "type": "funnel",
  180. "color": color,
  181. "padding": [15,15,0,15],
  182. "extra": {
  183. "funnel": {
  184. "activeOpacity": 0.3,
  185. "activeWidth": 10,
  186. "border": true,
  187. "borderWidth": 2,
  188. "borderColor": "#FFFFFF",
  189. "fillOpacity": 1,
  190. "labelAlign": "right"
  191. },
  192. }
  193. },
  194. "map":{
  195. "type": "map",
  196. "color": color,
  197. "padding": [0,0,0,0],
  198. "dataLabel": true,
  199. "extra": {
  200. "map": {
  201. "border": true,
  202. "borderWidth": 1,
  203. "borderColor": "#666666",
  204. "fillOpacity": 0.6,
  205. "activeBorderColor": "#F04864",
  206. "activeFillColor": "#FACC14",
  207. "activeFillOpacity": 1
  208. },
  209. }
  210. },
  211. "arcbar":{
  212. "type": "arcbar",
  213. "color": color,
  214. "title": {
  215. "name": "百分比",
  216. "fontSize": 25,
  217. "color": "#00FF00"
  218. },
  219. "subtitle": {
  220. "name": "默认标题",
  221. "fontSize": 15,
  222. "color": "#666666"
  223. },
  224. "extra": {
  225. "arcbar": {
  226. "type": "default",
  227. "width": 12,
  228. "backgroundColor": "#E9E9E9",
  229. "startAngle": 0.75,
  230. "endAngle": 0.25,
  231. "gap": 2
  232. }
  233. }
  234. },
  235. "line":{
  236. "type": "line",
  237. "color": color,
  238. "padding": [15,10,0,15],
  239. "xAxis": {
  240. "disableGrid": true,
  241. },
  242. "yAxis": {
  243. "gridType": "dash",
  244. "dashLength": 2,
  245. },
  246. "legend": {
  247. },
  248. "extra": {
  249. "line": {
  250. "type": "straight",
  251. "width": 2
  252. },
  253. }
  254. },
  255. "tline":{
  256. "type": "line",
  257. "color": color,
  258. "padding": [15,10,0,15],
  259. "xAxis": {
  260. "disableGrid": false,
  261. "boundaryGap":"justify",
  262. },
  263. "yAxis": {
  264. "gridType": "dash",
  265. "dashLength": 2,
  266. "data":[
  267. {
  268. "min":0,
  269. "max":80
  270. }
  271. ]
  272. },
  273. "legend": {
  274. },
  275. "extra": {
  276. "line": {
  277. "type": "curve",
  278. "width": 2
  279. },
  280. }
  281. },
  282. "tarea":{
  283. "type": "area",
  284. "color": color,
  285. "padding": [15,10,0,15],
  286. "xAxis": {
  287. "disableGrid": true,
  288. "boundaryGap":"justify",
  289. },
  290. "yAxis": {
  291. "gridType": "dash",
  292. "dashLength": 2,
  293. "data":[
  294. {
  295. "min":0,
  296. "max":80
  297. }
  298. ]
  299. },
  300. "legend": {
  301. },
  302. "extra": {
  303. "area": {
  304. "type": "curve",
  305. "opacity": 0.2,
  306. "addLine": true,
  307. "width": 2,
  308. "gradient": true
  309. },
  310. }
  311. },
  312. "column":{
  313. "type": "column",
  314. "color": color,
  315. "padding": [15,15,0,5],
  316. "xAxis": {
  317. "disableGrid": true,
  318. },
  319. "yAxis": {
  320. "data":[{"min":0}]
  321. },
  322. "legend": {
  323. },
  324. "extra": {
  325. "column": {
  326. "type": "group",
  327. "width": 30,
  328. "activeBgColor": "#000000",
  329. "activeBgOpacity": 0.08
  330. },
  331. }
  332. },
  333. "mount":{
  334. "type": "mount",
  335. "color": color,
  336. "padding": [15,15,0,5],
  337. "xAxis": {
  338. "disableGrid": true,
  339. },
  340. "yAxis": {
  341. "data":[{"min":0}]
  342. },
  343. "legend": {
  344. },
  345. "extra": {
  346. "mount": {
  347. "type": "mount",
  348. "widthRatio": 1.5,
  349. },
  350. }
  351. },
  352. "bar":{
  353. "type": "bar",
  354. "color": color,
  355. "padding": [15,30,0,5],
  356. "xAxis": {
  357. "boundaryGap":"justify",
  358. "disableGrid":false,
  359. "min":0,
  360. "axisLine":false
  361. },
  362. "yAxis": {
  363. },
  364. "legend": {
  365. },
  366. "extra": {
  367. "bar": {
  368. "type": "group",
  369. "width": 30,
  370. "meterBorde": 1,
  371. "meterFillColor": "#FFFFFF",
  372. "activeBgColor": "#000000",
  373. "activeBgOpacity": 0.08
  374. },
  375. }
  376. },
  377. "area":{
  378. "type": "area",
  379. "color": color,
  380. "padding": [15,15,0,15],
  381. "xAxis": {
  382. "disableGrid": true,
  383. },
  384. "yAxis": {
  385. "gridType": "dash",
  386. "dashLength": 2,
  387. },
  388. "legend": {
  389. },
  390. "extra": {
  391. "area": {
  392. "type": "straight",
  393. "opacity": 0.2,
  394. "addLine": true,
  395. "width": 2,
  396. "gradient": false
  397. },
  398. }
  399. },
  400. "radar":{
  401. "type": "radar",
  402. "color": color,
  403. "padding": [5,5,5,5],
  404. "dataLabel": false,
  405. "legend": {
  406. "show": true,
  407. "position": "right",
  408. "lineHeight": 25,
  409. },
  410. "extra": {
  411. "radar": {
  412. "gridType": "radar",
  413. "gridColor": "#CCCCCC",
  414. "gridCount": 3,
  415. "opacity": 0.2,
  416. "max": 200
  417. },
  418. }
  419. },
  420. "gauge":{
  421. "type": "gauge",
  422. "color": color,
  423. "title": {
  424. "name": "66Km/H",
  425. "fontSize": 25,
  426. "color": "#2fc25b",
  427. "offsetY": 50
  428. },
  429. "subtitle": {
  430. "name": "实时速度",
  431. "fontSize": 15,
  432. "color": "#1890ff",
  433. "offsetY": -50
  434. },
  435. "extra": {
  436. "gauge": {
  437. "type": "default",
  438. "width": 30,
  439. "labelColor": "#666666",
  440. "startAngle": 0.75,
  441. "endAngle": 0.25,
  442. "startNumber": 0,
  443. "endNumber": 100,
  444. "labelFormat": "",
  445. "splitLine": {
  446. "fixRadius": 0,
  447. "splitNumber": 10,
  448. "width": 30,
  449. "color": "#FFFFFF",
  450. "childNumber": 5,
  451. "childWidth": 12
  452. },
  453. "pointer": {
  454. "width": 24,
  455. "color": "auto"
  456. }
  457. }
  458. }
  459. },
  460. "candle":{
  461. "type": "candle",
  462. "color": color,
  463. "padding": [15,15,0,15],
  464. "enableScroll": true,
  465. "enableMarkLine": true,
  466. "dataLabel": false,
  467. "xAxis": {
  468. "labelCount": 4,
  469. "itemCount": 40,
  470. "disableGrid": true,
  471. "gridColor": "#CCCCCC",
  472. "gridType": "solid",
  473. "dashLength": 4,
  474. "scrollShow": true,
  475. "scrollAlign": "left",
  476. "scrollColor": "#A6A6A6",
  477. "scrollBackgroundColor": "#EFEBEF"
  478. },
  479. "yAxis": {
  480. },
  481. "legend": {
  482. },
  483. "extra": {
  484. "candle": {
  485. "color": {
  486. "upLine": "#f04864",
  487. "upFill": "#f04864",
  488. "downLine": "#2fc25b",
  489. "downFill": "#2fc25b"
  490. },
  491. "average": {
  492. "show": true,
  493. "name": ["MA5","MA10","MA30"],
  494. "day": [5,10,20],
  495. "color": ["#1890ff","#2fc25b","#facc14"]
  496. }
  497. },
  498. "markLine": {
  499. "type": "dash",
  500. "dashLength": 5,
  501. "data": [
  502. {
  503. "value": 2150,
  504. "lineColor": "#f04864",
  505. "showLabel": true
  506. },
  507. {
  508. "value": 2350,
  509. "lineColor": "#f04864",
  510. "showLabel": true
  511. }
  512. ]
  513. }
  514. }
  515. },
  516. "mix":{
  517. "type": "mix",
  518. "color": color,
  519. "padding": [15,15,0,15],
  520. "xAxis": {
  521. "disableGrid": true,
  522. },
  523. "yAxis": {
  524. "disabled": false,
  525. "disableGrid": false,
  526. "splitNumber": 5,
  527. "gridType": "dash",
  528. "dashLength": 4,
  529. "gridColor": "#CCCCCC",
  530. "padding": 10,
  531. "showTitle": true,
  532. "data": []
  533. },
  534. "legend": {
  535. },
  536. "extra": {
  537. "mix": {
  538. "column": {
  539. "width": 20
  540. }
  541. },
  542. }
  543. },
  544. "scatter":{
  545. "type": "scatter",
  546. "color":color,
  547. "padding":[15,15,0,15],
  548. "dataLabel":false,
  549. "xAxis": {
  550. "disableGrid": false,
  551. "gridType":"dash",
  552. "splitNumber":5,
  553. "boundaryGap":"justify",
  554. "min":0
  555. },
  556. "yAxis": {
  557. "disableGrid": false,
  558. "gridType":"dash",
  559. },
  560. "legend": {
  561. },
  562. "extra": {
  563. "scatter": {
  564. },
  565. }
  566. },
  567. "bubble":{
  568. "type": "bubble",
  569. "color":color,
  570. "padding":[15,15,0,15],
  571. "xAxis": {
  572. "disableGrid": false,
  573. "gridType":"dash",
  574. "splitNumber":5,
  575. "boundaryGap":"justify",
  576. "min":0,
  577. "max":250
  578. },
  579. "yAxis": {
  580. "disableGrid": false,
  581. "gridType":"dash",
  582. "data":[{
  583. "min":0,
  584. "max":150
  585. }]
  586. },
  587. "legend": {
  588. },
  589. "extra": {
  590. "bubble": {
  591. "border":2,
  592. "opacity": 0.5,
  593. },
  594. }
  595. }
  596. }
  597. export default cfu;