config-ucharts.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170
  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') {
  36. return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
  37. }
  38. if (returnType == 'y-m-d') {
  39. return y + '-' + m + '-' + d;
  40. }
  41. if (returnType == 'h:m') {
  42. return h + ':' + minute;
  43. }
  44. if (returnType == 'h:m:s') {
  45. return h + ':' + minute + ':' + second;
  46. }
  47. return [y, m, d, h, minute, second];
  48. }
  49. const cfu = {
  50. //demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
  51. "type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar",
  52. "gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype","mainline"
  53. ],
  54. "range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图",
  55. "混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型", "首页趋势图"
  56. ],
  57. //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
  58. //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
  59. "categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype", "mainline"],
  60. //instance为实例变量承载属性,不要删除
  61. "instance": {},
  62. //option为opts及eopts承载属性,不要删除
  63. "option": {},
  64. //下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
  65. "formatter": {
  66. "yAxisDemo1": function(val) {
  67. return val + '元'
  68. },
  69. "yAxisDemo2": function(val) {
  70. return val.toFixed(2)
  71. },
  72. "xAxisDemo1": function(val) {
  73. return val + '年'
  74. },
  75. "xAxisDemo2": function(val) {
  76. return formatDateTime(val, 'h:m')
  77. },
  78. "seriesDemo1": function(val) {
  79. return val + '元'
  80. },
  81. "tooltipDemo1": function(item, category, index, opts) {
  82. if (index == 0) {
  83. return '随便用' + item.data + '年'
  84. } else {
  85. return '其他我没改' + item.data + '天'
  86. }
  87. },
  88. "pieDemo": function(val, index, series) {
  89. if (index !== undefined) {
  90. return series[index].name + ':' + series[index].data + '元'
  91. }
  92. },
  93. },
  94. //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
  95. "demotype": {
  96. //我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
  97. "type": "line",
  98. "color": color,
  99. "padding": [15, 10, 0, 15],
  100. "xAxis": {
  101. "disableGrid": true,
  102. },
  103. "yAxis": {
  104. "gridType": "dash",
  105. "dashLength": 2,
  106. },
  107. "legend": {},
  108. "extra": {
  109. "line": {
  110. "type": "curve",
  111. "width": 2
  112. },
  113. }
  114. },
  115. //下面是自定义配置,请添加项目所需的通用配置
  116. "pie": {
  117. "type": "pie",
  118. "color": color,
  119. "padding": [5, 5, 5, 5],
  120. "extra": {
  121. "pie": {
  122. "activeOpacity": 0.5,
  123. "activeRadius": 10,
  124. "offsetAngle": 0,
  125. "labelWidth": 15,
  126. "border": true,
  127. "borderWidth": 3,
  128. "borderColor": "#FFFFFF"
  129. },
  130. }
  131. },
  132. "ring": {
  133. "type": "ring",
  134. "color": color,
  135. "padding": [5, 5, 5, 5],
  136. "rotate": false,
  137. "dataLabel": true,
  138. "legend": {
  139. "show": true,
  140. "position": "right",
  141. "lineHeight": 25,
  142. },
  143. "title": {
  144. "name": "收益率",
  145. "fontSize": 15,
  146. "color": "#666666"
  147. },
  148. "subtitle": {
  149. "name": "70%",
  150. "fontSize": 25,
  151. "color": "#7cb5ec"
  152. },
  153. "extra": {
  154. "ring": {
  155. "ringWidth": 30,
  156. "activeOpacity": 0.5,
  157. "activeRadius": 10,
  158. "offsetAngle": 0,
  159. "labelWidth": 15,
  160. "border": true,
  161. "borderWidth": 3,
  162. "borderColor": "#FFFFFF"
  163. },
  164. },
  165. },
  166. "rose": {
  167. "type": "rose",
  168. "color": color,
  169. "padding": [5, 5, 5, 5],
  170. "legend": {
  171. "show": true,
  172. "position": "left",
  173. "lineHeight": 25,
  174. },
  175. "extra": {
  176. "rose": {
  177. "type": "area",
  178. "minRadius": 50,
  179. "activeOpacity": 0.5,
  180. "activeRadius": 10,
  181. "offsetAngle": 0,
  182. "labelWidth": 15,
  183. "border": false,
  184. "borderWidth": 2,
  185. "borderColor": "#FFFFFF"
  186. },
  187. }
  188. },
  189. "word": {
  190. "type": "word",
  191. "color": color,
  192. "extra": {
  193. "word": {
  194. "type": "normal",
  195. "autoColors": false
  196. }
  197. }
  198. },
  199. "funnel": {
  200. "type": "funnel",
  201. "color": color,
  202. "padding": [15, 15, 0, 15],
  203. "extra": {
  204. "funnel": {
  205. "activeOpacity": 0.3,
  206. "activeWidth": 10,
  207. "border": true,
  208. "borderWidth": 2,
  209. "borderColor": "#FFFFFF",
  210. "fillOpacity": 1,
  211. "labelAlign": "right"
  212. },
  213. }
  214. },
  215. "map": {
  216. "type": "map",
  217. "color": color,
  218. "padding": [0, 0, 0, 0],
  219. "dataLabel": true,
  220. "extra": {
  221. "map": {
  222. "border": true,
  223. "borderWidth": 1,
  224. "borderColor": "#666666",
  225. "fillOpacity": 0.6,
  226. "activeBorderColor": "#F04864",
  227. "activeFillColor": "#FACC14",
  228. "activeFillOpacity": 1
  229. },
  230. }
  231. },
  232. "arcbar": {
  233. "type": "arcbar",
  234. "color": color,
  235. "title": {
  236. "name": "百分比",
  237. "fontSize": 25,
  238. "color": "#00FF00"
  239. },
  240. "subtitle": {
  241. "name": "默认标题",
  242. "fontSize": 15,
  243. "color": "#666666"
  244. },
  245. "extra": {
  246. "arcbar": {
  247. "type": "default",
  248. "width": 12,
  249. "backgroundColor": "#E9E9E9",
  250. "startAngle": 0.75,
  251. "endAngle": 0.25,
  252. "gap": 2
  253. }
  254. }
  255. },
  256. "line": {
  257. "type": "line",
  258. "canvasId": "",
  259. "canvas2d": false,
  260. "background": "none",
  261. "animation": true,
  262. "timing": "easeOut",
  263. "duration": 1000,
  264. "color": [
  265. "#0052d4",
  266. "#ff5959",
  267. "#f9b248"
  268. ],
  269. "padding": [
  270. 1,
  271. 10,
  272. 8,
  273. 3
  274. ],
  275. "rotate": false,
  276. "errorReload": true,
  277. "fontSize": 12,
  278. "fontColor": "#696969",
  279. "enableScroll": false,
  280. "touchMoveLimit": 60,
  281. "enableMarkLine": true,
  282. "dataLabel": true,
  283. "dataPointShape": true,
  284. "dataPointShapeType": "solid",
  285. "tapLegend": true,
  286. "xAxis": {
  287. "disabled": false,
  288. "axisLine": true,
  289. "axisLineColor": "#CCCCCC",
  290. "calibration": false,
  291. "fontColor": "#696969",
  292. "fontSize": 12,
  293. "rotateLabel": false,
  294. "labelCount": 6,
  295. "itemCount": 5,
  296. "boundaryGap": "center",
  297. "disableGrid": true,
  298. "gridColor": "#696969",
  299. "gridType": "solid",
  300. "dashLength": 4,
  301. "gridEval": 1,
  302. "scrollShow": false,
  303. "scrollAlign": "left",
  304. "scrollColor": "#F5F5F5",
  305. "scrollBackgroundColor": "#D3D3D3",
  306. "format": ""
  307. },
  308. "yAxis": {
  309. "disabled": false,
  310. "disableGrid": false,
  311. "splitNumber": 5,
  312. "gridType": "dash",
  313. "dashLength": 10,
  314. "gridColor": "#CCCCCC",
  315. "padding": 10,
  316. "showTitle": false,
  317. "data": []
  318. },
  319. "legend": {
  320. "show": true,
  321. "position": "top",
  322. "float": "right",
  323. "padding": 5,
  324. "margin": 15,
  325. "backgroundColor": "rgba(0,0,0,0)",
  326. "borderColor": "rgba(0,0,0,0)",
  327. "borderWidth": 0,
  328. "fontSize": 12,
  329. "fontColor": "#696969",
  330. "lineHeight": 10,
  331. "hiddenColor": "#CECECE",
  332. "itemGap": 10
  333. },
  334. "extra": {
  335. "line": {
  336. "type": "curve",
  337. "width": 2
  338. },
  339. "tooltip": {
  340. "showBox": true,
  341. "showArrow": false,
  342. "showCategory": false,
  343. "borderWidth": 0,
  344. "borderRadius": 6,
  345. "borderColor": "#000000",
  346. "borderOpacity": 0.5,
  347. "bgColor": "#000000",
  348. "bgOpacity": 0.5,
  349. "gridType": "dash",
  350. "dashLength": 8,
  351. "gridColor": "#CCCCCC",
  352. "fontColor": "#FFFFFF",
  353. "splitLine": true,
  354. "horizentalLine": false,
  355. "xAxisLabel": false,
  356. "yAxisLabel": false,
  357. "labelBgColor": "#FFFFFF",
  358. "labelBgOpacity": 0.7,
  359. "labelFontColor": "#666666"
  360. },
  361. "markLine": {
  362. "type": "dash",
  363. "dashLength": 8,
  364. "data": []
  365. }
  366. }
  367. },
  368. "tline": {
  369. "type": "line",
  370. "color": color,
  371. "padding": [15, 10, 0, 15],
  372. "xAxis": {
  373. "disableGrid": false,
  374. "boundaryGap": "justify",
  375. },
  376. "yAxis": {
  377. "gridType": "dash",
  378. "dashLength": 2,
  379. "data": [{
  380. "min": 0,
  381. "max": 80
  382. }]
  383. },
  384. "legend": {},
  385. "extra": {
  386. "line": {
  387. "type": "curve",
  388. "width": 2
  389. },
  390. }
  391. },
  392. "tarea": {
  393. "type": "area",
  394. "color": color,
  395. "padding": [15, 10, 0, 15],
  396. "xAxis": {
  397. "disableGrid": true,
  398. "boundaryGap": "justify",
  399. },
  400. "yAxis": {
  401. "gridType": "dash",
  402. "dashLength": 2,
  403. "data": [{
  404. "min": 0,
  405. "max": 80
  406. }]
  407. },
  408. "legend": {},
  409. "extra": {
  410. "area": {
  411. "type": "curve",
  412. "opacity": 0.2,
  413. "addLine": true,
  414. "width": 2,
  415. "gradient": true
  416. },
  417. }
  418. },
  419. "column": {
  420. "type": "column",
  421. "canvasId": "",
  422. "canvas2d": false,
  423. "background": "none",
  424. "animation": true,
  425. "timing": "easeOut",
  426. "duration": 1000,
  427. "color": [
  428. "#0052d4",
  429. "#ff5959",
  430. "#f9b248"
  431. ],
  432. "padding": [
  433. 1,
  434. 10,
  435. 8,
  436. 3
  437. ],
  438. "rotate": false,
  439. "errorReload": true,
  440. "fontSize": 12,
  441. "fontColor": "#696969",
  442. "enableScroll": false,
  443. "touchMoveLimit": 60,
  444. "enableMarkLine": true,
  445. "dataLabel": true,
  446. "dataPointShape": true,
  447. "dataPointShapeType": "solid",
  448. "tapLegend": true,
  449. "xAxis": {
  450. "disabled": false,
  451. "axisLine": true,
  452. "axisLineColor": "#CCCCCC",
  453. "calibration": false,
  454. "fontColor": "#696969",
  455. "fontSize": 12,
  456. "rotateLabel": false,
  457. "labelCount": 6,
  458. "itemCount": 5,
  459. "boundaryGap": "center",
  460. "disableGrid": true,
  461. "gridColor": "#696969",
  462. "gridType": "dash",
  463. "dashLength": 4,
  464. "gridEval": 1,
  465. "scrollShow": false,
  466. "scrollAlign": "left",
  467. "scrollColor": "#F5F5F5",
  468. "scrollBackgroundColor": "#D3D3D3",
  469. "format": ""
  470. },
  471. "yAxis": {
  472. "disabled": false,
  473. "disableGrid": false,
  474. "splitNumber": 5,
  475. "gridType": "dash",
  476. "dashLength": 10,
  477. "gridColor": "#CCCCCC",
  478. "padding": 10,
  479. "showTitle": false,
  480. "data": []
  481. },
  482. "legend": {
  483. "show": true,
  484. "position": "top",
  485. "float": "right",
  486. "padding": 5,
  487. "margin": 15,
  488. "backgroundColor": "rgba(0,0,0,0)",
  489. "borderColor": "rgba(0,0,0,0)",
  490. "borderWidth": 0,
  491. "fontSize": 12,
  492. "fontColor": "#696969",
  493. "lineHeight": 10,
  494. "hiddenColor": "#CECECE",
  495. "itemGap": 10
  496. },
  497. "extra": {
  498. "column": {
  499. "type": "group",
  500. "width": 17,
  501. "seriesGap": 2,
  502. "categoryGap": 3,
  503. "barBorderCircle": false,
  504. "barBorderRadius": [
  505. 5,
  506. 5,
  507. 5,
  508. 5
  509. ],
  510. "linearType": "none",
  511. "linearOpacity": 1,
  512. "customColor": [
  513. "#0052d4",
  514. "#4364f7",
  515. "#6fb1fc",
  516. "#f5f5f5"
  517. ],
  518. "colorStop": 0,
  519. "meterBorder": 1,
  520. "meterFillColor": "#FFFFFF",
  521. "activeBgColor": "#000000",
  522. "activeBgOpacity": 0.05,
  523. "meterBorde": 1
  524. },
  525. "tooltip": {
  526. "showBox": true,
  527. "showArrow": false,
  528. "showCategory": false,
  529. "borderWidth": 0,
  530. "borderRadius": 6,
  531. "borderColor": "#000000",
  532. "borderOpacity": 0.5,
  533. "bgColor": "#000000",
  534. "bgOpacity": 0.5,
  535. "gridType": "dash",
  536. "dashLength": 8,
  537. "gridColor": "#CCCCCC",
  538. "fontColor": "#FFFFFF",
  539. "splitLine": true,
  540. "horizentalLine": false,
  541. "xAxisLabel": false,
  542. "yAxisLabel": false,
  543. "labelBgColor": "#FFFFFF",
  544. "labelBgOpacity": 0.7,
  545. "labelFontColor": "#666666"
  546. },
  547. "markLine": {
  548. "type": "dash",
  549. "dashLength": 8,
  550. "data": []
  551. }
  552. }
  553. },
  554. "bar": {
  555. "type": "bar",
  556. "canvasId": "",
  557. "canvas2d": false,
  558. "background": "none",
  559. "animation": true,
  560. "timing": "easeOut",
  561. "duration": 1000,
  562. "color": [
  563. "#0052d4",
  564. "#20a162"
  565. ],
  566. "padding": [
  567. 1,
  568. 18,
  569. 3,
  570. 3
  571. ],
  572. "rotate": false,
  573. "errorReload": true,
  574. "fontSize": 13,
  575. "fontColor": "#696969",
  576. "enableScroll": false,
  577. "touchMoveLimit": 60,
  578. "enableMarkLine": false,
  579. "dataLabel": false,
  580. "dataPointShape": true,
  581. "dataPointShapeType": "solid",
  582. "tapLegend": true,
  583. "xAxis": {
  584. "disabled": false,
  585. "axisLine": false,
  586. "axisLineColor": "#CCCCCC",
  587. "calibration": false,
  588. "fontColor": "#696969",
  589. "fontSize": 12,
  590. "rotateLabel": false,
  591. "itemCount": 5,
  592. "boundaryGap": "justify",
  593. "disableGrid": false,
  594. "gridColor": "#CCCCCC",
  595. "gridType": "dash",
  596. "dashLength": 8,
  597. "gridEval": 1,
  598. "scrollShow": false,
  599. "scrollAlign": "left",
  600. "scrollColor": "#A6A6A6",
  601. "scrollBackgroundColor": "#EFEBEF",
  602. "min": 0,
  603. "format": ""
  604. },
  605. "yAxis": {
  606. "disabled": false,
  607. "disableGrid": false,
  608. "splitNumber": 5,
  609. "gridType": "dash",
  610. "dashLength": 8,
  611. "gridColor": "#CCCCCC",
  612. "padding": 10,
  613. "showTitle": false,
  614. "data": []
  615. },
  616. "legend": {
  617. "show": true,
  618. "position": "top",
  619. "float": "right",
  620. "padding": 5,
  621. "margin": 5,
  622. "backgroundColor": "rgba(0,0,0,0)",
  623. "borderColor": "rgba(0,0,0,0)",
  624. "borderWidth": 0,
  625. "fontSize": 12,
  626. "fontColor": "#696969",
  627. "lineHeight": 10,
  628. "hiddenColor": "#CECECE",
  629. "itemGap": 10
  630. },
  631. "extra": {
  632. "bar": {
  633. "type": "group",
  634. "width": 14,
  635. "seriesGap": 2,
  636. "categoryGap": 4,
  637. "barBorderCircle": false,
  638. "barBorderRadius": [
  639. 3,
  640. 10,
  641. 3,
  642. 3
  643. ],
  644. "linearType": "none",
  645. "linearOpacity": 1,
  646. "colorStop": 0,
  647. "activeBgColor": "#000000",
  648. "activeBgOpacity": 0.08,
  649. "meterBorde": 1,
  650. "meterFillColor": "#FFFFFF"
  651. },
  652. "tooltip": {
  653. "showBox": true,
  654. "showArrow": false,
  655. "showCategory": false,
  656. "borderWidth": 0,
  657. "borderRadius": 6,
  658. "borderColor": "#000000",
  659. "borderOpacity": 0.5,
  660. "bgColor": "#000000",
  661. "bgOpacity": 0.5,
  662. "gridType": "solid",
  663. "dashLength": 4,
  664. "gridColor": "#CCCCCC",
  665. "fontColor": "#FFFFFF",
  666. "splitLine": true,
  667. "horizentalLine": false,
  668. "xAxisLabel": false,
  669. "yAxisLabel": false,
  670. "labelBgColor": "#FFFFFF",
  671. "labelBgOpacity": 0.7,
  672. "labelFontColor": "#666666"
  673. },
  674. "markLine": {
  675. "type": "solid",
  676. "dashLength": 4,
  677. "data": []
  678. }
  679. }
  680. },
  681. "area": {
  682. "type": "area",
  683. "canvasId": "",
  684. "canvas2d": false,
  685. "background": "none",
  686. "animation": true,
  687. "timing": "easeOut",
  688. "duration": 1000,
  689. "color": [
  690. "#0052d4",
  691. "#ff5959",
  692. "#f9b248"
  693. ],
  694. "padding": [
  695. 1,
  696. 10,
  697. 8,
  698. 3
  699. ],
  700. "rotate": false,
  701. "errorReload": true,
  702. "fontSize": 13,
  703. "fontColor": "#666666",
  704. "enableScroll": false,
  705. "touchMoveLimit": 60,
  706. "enableMarkLine": true,
  707. "dataLabel": true,
  708. "dataPointShape": true,
  709. "dataPointShapeType": "solid",
  710. "tapLegend": true,
  711. "xAxis": {
  712. "disabled": false,
  713. "axisLine": true,
  714. "axisLineColor": "#CCCCCC",
  715. "calibration": false,
  716. "fontColor": "#696969",
  717. "fontSize": 12,
  718. "rotateLabel": false,
  719. "labelCount": 6,
  720. "itemCount": 5,
  721. "boundaryGap": "center",
  722. "disableGrid": true,
  723. "gridColor": "#CCCCCC",
  724. "gridType": "solid",
  725. "dashLength": 4,
  726. "gridEval": 1,
  727. "scrollShow": false,
  728. "scrollAlign": "left",
  729. "scrollColor": "#A6A6A6",
  730. "scrollBackgroundColor": "#EFEBEF",
  731. "format": ""
  732. },
  733. "yAxis": {
  734. "disabled": false,
  735. "disableGrid": false,
  736. "splitNumber": 5,
  737. "gridType": "dash",
  738. "dashLength": 10,
  739. "gridColor": "#CCCCCC",
  740. "padding": 10,
  741. "showTitle": false,
  742. "data": []
  743. },
  744. "legend": {
  745. "show": true,
  746. "position": "top",
  747. "float": "right",
  748. "padding": 5,
  749. "margin": 15,
  750. "backgroundColor": "rgba(0,0,0,0)",
  751. "borderColor": "rgba(0,0,0,0)",
  752. "borderWidth": 0,
  753. "fontSize": 12,
  754. "fontColor": "#696969",
  755. "lineHeight": 10,
  756. "hiddenColor": "#CECECE",
  757. "itemGap": 10
  758. },
  759. "extra": {
  760. "area": {
  761. "type": "straight",
  762. "opacity": 0.5,
  763. "addLine": true,
  764. "width": 2,
  765. "gradient": true
  766. },
  767. "tooltip": {
  768. "showBox": true,
  769. "showArrow": false,
  770. "showCategory": false,
  771. "borderWidth": 0,
  772. "borderRadius": 6,
  773. "borderColor": "#000000",
  774. "borderOpacity": 0.5,
  775. "bgColor": "#000000",
  776. "bgOpacity": 0.5,
  777. "gridType": "dash",
  778. "dashLength": 8,
  779. "gridColor": "#CCCCCC",
  780. "fontColor": "#FFFFFF",
  781. "splitLine": true,
  782. "horizentalLine": true,
  783. "xAxisLabel": false,
  784. "yAxisLabel": false,
  785. "labelBgColor": "#FFFFFF",
  786. "labelBgOpacity": 0.7,
  787. "labelFontColor": "#666666"
  788. },
  789. "markLine": {
  790. "type": "dash",
  791. "dashLength": 8,
  792. "data": []
  793. }
  794. }
  795. },
  796. "radar": {
  797. "type": "radar",
  798. "canvasId": "",
  799. "canvas2d": false,
  800. "background": "none",
  801. "animation": true,
  802. "timing": "easeOut",
  803. "duration": 1000,
  804. "color": [
  805. "#0052d4",
  806. "#ff5959",
  807. "#f9b248"
  808. ],
  809. "padding": [
  810. 1,
  811. 2,
  812. 2,
  813. 2
  814. ],
  815. "rotate": false,
  816. "errorReload": true,
  817. "fontSize": 13,
  818. "fontColor": "#696969",
  819. "enableScroll": false,
  820. "touchMoveLimit": 60,
  821. "enableMarkLine": false,
  822. "dataLabel": false,
  823. "dataPointShape": true,
  824. "dataPointShapeType": "solid",
  825. "tapLegend": true,
  826. "legend": {
  827. "show": true,
  828. "position": "bottom",
  829. "float": "center",
  830. "padding": 5,
  831. "margin": 5,
  832. "backgroundColor": "rgba(0,0,0,0)",
  833. "borderColor": "rgba(0,0,0,0)",
  834. "borderWidth": 0,
  835. "fontSize": 13,
  836. "fontColor": "#696969",
  837. "lineHeight": 10,
  838. "hiddenColor": "#CECECE",
  839. "itemGap": 10
  840. },
  841. "extra": {
  842. "radar": {
  843. "gridType": "circle",
  844. "gridColor": "#CCCCCC",
  845. "gridCount": 2,
  846. "labelColor": "#696969",
  847. "opacity": 0.3,
  848. "border": true,
  849. "borderWidth": 1,
  850. "max": 100
  851. },
  852. "tooltip": {
  853. "showBox": true,
  854. "showArrow": false,
  855. "showCategory": false,
  856. "borderWidth": 0,
  857. "borderRadius": 6,
  858. "borderColor": "#000000",
  859. "borderOpacity": 0.5,
  860. "bgColor": "#000000",
  861. "bgOpacity": 0.5,
  862. "gridType": "dash",
  863. "dashLength": 8,
  864. "gridColor": "#CCCCCC",
  865. "fontColor": "#FFFFFF",
  866. "splitLine": true,
  867. "horizentalLine": false,
  868. "xAxisLabel": false,
  869. "yAxisLabel": false,
  870. "labelBgColor": "#FFFFFF",
  871. "labelBgOpacity": 0.7,
  872. "labelFontColor": "#666666"
  873. }
  874. }
  875. },
  876. "gauge": {
  877. "type": "gauge",
  878. "color": color,
  879. "title": {
  880. "name": "66Km/H",
  881. "fontSize": 25,
  882. "color": "#2fc25b",
  883. "offsetY": 50
  884. },
  885. "subtitle": {
  886. "name": "实时速度",
  887. "fontSize": 15,
  888. "color": "#1890ff",
  889. "offsetY": -50
  890. },
  891. "extra": {
  892. "gauge": {
  893. "type": "default",
  894. "width": 30,
  895. "labelColor": "#666666",
  896. "startAngle": 0.75,
  897. "endAngle": 0.25,
  898. "startNumber": 0,
  899. "endNumber": 100,
  900. "labelFormat": "",
  901. "splitLine": {
  902. "fixRadius": 0,
  903. "splitNumber": 10,
  904. "width": 30,
  905. "color": "#FFFFFF",
  906. "childNumber": 5,
  907. "childWidth": 12
  908. },
  909. "pointer": {
  910. "width": 24,
  911. "color": "auto"
  912. }
  913. }
  914. }
  915. },
  916. "candle": {
  917. "type": "candle",
  918. "color": color,
  919. "padding": [15, 15, 0, 15],
  920. "enableScroll": true,
  921. "enableMarkLine": true,
  922. "dataLabel": false,
  923. "xAxis": {
  924. "labelCount": 4,
  925. "itemCount": 40,
  926. "disableGrid": true,
  927. "gridColor": "#CCCCCC",
  928. "gridType": "solid",
  929. "dashLength": 4,
  930. "scrollShow": true,
  931. "scrollAlign": "left",
  932. "scrollColor": "#A6A6A6",
  933. "scrollBackgroundColor": "#EFEBEF"
  934. },
  935. "yAxis": {},
  936. "legend": {},
  937. "extra": {
  938. "candle": {
  939. "color": {
  940. "upLine": "#f04864",
  941. "upFill": "#f04864",
  942. "downLine": "#2fc25b",
  943. "downFill": "#2fc25b"
  944. },
  945. "average": {
  946. "show": true,
  947. "name": ["MA5", "MA10", "MA30"],
  948. "day": [5, 10, 20],
  949. "color": ["#1890ff", "#2fc25b", "#facc14"]
  950. }
  951. },
  952. "markLine": {
  953. "type": "dash",
  954. "dashLength": 5,
  955. "data": [{
  956. "value": 2150,
  957. "lineColor": "#f04864",
  958. "showLabel": true
  959. },
  960. {
  961. "value": 2350,
  962. "lineColor": "#f04864",
  963. "showLabel": true
  964. }
  965. ]
  966. }
  967. }
  968. },
  969. "mix": {
  970. "type": "mix",
  971. "color": color,
  972. "padding": [15, 15, 0, 15],
  973. "xAxis": {
  974. "disableGrid": true,
  975. },
  976. "yAxis": {
  977. "disabled": false,
  978. "disableGrid": false,
  979. "splitNumber": 5,
  980. "gridType": "dash",
  981. "dashLength": 4,
  982. "gridColor": "#CCCCCC",
  983. "padding": 10,
  984. "showTitle": true,
  985. "data": []
  986. },
  987. "legend": {},
  988. "extra": {
  989. "mix": {
  990. "column": {
  991. "width": 20
  992. }
  993. },
  994. }
  995. },
  996. "scatter": {
  997. "type": "scatter",
  998. "color": color,
  999. "padding": [15, 15, 0, 15],
  1000. "dataLabel": false,
  1001. "xAxis": {
  1002. "disableGrid": false,
  1003. "gridType": "dash",
  1004. "splitNumber": 5,
  1005. "boundaryGap": "justify",
  1006. "min": 0
  1007. },
  1008. "yAxis": {
  1009. "disableGrid": false,
  1010. "gridType": "dash",
  1011. },
  1012. "legend": {},
  1013. "extra": {
  1014. "scatter": {},
  1015. }
  1016. },
  1017. "bubble": {
  1018. "type": "bubble",
  1019. "color": color,
  1020. "padding": [15, 15, 0, 15],
  1021. "xAxis": {
  1022. "disableGrid": false,
  1023. "gridType": "dash",
  1024. "splitNumber": 5,
  1025. "boundaryGap": "justify",
  1026. "min": 0,
  1027. "max": 250
  1028. },
  1029. "yAxis": {
  1030. "disableGrid": false,
  1031. "gridType": "dash",
  1032. "data": [{
  1033. "min": 0,
  1034. "max": 150
  1035. }]
  1036. },
  1037. "legend": {},
  1038. "extra": {
  1039. "bubble": {
  1040. "border": 2,
  1041. "opacity": 0.5,
  1042. },
  1043. }
  1044. },
  1045. "mainline": {
  1046. "type": "area",
  1047. "canvasId": "",
  1048. "canvas2d": false,
  1049. "background": "none",
  1050. "animation": true,
  1051. "timing": "easeOut",
  1052. "duration": 1000,
  1053. "color": [
  1054. "#6495ed",
  1055. "#91CB74",
  1056. "#FAC858",
  1057. "#EE6666",
  1058. "#73C0DE",
  1059. "#3CA272",
  1060. "#FC8452",
  1061. "#9A60B4",
  1062. "#ea7ccc"
  1063. ],
  1064. "padding": [
  1065. 15,
  1066. 15,
  1067. 0,
  1068. 15
  1069. ],
  1070. "rotate": false,
  1071. "errorReload": true,
  1072. "fontSize": 13,
  1073. "fontColor": "#666666",
  1074. "enableScroll": false,
  1075. "touchMoveLimit": 60,
  1076. "enableMarkLine": false,
  1077. "dataLabel": false,
  1078. "dataPointShape": false,
  1079. "dataPointShapeType": "solid",
  1080. "tapLegend": true,
  1081. "xAxis": {
  1082. "disabled": true,
  1083. "axisLine": false,
  1084. "axisLineColor": "#CCCCCC",
  1085. "calibration": false,
  1086. "fontColor": "#666666",
  1087. "fontSize": 13,
  1088. "rotateLabel": false,
  1089. "itemCount": 5,
  1090. "boundaryGap": "center",
  1091. "disableGrid": true,
  1092. "gridColor": "#CCCCCC",
  1093. "gridType": "solid",
  1094. "dashLength": 4,
  1095. "gridEval": 1,
  1096. "scrollShow": false,
  1097. "scrollAlign": "left",
  1098. "scrollColor": "#A6A6A6",
  1099. "scrollBackgroundColor": "#EFEBEF",
  1100. "format": ""
  1101. },
  1102. "yAxis": {
  1103. "disabled": true,
  1104. "disableGrid": true,
  1105. "splitNumber": 5,
  1106. "gridType": "dash",
  1107. "dashLength": 2,
  1108. "gridColor": "#CCCCCC",
  1109. "padding": 10,
  1110. "showTitle": false,
  1111. "data": []
  1112. },
  1113. "legend": {
  1114. "show": false,
  1115. "position": "bottom",
  1116. "float": "center",
  1117. "padding": 5,
  1118. "margin": 5,
  1119. "backgroundColor": "rgba(0,0,0,0)",
  1120. "borderColor": "rgba(0,0,0,0)",
  1121. "borderWidth": 0,
  1122. "fontSize": 13,
  1123. "fontColor": "#666666",
  1124. "lineHeight": 11,
  1125. "hiddenColor": "#CECECE",
  1126. "itemGap": 10
  1127. },
  1128. "extra": {
  1129. "area": {
  1130. "type": "curve",
  1131. "opacity": 1,
  1132. "addLine": true,
  1133. "width": 5,
  1134. "gradient": true
  1135. },
  1136. "tooltip": {
  1137. "showBox": true,
  1138. "showArrow": true,
  1139. "showCategory": false,
  1140. "borderWidth": 0,
  1141. "borderRadius": 5,
  1142. "borderColor": "#000000",
  1143. "borderOpacity": 0.5,
  1144. "bgColor": "#000000",
  1145. "bgOpacity": 0.5,
  1146. "gridType": "solid",
  1147. "dashLength": 4,
  1148. "gridColor": "#CCCCCC",
  1149. "fontColor": "#FFFFFF",
  1150. "splitLine": false,
  1151. "horizentalLine": false,
  1152. "xAxisLabel": false,
  1153. "yAxisLabel": false,
  1154. "labelBgColor": "#FFFFFF",
  1155. "labelBgOpacity": 0.5,
  1156. "labelFontColor": "#666666"
  1157. },
  1158. "markLine": {
  1159. "type": "solid",
  1160. "dashLength": 4,
  1161. "data": []
  1162. }
  1163. }
  1164. }
  1165. }
  1166. export default cfu;