config-ucharts.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  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. module.exports = {
  21. //demotype为自定义图表类型
  22. "type":["pie","ring","rose","word","funnel","map","arcbar","line","column","area","radar","gauge","candle","mix","demotype"],
  23. "range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","区域图","雷达图","仪表盘","K线图","混合图","自定义类型"],
  24. //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
  25. "categories":["line","column","area","radar","gauge","candle","mix","demotype"],
  26. //instance为实例变量承载属性,option为eopts承载属性,不要删除
  27. "instance":{},
  28. "option":{},
  29. //下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
  30. "formatter":{
  31. "yAxisDemo1":function(val){return val+'元'},
  32. "yAxisDemo2":function(val){return val.toFixed(2)},
  33. "seriesDemo1":function(val){
  34. return val+'元'
  35. },
  36. "tooltipDemo1":function(item, category, index, opts){
  37. if(index==0){
  38. return '随便用'+item.data+'年'
  39. }else{
  40. return '其他我没改'+item.data+'天'
  41. }
  42. },
  43. "pieDemo":function(val, index, series){
  44. if(index !== undefined){
  45. return series[index].name+':'+series[index].data+'元'
  46. }
  47. },
  48. },
  49. //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
  50. "demotype":{
  51. //我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
  52. "type": "line",
  53. "color": color,
  54. "padding": [15,10,0,15],
  55. "xAxis": {
  56. "disableGrid": true,
  57. },
  58. "yAxis": {
  59. "gridType": "dash",
  60. "dashLength": 2,
  61. },
  62. "legend": {
  63. },
  64. "extra": {
  65. "line": {
  66. "type": "curve",
  67. "width": 2
  68. },
  69. }
  70. },
  71. //下面是自定义配置,请添加项目所需的通用配置
  72. "pie":{
  73. "type": "pie",
  74. "color": color,
  75. "padding": [5,5,5,5],
  76. "extra": {
  77. "pie": {
  78. "activeOpacity": 0.5,
  79. "activeRadius": 10,
  80. "offsetAngle": 0,
  81. "labelWidth": 15,
  82. "border": true,
  83. "borderWidth": 3,
  84. "borderColor": "#FFFFFF"
  85. },
  86. }
  87. },
  88. "ring":{
  89. "type": "ring",
  90. "color": color,
  91. "padding": [5,5,5,5],
  92. "rotate": false,
  93. "dataLabel": true,
  94. "legend": {
  95. "show": true,
  96. "position": "right",
  97. "lineHeight": 25,
  98. },
  99. "title": {
  100. "name": "收益率",
  101. "fontSize": 15,
  102. "color": "#666666"
  103. },
  104. "subtitle": {
  105. "name": "70%",
  106. "fontSize": 25,
  107. "color": "#7cb5ec"
  108. },
  109. "extra": {
  110. "ring": {
  111. "ringWidth":30,
  112. "activeOpacity": 0.5,
  113. "activeRadius": 10,
  114. "offsetAngle": 0,
  115. "labelWidth": 15,
  116. "border": true,
  117. "borderWidth": 3,
  118. "borderColor": "#FFFFFF"
  119. },
  120. },
  121. },
  122. "rose":{
  123. "type": "rose",
  124. "color": color,
  125. "padding": [5,5,5,5],
  126. "legend": {
  127. "show": true,
  128. "position": "left",
  129. "lineHeight": 25,
  130. },
  131. "extra": {
  132. "rose": {
  133. "type": "area",
  134. "minRadius": 50,
  135. "activeOpacity": 0.5,
  136. "activeRadius": 10,
  137. "offsetAngle": 0,
  138. "labelWidth": 15,
  139. "border": false,
  140. "borderWidth": 2,
  141. "borderColor": "#FFFFFF"
  142. },
  143. }
  144. },
  145. "word":{
  146. "type": "word",
  147. "color": color,
  148. "extra": {
  149. "word": {
  150. "type": "normal",
  151. "autoColors": false
  152. }
  153. }
  154. },
  155. "funnel":{
  156. "type": "funnel",
  157. "color": color,
  158. "padding": [15,15,0,15],
  159. "extra": {
  160. "funnel": {
  161. "activeOpacity": 0.3,
  162. "activeWidth": 10,
  163. "border": true,
  164. "borderWidth": 2,
  165. "borderColor": "#FFFFFF",
  166. "fillOpacity": 1,
  167. "labelAlign": "right"
  168. },
  169. }
  170. },
  171. "map":{
  172. "type": "map",
  173. "color": color,
  174. "padding": [0,0,0,0],
  175. "dataLabel": true,
  176. "extra": {
  177. "map": {
  178. "border": true,
  179. "borderWidth": 1,
  180. "borderColor": "#666666",
  181. "fillOpacity": 0.6,
  182. "activeBorderColor": "#F04864",
  183. "activeFillColor": "#FACC14",
  184. "activeFillOpacity": 1
  185. },
  186. }
  187. },
  188. "arcbar":{
  189. "type": "arcbar",
  190. "color": color,
  191. "title": {
  192. "name": "百分比",
  193. "fontSize": 25,
  194. "color": "#00FF00"
  195. },
  196. "subtitle": {
  197. "name": "默认标题",
  198. "fontSize": 15,
  199. "color": "#666666"
  200. },
  201. "extra": {
  202. "arcbar": {
  203. "type": "default",
  204. "width": 12,
  205. "backgroundColor": "#E9E9E9",
  206. "startAngle": 0.75,
  207. "endAngle": 0.25,
  208. "gap": 2
  209. }
  210. }
  211. },
  212. "line":{
  213. "type": "line",
  214. "color": color,
  215. "padding": [15,10,0,15],
  216. "xAxis": {
  217. "disableGrid": true,
  218. },
  219. "yAxis": {
  220. "gridType": "dash",
  221. "dashLength": 2,
  222. },
  223. "legend": {
  224. },
  225. "extra": {
  226. "line": {
  227. "type": "straight",
  228. "width": 2
  229. },
  230. }
  231. },
  232. "column":{
  233. "type": "column",
  234. "color": color,
  235. "padding": [15,15,0,5],
  236. "xAxis": {
  237. "disableGrid": true,
  238. },
  239. "yAxis": {
  240. },
  241. "legend": {
  242. },
  243. "extra": {
  244. "column": {
  245. "type": "group",
  246. "width": 30,
  247. "meterBorde": 1,
  248. "meterFillColor": "#FFFFFF",
  249. "activeBgColor": "#000000",
  250. "activeBgOpacity": 0.08
  251. },
  252. }
  253. },
  254. "area":{
  255. "type": "area",
  256. "color": color,
  257. "padding": [15,15,0,15],
  258. "xAxis": {
  259. "disableGrid": true,
  260. },
  261. "yAxis": {
  262. "gridType": "dash",
  263. "dashLength": 2,
  264. },
  265. "legend": {
  266. },
  267. "extra": {
  268. "area": {
  269. "type": "straight",
  270. "opacity": 0.2,
  271. "addLine": true,
  272. "width": 2,
  273. "gradient": false
  274. },
  275. }
  276. },
  277. "radar":{
  278. "type": "radar",
  279. "color": color,
  280. "padding": [5,5,5,5],
  281. "legend": {
  282. "show": true,
  283. "position": "right",
  284. "lineHeight": 25,
  285. },
  286. "extra": {
  287. "radar": {
  288. "gridType": "radar",
  289. "gridColor": "#CCCCCC",
  290. "gridCount": 3,
  291. "opacity": 0.2,
  292. "labelColor": "#666666",
  293. "max": 200
  294. },
  295. }
  296. },
  297. "gauge":{
  298. "type": "gauge",
  299. "color": color,
  300. "title": {
  301. "name": "66Km/H",
  302. "fontSize": 25,
  303. "color": "#2fc25b",
  304. "offsetY": 50
  305. },
  306. "subtitle": {
  307. "name": "实时速度",
  308. "fontSize": 15,
  309. "color": "#1890ff",
  310. "offsetY": -50
  311. },
  312. "extra": {
  313. "gauge": {
  314. "type": "default",
  315. "width": 30,
  316. "labelColor": "#666666",
  317. "startAngle": 0.75,
  318. "endAngle": 0.25,
  319. "startNumber": 0,
  320. "endNumber": 100,
  321. "labelFormat": "",
  322. "splitLine": {
  323. "fixRadius": 0,
  324. "splitNumber": 10,
  325. "width": 30,
  326. "color": "#FFFFFF",
  327. "childNumber": 5,
  328. "childWidth": 12
  329. },
  330. "pointer": {
  331. "width": 24,
  332. "color": "auto"
  333. }
  334. }
  335. }
  336. },
  337. "candle":{
  338. "type": "candle",
  339. "color": color,
  340. "padding": [15,15,0,15],
  341. "enableScroll": true,
  342. "enableMarkLine": true,
  343. "dataLabel": false,
  344. "xAxis": {
  345. "labelCount": 4,
  346. "itemCount": 40,
  347. "disableGrid": true,
  348. "gridColor": "#CCCCCC",
  349. "gridType": "solid",
  350. "dashLength": 4,
  351. "scrollShow": true,
  352. "scrollAlign": "left",
  353. "scrollColor": "#A6A6A6",
  354. "scrollBackgroundColor": "#EFEBEF"
  355. },
  356. "yAxis": {
  357. },
  358. "legend": {
  359. },
  360. "extra": {
  361. "candle": {
  362. "color": {
  363. "upLine": "#f04864",
  364. "upFill": "#f04864",
  365. "downLine": "#2fc25b",
  366. "downFill": "#2fc25b"
  367. },
  368. "average": {
  369. "show": true,
  370. "name": ["MA5","MA10","MA30"],
  371. "day": [5,10,20],
  372. "color": ["#1890ff","#2fc25b","#facc14"]
  373. }
  374. },
  375. "markLine": {
  376. "type": "dash",
  377. "dashLength": 5,
  378. "data": [
  379. {
  380. "value": 2150,
  381. "lineColor": "#f04864",
  382. "showLabel": true
  383. },
  384. {
  385. "value": 2350,
  386. "lineColor": "#f04864",
  387. "showLabel": true
  388. }
  389. ]
  390. }
  391. }
  392. },
  393. "mix":{
  394. "type": "mix",
  395. "color": color,
  396. "padding": [15,15,0,15],
  397. "xAxis": {
  398. "disableGrid": true,
  399. },
  400. "yAxis": {
  401. "disabled": false,
  402. "disableGrid": false,
  403. "splitNumber": 5,
  404. "gridType": "dash",
  405. "dashLength": 4,
  406. "gridColor": "#CCCCCC",
  407. "padding": 10,
  408. "showTitle": true,
  409. "data": []
  410. },
  411. "legend": {
  412. },
  413. "extra": {
  414. "mix": {
  415. "column": {
  416. "width": 20
  417. }
  418. },
  419. }
  420. },
  421. "point":{
  422. "type": "point",
  423. "color":color,
  424. "padding":[15,15,0,15],
  425. },
  426. "bubble":{
  427. "type": "bubble",
  428. "color":color,
  429. "padding":[15,15,0,15],
  430. }
  431. }