config-echarts.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  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. "lineDemo": function(res) {
  32. let result = ''
  33. for (let i in res) {
  34. if (i == 0) {
  35. result += res[i].axisValueLabel.substring(9, 17)
  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. "column": {
  67. "color": color,
  68. "title": {
  69. "text": ''
  70. },
  71. "tooltip": {
  72. "trigger": 'axis'
  73. },
  74. "grid": {
  75. "top": 30,
  76. "bottom": 50,
  77. "right": 15,
  78. "left": 40
  79. },
  80. "legend": {
  81. "bottom": 'left',
  82. },
  83. "toolbox": {
  84. "show": false,
  85. },
  86. "xAxis": {
  87. "type": 'category',
  88. "axisLabel": {
  89. "color": '#666666'
  90. },
  91. "axisLine": {
  92. "lineStyle": {
  93. "color": '#CCCCCC'
  94. }
  95. },
  96. "boundaryGap": true,
  97. "data": []
  98. },
  99. "yAxis": {
  100. "type": 'value',
  101. "axisTick": {
  102. "show": false,
  103. },
  104. "axisLabel": {
  105. "color": '#666666'
  106. },
  107. "axisLine": {
  108. "lineStyle": {
  109. "color": '#CCCCCC'
  110. }
  111. },
  112. },
  113. "seriesTemplate": {
  114. "name": '',
  115. "type": 'bar',
  116. "data": [],
  117. "barwidth": 20,
  118. "label": {
  119. "show": true,
  120. "color": "#666666",
  121. "position": 'top',
  122. },
  123. },
  124. },
  125. "line": {
  126. "color": color,
  127. "title": {
  128. "text": ''
  129. },
  130. "tooltip": {
  131. "trigger": 'axis'
  132. },
  133. "grid": {
  134. "top": 30,
  135. "bottom": 50,
  136. "right": 15,
  137. "left": 40
  138. },
  139. "legend": {
  140. "bottom": 'left',
  141. },
  142. "toolbox": {
  143. "show": false,
  144. },
  145. "xAxis": {
  146. "type": 'category',
  147. "axisLabel": {
  148. "color": '#666666'
  149. },
  150. "axisLine": {
  151. "lineStyle": {
  152. "color": '#CCCCCC'
  153. }
  154. },
  155. "boundaryGap": true,
  156. "data": []
  157. },
  158. "yAxis": {
  159. "type": 'value',
  160. "axisTick": {
  161. "show": true,
  162. },
  163. "axisLabel": {
  164. "color": '#666666'
  165. },
  166. "axisLine": {
  167. "lineStyle": {
  168. "color": '#CCCCCC'
  169. }
  170. },
  171. 'axisPointer': {
  172. 'snap': false
  173. }
  174. },
  175. "seriesTemplate": {
  176. "name": '',
  177. "type": 'line',
  178. "data": [],
  179. "barwidth": 20,
  180. "label": {
  181. "show": true,
  182. "color": "#666666",
  183. "position": 'top',
  184. },
  185. },
  186. },
  187. "area": {
  188. "color": color,
  189. "title": {
  190. "text": ''
  191. },
  192. "tooltip": {
  193. "trigger": 'axis'
  194. },
  195. "grid": {
  196. "top": 30,
  197. "bottom": 50,
  198. "right": 15,
  199. "left": 40
  200. },
  201. "legend": {
  202. "bottom": 'left',
  203. },
  204. "toolbox": {
  205. "show": false,
  206. },
  207. "xAxis": {
  208. "type": 'category',
  209. "axisLabel": {
  210. "color": '#666666'
  211. },
  212. "axisLine": {
  213. "lineStyle": {
  214. "color": '#CCCCCC'
  215. }
  216. },
  217. "boundaryGap": true,
  218. "data": []
  219. },
  220. "yAxis": {
  221. "type": 'value',
  222. "axisTick": {
  223. "show": false,
  224. },
  225. "axisLabel": {
  226. "color": '#666666'
  227. },
  228. "axisLine": {
  229. "lineStyle": {
  230. "color": '#CCCCCC'
  231. }
  232. },
  233. },
  234. "seriesTemplate": {
  235. "name": '',
  236. "type": 'line',
  237. "data": [],
  238. "areaStyle": {},
  239. "label": {
  240. "show": true,
  241. "color": "#666666",
  242. "position": 'top',
  243. },
  244. },
  245. },
  246. "pie": {
  247. "color": color,
  248. "title": {
  249. "text": ''
  250. },
  251. "tooltip": {
  252. "trigger": 'item'
  253. },
  254. "grid": {
  255. "top": 40,
  256. "bottom": 30,
  257. "right": 15,
  258. "left": 15
  259. },
  260. "legend": {
  261. "bottom": 'left',
  262. },
  263. "seriesTemplate": {
  264. "name": '',
  265. "type": 'pie',
  266. "data": [],
  267. "radius": '50%',
  268. "label": {
  269. "show": true,
  270. "color": "#666666",
  271. "position": 'top',
  272. },
  273. },
  274. },
  275. "ring": {
  276. "color": color,
  277. "title": {
  278. "text": ''
  279. },
  280. "tooltip": {
  281. "trigger": 'item'
  282. },
  283. "grid": {
  284. "top": 40,
  285. "bottom": 30,
  286. "right": 15,
  287. "left": 15
  288. },
  289. "legend": {
  290. "bottom": 'left',
  291. },
  292. "seriesTemplate": {
  293. "name": '',
  294. "type": 'pie',
  295. "data": [],
  296. "radius": ['40%', '70%'],
  297. "avoidLabelOverlap": false,
  298. "label": {
  299. "show": true,
  300. "color": "#666666",
  301. "position": 'top',
  302. },
  303. "labelLine": {
  304. "show": true
  305. },
  306. },
  307. },
  308. "rose": {
  309. "color": color,
  310. "title": {
  311. "text": ''
  312. },
  313. "tooltip": {
  314. "trigger": 'item'
  315. },
  316. "legend": {
  317. "top": 'bottom'
  318. },
  319. "seriesTemplate": {
  320. "name": '',
  321. "type": 'pie',
  322. "data": [],
  323. "radius": "55%",
  324. "center": ['50%', '50%'],
  325. "roseType": 'area',
  326. },
  327. },
  328. "funnel": {
  329. "color": color,
  330. "title": {
  331. "text": ''
  332. },
  333. "tooltip": {
  334. "trigger": 'item',
  335. "formatter": "{b} : {c}%"
  336. },
  337. "legend": {
  338. "top": 'bottom'
  339. },
  340. "seriesTemplate": {
  341. "name": '',
  342. "type": 'funnel',
  343. "left": '10%',
  344. "top": 60,
  345. "bottom": 60,
  346. "width": '80%',
  347. "min": 0,
  348. "max": 100,
  349. "minSize": '0%',
  350. "maxSize": '100%',
  351. "sort": 'descending',
  352. "gap": 2,
  353. "label": {
  354. "show": true,
  355. "position": 'inside'
  356. },
  357. "labelLine": {
  358. "length": 10,
  359. "lineStyle": {
  360. "width": 1,
  361. "type": 'solid'
  362. }
  363. },
  364. "itemStyle": {
  365. "bordercolor": '#fff',
  366. "borderwidth": 1
  367. },
  368. "emphasis": {
  369. "label": {
  370. "fontSize": 20
  371. }
  372. },
  373. "data": [],
  374. },
  375. },
  376. "gauge": {
  377. "color": color,
  378. "tooltip": {
  379. "formatter": '{a} <br/>{b} : {c}%'
  380. },
  381. "seriesTemplate": {
  382. "name": '业务指标',
  383. "type": 'gauge',
  384. "detail": {
  385. "formatter": '{value}%'
  386. },
  387. "data": [{
  388. "value": 50,
  389. "name": '完成率'
  390. }]
  391. },
  392. },
  393. "candle": {
  394. "xAxis": {
  395. "data": []
  396. },
  397. "yAxis": {},
  398. "color": color,
  399. "title": {
  400. "text": ''
  401. },
  402. "dataZoom": [{
  403. "type": 'inside',
  404. "xAxisIndex": [0, 1],
  405. "start": 10,
  406. "end": 100
  407. },
  408. {
  409. "show": true,
  410. "xAxisIndex": [0, 1],
  411. "type": 'slider',
  412. "bottom": 10,
  413. "start": 10,
  414. "end": 100
  415. }
  416. ],
  417. "seriesTemplate": {
  418. "name": '',
  419. "type": 'k',
  420. "data": [],
  421. },
  422. }
  423. }
  424. export default cfe;