config-echarts.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  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. // 通用配置项
  19. // 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
  20. const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
  21. const cfe = {
  22. //demotype为自定义图表类型
  23. "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge", "candle", "demotype"],
  24. //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
  25. "categories": ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
  26. //instance为实例变量承载属性,option为eopts承载属性,不要删除
  27. "instance": {},
  28. "option": {},
  29. //下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
  30. "formatter": {
  31. "tooltipDemo1": function(res) {
  32. let result = ''
  33. for (let i in res) {
  34. if (i == 0) {
  35. result += res[i].axisValueLabel + '年销售额'
  36. }
  37. let value = '--'
  38. if (res[i].data !== null) {
  39. value = res[i].data
  40. }
  41. // #ifdef H5
  42. result += '\n' + res[i].seriesName + ':' + value + ' 万元'
  43. // #endif
  44. // #ifdef APP-PLUS
  45. result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
  46. // #endif
  47. }
  48. return result;
  49. },
  50. legendFormat: function(name) {
  51. return "自定义图例+" + name;
  52. },
  53. yAxisFormatDemo: function(value, index) {
  54. return value + '元';
  55. },
  56. seriesFormatDemo: function(res) {
  57. return res.name + '年' + res.value + '元';
  58. }
  59. },
  60. //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
  61. "demotype": {
  62. "color": color,
  63. //在这里填写echarts的option即可
  64. },
  65. //下面是自定义配置,请添加项目所需的通用配置
  66. "eqLine": {
  67. "type": "line",
  68. "color": color,
  69. "padding": [15, 10, 0, 15],
  70. "xAxis": {
  71. "disableGrid": true,
  72. },
  73. "yAxis": {
  74. "gridType": "dash",
  75. "dashLength": 2,
  76. },
  77. "legend": {},
  78. "extra": {
  79. "line": {
  80. "type": "curve",
  81. "width": 2
  82. },
  83. }
  84. },
  85. "column": {
  86. "color": color,
  87. "title": {
  88. "text": ''
  89. },
  90. "tooltip": {
  91. "trigger": 'axis'
  92. },
  93. "grid": {
  94. "top": 30,
  95. "bottom": 50,
  96. "right": 15,
  97. "left": 40
  98. },
  99. "legend": {
  100. "bottom": 'left',
  101. },
  102. "toolbox": {
  103. "show": false,
  104. },
  105. "xAxis": {
  106. "type": 'category',
  107. "axisLabel": {
  108. "color": '#666666'
  109. },
  110. "axisLine": {
  111. "lineStyle": {
  112. "color": '#CCCCCC'
  113. }
  114. },
  115. "boundaryGap": true,
  116. "data": []
  117. },
  118. "yAxis": {
  119. "type": 'value',
  120. "axisTick": {
  121. "show": false,
  122. },
  123. "axisLabel": {
  124. "color": '#666666'
  125. },
  126. "axisLine": {
  127. "lineStyle": {
  128. "color": '#CCCCCC'
  129. }
  130. },
  131. },
  132. "seriesTemplate": {
  133. "name": '',
  134. "type": 'bar',
  135. "data": [],
  136. "barwidth": 20,
  137. "label": {
  138. "show": true,
  139. "color": "#666666",
  140. "position": 'top',
  141. },
  142. },
  143. },
  144. "line": {
  145. "color": color,
  146. "title": {
  147. "text": ''
  148. },
  149. "tooltip": {
  150. "trigger": 'axis'
  151. },
  152. "grid": {
  153. "top": 30,
  154. "bottom": 50,
  155. "right": 15,
  156. "left": 40
  157. },
  158. "legend": {
  159. "bottom": 'left',
  160. },
  161. "toolbox": {
  162. "show": false,
  163. },
  164. "xAxis": {
  165. "type": 'category',
  166. "axisLabel": {
  167. "color": '#666666'
  168. },
  169. "axisLine": {
  170. "lineStyle": {
  171. "color": '#CCCCCC'
  172. }
  173. },
  174. "boundaryGap": true,
  175. "data": []
  176. },
  177. "yAxis": {
  178. "type": 'value',
  179. "axisTick": {
  180. "show": false,
  181. },
  182. "axisLabel": {
  183. "color": '#666666'
  184. },
  185. "axisLine": {
  186. "lineStyle": {
  187. "color": '#CCCCCC'
  188. }
  189. },
  190. },
  191. "seriesTemplate": {
  192. "name": '',
  193. "type": 'line',
  194. "data": [],
  195. "barwidth": 20,
  196. "label": {
  197. "show": true,
  198. "color": "#666666",
  199. "position": 'top',
  200. },
  201. },
  202. },
  203. "area": {
  204. "color": color,
  205. "title": {
  206. "text": ''
  207. },
  208. "tooltip": {
  209. "trigger": 'axis'
  210. },
  211. "grid": {
  212. "top": 30,
  213. "bottom": 50,
  214. "right": 15,
  215. "left": 40
  216. },
  217. "legend": {
  218. "bottom": 'left',
  219. },
  220. "toolbox": {
  221. "show": false,
  222. },
  223. "xAxis": {
  224. "type": 'category',
  225. "axisLabel": {
  226. "color": '#666666'
  227. },
  228. "axisLine": {
  229. "lineStyle": {
  230. "color": '#CCCCCC'
  231. }
  232. },
  233. "boundaryGap": true,
  234. "data": []
  235. },
  236. "yAxis": {
  237. "type": 'value',
  238. "axisTick": {
  239. "show": false,
  240. },
  241. "axisLabel": {
  242. "color": '#666666'
  243. },
  244. "axisLine": {
  245. "lineStyle": {
  246. "color": '#CCCCCC'
  247. }
  248. },
  249. },
  250. "seriesTemplate": {
  251. "name": '',
  252. "type": 'line',
  253. "data": [],
  254. "areaStyle": {},
  255. "label": {
  256. "show": true,
  257. "color": "#666666",
  258. "position": 'top',
  259. },
  260. },
  261. },
  262. "pie": {
  263. "color": color,
  264. "title": {
  265. "text": ''
  266. },
  267. "tooltip": {
  268. "trigger": 'item'
  269. },
  270. "grid": {
  271. "top": 40,
  272. "bottom": 30,
  273. "right": 15,
  274. "left": 15
  275. },
  276. "legend": {
  277. "bottom": 'left',
  278. },
  279. "seriesTemplate": {
  280. "name": '',
  281. "type": 'pie',
  282. "data": [],
  283. "radius": '50%',
  284. "label": {
  285. "show": true,
  286. "color": "#666666",
  287. "position": 'top',
  288. },
  289. },
  290. },
  291. "ring": {
  292. "color": color,
  293. "title": {
  294. "text": ''
  295. },
  296. "tooltip": {
  297. "trigger": 'item'
  298. },
  299. "grid": {
  300. "top": 40,
  301. "bottom": 30,
  302. "right": 15,
  303. "left": 15
  304. },
  305. "legend": {
  306. "bottom": 'left',
  307. },
  308. "seriesTemplate": {
  309. "name": '',
  310. "type": 'pie',
  311. "data": [],
  312. "radius": ['40%', '70%'],
  313. "avoidLabelOverlap": false,
  314. "label": {
  315. "show": true,
  316. "color": "#666666",
  317. "position": 'top',
  318. },
  319. "labelLine": {
  320. "show": true
  321. },
  322. },
  323. },
  324. "rose": {
  325. "color": color,
  326. "title": {
  327. "text": ''
  328. },
  329. "tooltip": {
  330. "trigger": 'item'
  331. },
  332. "legend": {
  333. "top": 'bottom'
  334. },
  335. "seriesTemplate": {
  336. "name": '',
  337. "type": 'pie',
  338. "data": [],
  339. "radius": "55%",
  340. "center": ['50%', '50%'],
  341. "roseType": 'area',
  342. },
  343. },
  344. "funnel": {
  345. "color": color,
  346. "title": {
  347. "text": ''
  348. },
  349. "tooltip": {
  350. "trigger": 'item',
  351. "formatter": "{b} : {c}%"
  352. },
  353. "legend": {
  354. "top": 'bottom'
  355. },
  356. "seriesTemplate": {
  357. "name": '',
  358. "type": 'funnel',
  359. "left": '10%',
  360. "top": 60,
  361. "bottom": 60,
  362. "width": '80%',
  363. "min": 0,
  364. "max": 100,
  365. "minSize": '0%',
  366. "maxSize": '100%',
  367. "sort": 'descending',
  368. "gap": 2,
  369. "label": {
  370. "show": true,
  371. "position": 'inside'
  372. },
  373. "labelLine": {
  374. "length": 10,
  375. "lineStyle": {
  376. "width": 1,
  377. "type": 'solid'
  378. }
  379. },
  380. "itemStyle": {
  381. "bordercolor": '#fff',
  382. "borderwidth": 1
  383. },
  384. "emphasis": {
  385. "label": {
  386. "fontSize": 20
  387. }
  388. },
  389. "data": [],
  390. },
  391. },
  392. "gauge": {
  393. "color": color,
  394. "tooltip": {
  395. "formatter": '{a} <br/>{b} : {c}%'
  396. },
  397. "seriesTemplate": {
  398. "name": '业务指标',
  399. "type": 'gauge',
  400. "detail": {
  401. "formatter": '{value}%'
  402. },
  403. "data": [{
  404. "value": 50,
  405. "name": '完成率'
  406. }]
  407. },
  408. },
  409. "candle": {
  410. "xAxis": {
  411. "data": []
  412. },
  413. "yAxis": {},
  414. "color": color,
  415. "title": {
  416. "text": ''
  417. },
  418. "dataZoom": [{
  419. "type": 'inside',
  420. "xAxisIndex": [0, 1],
  421. "start": 10,
  422. "end": 100
  423. },
  424. {
  425. "show": true,
  426. "xAxisIndex": [0, 1],
  427. "type": 'slider',
  428. "bottom": 10,
  429. "start": 10,
  430. "end": 100
  431. }
  432. ],
  433. "seriesTemplate": {
  434. "name": '',
  435. "type": 'k',
  436. "data": [],
  437. },
  438. }
  439. }
  440. export default cfe;