config-ucharts.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
  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. "formatterTime":function(val, index, opts){
  55. if(index > opts.xAxis.labelCount && opts.categories.length%opts.xAxis.labelCount > 0 && index == opts.categories.length - 1) {
  56. return ''
  57. } else {
  58. return val ? val.substring(11,16) : ''
  59. }
  60. },
  61. "yAxisDemo1":function(val, index, opts){return val+'元'},
  62. "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
  63. "xAxisDemo1":function(val, index, opts){return val+'年';},
  64. "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
  65. "seriesDemo1":function(val, index, series, opts){return val+'元'},
  66. "tooltipDemo1":function(item, category, index, opts){
  67. if(index==0){
  68. return '随便用'+item.data+'年'
  69. }else{
  70. return '其他我没改'+item.data+'天'
  71. }
  72. },
  73. "pieDemo":function(val, index, series, opts){
  74. if(index !== undefined){
  75. return series[index].name+':'+series[index].data+'元'
  76. }
  77. },
  78. "bsTooltip":function(val, index, series, opts){
  79. return index + " " + val.name + ":" + val.data + "mmol/L"
  80. },
  81. "bpTooltip":function(val, index, series, opts){
  82. return index + " " + val.name + ":" + val.data + "mmHg"
  83. },
  84. "heartTooltip":function(val, index, series, opts){
  85. return index + " " + val.name + ":" + val.data + "次/分钟"
  86. },
  87. "spTooltip":function(val, index, series, opts){
  88. return index + " " + val.name + ":" + val.data.value + "%"
  89. },
  90. "temTooltip":function(val, index, series, opts){
  91. return index + " " + val.name + ":" + val.data.value + "℃"
  92. },
  93. "uaTooltip":function(val, index, series, opts){
  94. return index + " " + val.name + ":" + val.data.value + "μmol/L"
  95. },
  96. "sportTooltip":function(val, index, series, opts){
  97. return `${index}点-${index+1}点:${val.data.value}公里`
  98. },
  99. "sportweekTooltip":function(val, index, series, opts){
  100. return index + ":" + val.data.value + "公里"
  101. },
  102. "pressureTooltip":function(val, index, series, opts){
  103. return index + " " + val.name + ":" + val.data.value
  104. },
  105. },
  106. //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
  107. "demotype":{
  108. //我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
  109. "type": "line",
  110. "color": color,
  111. "padding": [15,10,0,15],
  112. "xAxis": {
  113. "disableGrid": true,
  114. },
  115. "yAxis": {
  116. "gridType": "dash",
  117. "dashLength": 2,
  118. },
  119. "legend": {
  120. },
  121. "extra": {
  122. "line": {
  123. "type": "curve",
  124. "width": 2
  125. },
  126. }
  127. },
  128. //下面是自定义配置,请添加项目所需的通用配置
  129. "pie":{
  130. "type": "pie",
  131. "color": color,
  132. "padding": [5,5,5,5],
  133. "extra": {
  134. "pie": {
  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. "ring":{
  146. "type": "ring",
  147. "color": color,
  148. "padding": [5,5,5,5],
  149. "rotate": false,
  150. "dataLabel": true,
  151. "legend": {
  152. "show": true,
  153. "position": "right",
  154. "lineHeight": 25,
  155. },
  156. "title": {
  157. "name": "收益率",
  158. "fontSize": 15,
  159. "color": "#666666"
  160. },
  161. "subtitle": {
  162. "name": "70%",
  163. "fontSize": 25,
  164. "color": "#7cb5ec"
  165. },
  166. "extra": {
  167. "ring": {
  168. "ringWidth":30,
  169. "activeOpacity": 0.5,
  170. "activeRadius": 10,
  171. "offsetAngle": 0,
  172. "labelWidth": 15,
  173. "border": true,
  174. "borderWidth": 3,
  175. "borderColor": "#FFFFFF"
  176. },
  177. },
  178. },
  179. "rose":{
  180. "type": "rose",
  181. "color": color,
  182. "padding": [5,5,5,5],
  183. "legend": {
  184. "show": true,
  185. "position": "left",
  186. "lineHeight": 25,
  187. },
  188. "extra": {
  189. "rose": {
  190. "type": "area",
  191. "minRadius": 50,
  192. "activeOpacity": 0.5,
  193. "activeRadius": 10,
  194. "offsetAngle": 0,
  195. "labelWidth": 15,
  196. "border": false,
  197. "borderWidth": 2,
  198. "borderColor": "#FFFFFF"
  199. },
  200. }
  201. },
  202. "word":{
  203. "type": "word",
  204. "color": color,
  205. "extra": {
  206. "word": {
  207. "type": "normal",
  208. "autoColors": false
  209. }
  210. }
  211. },
  212. "funnel":{
  213. "type": "funnel",
  214. "color": color,
  215. "padding": [15,15,0,15],
  216. "extra": {
  217. "funnel": {
  218. "activeOpacity": 0.3,
  219. "activeWidth": 10,
  220. "border": true,
  221. "borderWidth": 2,
  222. "borderColor": "#FFFFFF",
  223. "fillOpacity": 1,
  224. "labelAlign": "right"
  225. },
  226. }
  227. },
  228. "map":{
  229. "type": "map",
  230. "color": color,
  231. "padding": [0,0,0,0],
  232. "dataLabel": true,
  233. "extra": {
  234. "map": {
  235. "border": true,
  236. "borderWidth": 1,
  237. "borderColor": "#666666",
  238. "fillOpacity": 0.6,
  239. "activeBorderColor": "#F04864",
  240. "activeFillColor": "#FACC14",
  241. "activeFillOpacity": 1
  242. },
  243. }
  244. },
  245. "arcbar":{
  246. "type": "arcbar",
  247. "color": color,
  248. "title": {
  249. "name": "百分比",
  250. "fontSize": 25,
  251. "color": "#00FF00"
  252. },
  253. "subtitle": {
  254. "name": "默认标题",
  255. "fontSize": 15,
  256. "color": "#666666"
  257. },
  258. "extra": {
  259. "arcbar": {
  260. "type": "default",
  261. "width": 12,
  262. "backgroundColor": "#E9E9E9",
  263. "startAngle": 0.75,
  264. "endAngle": 0.25,
  265. "gap": 2
  266. }
  267. }
  268. },
  269. "line":{
  270. "type": "line",
  271. "color": color,
  272. "padding": [15,10,0,15],
  273. "xAxis": {
  274. "disableGrid": true,
  275. },
  276. "yAxis": {
  277. "gridType": "dash",
  278. "dashLength": 2,
  279. },
  280. "legend": {
  281. },
  282. "extra": {
  283. "line": {
  284. "type": "straight",
  285. "width": 2,
  286. "activeType": "hollow"
  287. },
  288. }
  289. },
  290. "tline":{
  291. "type": "line",
  292. "color": color,
  293. "padding": [15,10,0,15],
  294. "xAxis": {
  295. "disableGrid": false,
  296. "boundaryGap":"justify",
  297. },
  298. "yAxis": {
  299. "gridType": "dash",
  300. "dashLength": 2,
  301. "data":[
  302. {
  303. "min":0,
  304. "max":80
  305. }
  306. ]
  307. },
  308. "legend": {
  309. },
  310. "extra": {
  311. "line": {
  312. "type": "curve",
  313. "width": 2,
  314. "activeType": "hollow"
  315. },
  316. }
  317. },
  318. "tarea":{
  319. "type": "area",
  320. "color": color,
  321. "padding": [15,10,0,15],
  322. "xAxis": {
  323. "disableGrid": true,
  324. "boundaryGap":"justify",
  325. },
  326. "yAxis": {
  327. "gridType": "dash",
  328. "dashLength": 2,
  329. "data":[
  330. {
  331. "min":0,
  332. "max":80
  333. }
  334. ]
  335. },
  336. "legend": {
  337. },
  338. "extra": {
  339. "area": {
  340. "type": "curve",
  341. "opacity": 0.2,
  342. "addLine": true,
  343. "width": 2,
  344. "gradient": true,
  345. "activeType": "hollow"
  346. },
  347. }
  348. },
  349. "column":{
  350. "type": "column",
  351. "color": color,
  352. "padding": [15,15,0,5],
  353. "xAxis": {
  354. "disableGrid": true,
  355. },
  356. "yAxis": {
  357. "data":[{"min":0}]
  358. },
  359. "legend": {
  360. },
  361. "extra": {
  362. "column": {
  363. "type": "group",
  364. "width": 30,
  365. "activeBgColor": "#000000",
  366. "activeBgOpacity": 0.08
  367. },
  368. }
  369. },
  370. "mount":{
  371. "type": "mount",
  372. "color": color,
  373. "padding": [15,15,0,5],
  374. "xAxis": {
  375. "disableGrid": true,
  376. },
  377. "yAxis": {
  378. "data":[{"min":0}]
  379. },
  380. "legend": {
  381. },
  382. "extra": {
  383. "mount": {
  384. "type": "mount",
  385. "widthRatio": 1.5,
  386. },
  387. }
  388. },
  389. "bar":{
  390. "type": "bar",
  391. "color": color,
  392. "padding": [15,30,0,5],
  393. "xAxis": {
  394. "boundaryGap":"justify",
  395. "disableGrid":false,
  396. "min":0,
  397. "axisLine":false
  398. },
  399. "yAxis": {
  400. },
  401. "legend": {
  402. },
  403. "extra": {
  404. "bar": {
  405. "type": "group",
  406. "width": 30,
  407. "meterBorde": 1,
  408. "meterFillColor": "#FFFFFF",
  409. "activeBgColor": "#000000",
  410. "activeBgOpacity": 0.08
  411. },
  412. }
  413. },
  414. "area":{
  415. "type": "area",
  416. "color": color,
  417. "padding": [15,15,0,15],
  418. "xAxis": {
  419. "disableGrid": true,
  420. },
  421. "yAxis": {
  422. "gridType": "dash",
  423. "dashLength": 2,
  424. },
  425. "legend": {
  426. },
  427. "extra": {
  428. "area": {
  429. "type": "straight",
  430. "opacity": 0.2,
  431. "addLine": true,
  432. "width": 2,
  433. "gradient": false,
  434. "activeType": "hollow"
  435. },
  436. }
  437. },
  438. "radar":{
  439. "type": "radar",
  440. "color": color,
  441. "padding": [5,5,5,5],
  442. "dataLabel": false,
  443. "legend": {
  444. "show": true,
  445. "position": "right",
  446. "lineHeight": 25,
  447. },
  448. "extra": {
  449. "radar": {
  450. "gridType": "radar",
  451. "gridColor": "#CCCCCC",
  452. "gridCount": 3,
  453. "opacity": 0.2,
  454. "max": 200,
  455. "labelShow": true
  456. },
  457. }
  458. },
  459. "gauge":{
  460. "type": "gauge",
  461. "color": color,
  462. "title": {
  463. "name": "66Km/H",
  464. "fontSize": 25,
  465. "color": "#2fc25b",
  466. "offsetY": 50
  467. },
  468. "subtitle": {
  469. "name": "实时速度",
  470. "fontSize": 15,
  471. "color": "#1890ff",
  472. "offsetY": -50
  473. },
  474. "extra": {
  475. "gauge": {
  476. "type": "default",
  477. "width": 30,
  478. "labelColor": "#666666",
  479. "startAngle": 0.75,
  480. "endAngle": 0.25,
  481. "startNumber": 0,
  482. "endNumber": 100,
  483. "labelFormat": "",
  484. "splitLine": {
  485. "fixRadius": 0,
  486. "splitNumber": 10,
  487. "width": 30,
  488. "color": "#FFFFFF",
  489. "childNumber": 5,
  490. "childWidth": 12
  491. },
  492. "pointer": {
  493. "width": 24,
  494. "color": "auto"
  495. }
  496. }
  497. }
  498. },
  499. "candle":{
  500. "type": "candle",
  501. "color": color,
  502. "padding": [15,15,0,15],
  503. "enableScroll": true,
  504. "enableMarkLine": true,
  505. "dataLabel": false,
  506. "xAxis": {
  507. "labelCount": 4,
  508. "itemCount": 40,
  509. "disableGrid": true,
  510. "gridColor": "#CCCCCC",
  511. "gridType": "solid",
  512. "dashLength": 4,
  513. "scrollShow": true,
  514. "scrollAlign": "left",
  515. "scrollColor": "#A6A6A6",
  516. "scrollBackgroundColor": "#EFEBEF"
  517. },
  518. "yAxis": {
  519. },
  520. "legend": {
  521. },
  522. "extra": {
  523. "candle": {
  524. "color": {
  525. "upLine": "#f04864",
  526. "upFill": "#f04864",
  527. "downLine": "#2fc25b",
  528. "downFill": "#2fc25b"
  529. },
  530. "average": {
  531. "show": true,
  532. "name": ["MA5","MA10","MA30"],
  533. "day": [5,10,20],
  534. "color": ["#1890ff","#2fc25b","#facc14"]
  535. }
  536. },
  537. "markLine": {
  538. "type": "dash",
  539. "dashLength": 5,
  540. "data": [
  541. {
  542. "value": 2150,
  543. "lineColor": "#f04864",
  544. "showLabel": true
  545. },
  546. {
  547. "value": 2350,
  548. "lineColor": "#f04864",
  549. "showLabel": true
  550. }
  551. ]
  552. }
  553. }
  554. },
  555. "mix":{
  556. "type": "mix",
  557. "color": color,
  558. "padding": [15,15,0,15],
  559. "xAxis": {
  560. "disableGrid": true,
  561. },
  562. "yAxis": {
  563. "disabled": false,
  564. "disableGrid": false,
  565. "splitNumber": 5,
  566. "gridType": "dash",
  567. "dashLength": 4,
  568. "gridColor": "#CCCCCC",
  569. "padding": 10,
  570. "showTitle": true,
  571. "data": []
  572. },
  573. "legend": {
  574. },
  575. "extra": {
  576. "mix": {
  577. "column": {
  578. "width": 20
  579. }
  580. },
  581. }
  582. },
  583. "scatter":{
  584. "type": "scatter",
  585. "color":color,
  586. "padding":[15,15,0,15],
  587. "dataLabel":false,
  588. "xAxis": {
  589. "disableGrid": false,
  590. "gridType":"dash",
  591. "splitNumber":5,
  592. "boundaryGap":"justify",
  593. "min":0
  594. },
  595. "yAxis": {
  596. "disableGrid": false,
  597. "gridType":"dash",
  598. },
  599. "legend": {
  600. },
  601. "extra": {
  602. "scatter": {
  603. },
  604. }
  605. },
  606. "bubble":{
  607. "type": "bubble",
  608. "color":color,
  609. "padding":[15,15,0,15],
  610. "xAxis": {
  611. "disableGrid": false,
  612. "gridType":"dash",
  613. "splitNumber":5,
  614. "boundaryGap":"justify",
  615. "min":0,
  616. "max":250
  617. },
  618. "yAxis": {
  619. "disableGrid": false,
  620. "gridType":"dash",
  621. "data":[{
  622. "min":0,
  623. "max":150
  624. }]
  625. },
  626. "legend": {
  627. },
  628. "extra": {
  629. "bubble": {
  630. "border":2,
  631. "opacity": 0.5,
  632. },
  633. }
  634. }
  635. }
  636. export default cfu;