洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

605 lines
13 KiB

10 months ago
  1. /*
  2. * uCharts®
  3. * 高性能跨平台图表库支持H5APP小程序微信/支付宝/百度/头条/QQ/360VueTaro等支持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. "activeType": "hollow"
  253. },
  254. }
  255. },
  256. "tline":{
  257. "type": "line",
  258. "color": color,
  259. "padding": [15,10,0,15],
  260. "xAxis": {
  261. "disableGrid": false,
  262. "boundaryGap":"justify",
  263. },
  264. "yAxis": {
  265. "gridType": "dash",
  266. "dashLength": 2,
  267. "data":[
  268. {
  269. "min":0,
  270. "max":80
  271. }
  272. ]
  273. },
  274. "legend": {
  275. },
  276. "extra": {
  277. "line": {
  278. "type": "curve",
  279. "width": 2,
  280. "activeType": "hollow"
  281. },
  282. }
  283. },
  284. "tarea":{
  285. "type": "area",
  286. "color": color,
  287. "padding": [15,10,0,15],
  288. "xAxis": {
  289. "disableGrid": true,
  290. "boundaryGap":"justify",
  291. },
  292. "yAxis": {
  293. "gridType": "dash",
  294. "dashLength": 2,
  295. "data":[
  296. {
  297. "min":0,
  298. "max":80
  299. }
  300. ]
  301. },
  302. "legend": {
  303. },
  304. "extra": {
  305. "area": {
  306. "type": "curve",
  307. "opacity": 0.2,
  308. "addLine": true,
  309. "width": 2,
  310. "gradient": true,
  311. "activeType": "hollow"
  312. },
  313. }
  314. },
  315. "column":{
  316. "type": "column",
  317. "color": color,
  318. "padding": [15,15,0,5],
  319. "xAxis": {
  320. "disableGrid": true,
  321. },
  322. "yAxis": {
  323. "data":[{"min":0}]
  324. },
  325. "legend": {
  326. },
  327. "extra": {
  328. "column": {
  329. "type": "group",
  330. "width": 30,
  331. "activeBgColor": "#000000",
  332. "activeBgOpacity": 0.08
  333. },
  334. }
  335. },
  336. "mount":{
  337. "type": "mount",
  338. "color": color,
  339. "padding": [15,15,0,5],
  340. "xAxis": {
  341. "disableGrid": true,
  342. },
  343. "yAxis": {
  344. "data":[{"min":0}]
  345. },
  346. "legend": {
  347. },
  348. "extra": {
  349. "mount": {
  350. "type": "mount",
  351. "widthRatio": 1.5,
  352. },
  353. }
  354. },
  355. "bar":{
  356. "type": "bar",
  357. "color": color,
  358. "padding": [15,30,0,5],
  359. "xAxis": {
  360. "boundaryGap":"justify",
  361. "disableGrid":false,
  362. "min":0,
  363. "axisLine":false
  364. },
  365. "yAxis": {
  366. },
  367. "legend": {
  368. },
  369. "extra": {
  370. "bar": {
  371. "type": "group",
  372. "width": 30,
  373. "meterBorde": 1,
  374. "meterFillColor": "#FFFFFF",
  375. "activeBgColor": "#000000",
  376. "activeBgOpacity": 0.08
  377. },
  378. }
  379. },
  380. "area":{
  381. "type": "area",
  382. "color": color,
  383. "padding": [15,15,0,15],
  384. "xAxis": {
  385. "disableGrid": true,
  386. },
  387. "yAxis": {
  388. "gridType": "dash",
  389. "dashLength": 2,
  390. },
  391. "legend": {
  392. },
  393. "extra": {
  394. "area": {
  395. "type": "straight",
  396. "opacity": 0.2,
  397. "addLine": true,
  398. "width": 2,
  399. "gradient": false,
  400. "activeType": "hollow"
  401. },
  402. }
  403. },
  404. "radar":{
  405. "type": "radar",
  406. "color": color,
  407. "padding": [5,5,5,5],
  408. "dataLabel": false,
  409. "legend": {
  410. "show": true,
  411. "position": "right",
  412. "lineHeight": 25,
  413. },
  414. "extra": {
  415. "radar": {
  416. "gridType": "radar",
  417. "gridColor": "#CCCCCC",
  418. "gridCount": 3,
  419. "opacity": 0.2,
  420. "max": 200,
  421. "labelShow": true
  422. },
  423. }
  424. },
  425. "gauge":{
  426. "type": "gauge",
  427. "color": color,
  428. "title": {
  429. "name": "66Km/H",
  430. "fontSize": 25,
  431. "color": "#2fc25b",
  432. "offsetY": 50
  433. },
  434. "subtitle": {
  435. "name": "实时速度",
  436. "fontSize": 15,
  437. "color": "#1890ff",
  438. "offsetY": -50
  439. },
  440. "extra": {
  441. "gauge": {
  442. "type": "default",
  443. "width": 30,
  444. "labelColor": "#666666",
  445. "startAngle": 0.75,
  446. "endAngle": 0.25,
  447. "startNumber": 0,
  448. "endNumber": 100,
  449. "labelFormat": "",
  450. "splitLine": {
  451. "fixRadius": 0,
  452. "splitNumber": 10,
  453. "width": 30,
  454. "color": "#FFFFFF",
  455. "childNumber": 5,
  456. "childWidth": 12
  457. },
  458. "pointer": {
  459. "width": 24,
  460. "color": "auto"
  461. }
  462. }
  463. }
  464. },
  465. "candle":{
  466. "type": "candle",
  467. "color": color,
  468. "padding": [15,15,0,15],
  469. "enableScroll": true,
  470. "enableMarkLine": true,
  471. "dataLabel": false,
  472. "xAxis": {
  473. "labelCount": 4,
  474. "itemCount": 40,
  475. "disableGrid": true,
  476. "gridColor": "#CCCCCC",
  477. "gridType": "solid",
  478. "dashLength": 4,
  479. "scrollShow": true,
  480. "scrollAlign": "left",
  481. "scrollColor": "#A6A6A6",
  482. "scrollBackgroundColor": "#EFEBEF"
  483. },
  484. "yAxis": {
  485. },
  486. "legend": {
  487. },
  488. "extra": {
  489. "candle": {
  490. "color": {
  491. "upLine": "#f04864",
  492. "upFill": "#f04864",
  493. "downLine": "#2fc25b",
  494. "downFill": "#2fc25b"
  495. },
  496. "average": {
  497. "show": true,
  498. "name": ["MA5","MA10","MA30"],
  499. "day": [5,10,20],
  500. "color": ["#1890ff","#2fc25b","#facc14"]
  501. }
  502. },
  503. "markLine": {
  504. "type": "dash",
  505. "dashLength": 5,
  506. "data": [
  507. {
  508. "value": 2150,
  509. "lineColor": "#f04864",
  510. "showLabel": true
  511. },
  512. {
  513. "value": 2350,
  514. "lineColor": "#f04864",
  515. "showLabel": true
  516. }
  517. ]
  518. }
  519. }
  520. },
  521. "mix":{
  522. "type": "mix",
  523. "color": color,
  524. "padding": [15,15,0,15],
  525. "xAxis": {
  526. "disableGrid": true,
  527. },
  528. "yAxis": {
  529. "disabled": false,
  530. "disableGrid": false,
  531. "splitNumber": 5,
  532. "gridType": "dash",
  533. "dashLength": 4,
  534. "gridColor": "#CCCCCC",
  535. "padding": 10,
  536. "showTitle": true,
  537. "data": []
  538. },
  539. "legend": {
  540. },
  541. "extra": {
  542. "mix": {
  543. "column": {
  544. "width": 20
  545. }
  546. },
  547. }
  548. },
  549. "scatter":{
  550. "type": "scatter",
  551. "color":color,
  552. "padding":[15,15,0,15],
  553. "dataLabel":false,
  554. "xAxis": {
  555. "disableGrid": false,
  556. "gridType":"dash",
  557. "splitNumber":5,
  558. "boundaryGap":"justify",
  559. "min":0
  560. },
  561. "yAxis": {
  562. "disableGrid": false,
  563. "gridType":"dash",
  564. },
  565. "legend": {
  566. },
  567. "extra": {
  568. "scatter": {
  569. },
  570. }
  571. },
  572. "bubble":{
  573. "type": "bubble",
  574. "color":color,
  575. "padding":[15,15,0,15],
  576. "xAxis": {
  577. "disableGrid": false,
  578. "gridType":"dash",
  579. "splitNumber":5,
  580. "boundaryGap":"justify",
  581. "min":0,
  582. "max":250
  583. },
  584. "yAxis": {
  585. "disableGrid": false,
  586. "gridType":"dash",
  587. "data":[{
  588. "min":0,
  589. "max":150
  590. }]
  591. },
  592. "legend": {
  593. },
  594. "extra": {
  595. "bubble": {
  596. "border":2,
  597. "opacity": 0.5,
  598. },
  599. }
  600. }
  601. }
  602. export default cfu;