config-echarts.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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. "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": false,
  162. },
  163. "axisLabel": {
  164. "color": '#666666'
  165. },
  166. "axisLine": {
  167. "lineStyle": {
  168. "color": '#CCCCCC'
  169. }
  170. },
  171. },
  172. "seriesTemplate": {
  173. "name": '',
  174. "type": 'line',
  175. "data": [],
  176. "barwidth": 20,
  177. "label": {
  178. "show": true,
  179. "color": "#666666",
  180. "position": 'top',
  181. },
  182. },
  183. },
  184. "area": {
  185. "color": color,
  186. "title": {
  187. "text": ''
  188. },
  189. "tooltip": {
  190. "trigger": 'axis'
  191. },
  192. "grid": {
  193. "top": 30,
  194. "bottom": 50,
  195. "right": 15,
  196. "left": 40
  197. },
  198. "legend": {
  199. "bottom": 'left',
  200. },
  201. "toolbox": {
  202. "show": false,
  203. },
  204. "xAxis": {
  205. "type": 'category',
  206. "axisLabel": {
  207. "color": '#666666'
  208. },
  209. "axisLine": {
  210. "lineStyle": {
  211. "color": '#CCCCCC'
  212. }
  213. },
  214. "boundaryGap": true,
  215. "data": []
  216. },
  217. "yAxis": {
  218. "type": 'value',
  219. "axisTick": {
  220. "show": false,
  221. },
  222. "axisLabel": {
  223. "color": '#666666'
  224. },
  225. "axisLine": {
  226. "lineStyle": {
  227. "color": '#CCCCCC'
  228. }
  229. },
  230. },
  231. "seriesTemplate": {
  232. "name": '',
  233. "type": 'line',
  234. "data": [],
  235. "areaStyle": {},
  236. "label": {
  237. "show": true,
  238. "color": "#666666",
  239. "position": 'top',
  240. },
  241. },
  242. },
  243. "pie": {
  244. "color": color,
  245. "title": {
  246. "text": ''
  247. },
  248. "tooltip": {
  249. "trigger": 'item'
  250. },
  251. "grid": {
  252. "top": 40,
  253. "bottom": 30,
  254. "right": 15,
  255. "left": 15
  256. },
  257. "legend": {
  258. "bottom": 'left',
  259. },
  260. "seriesTemplate": {
  261. "name": '',
  262. "type": 'pie',
  263. "data": [],
  264. "radius": '50%',
  265. "label": {
  266. "show": true,
  267. "color": "#666666",
  268. "position": 'top',
  269. },
  270. },
  271. },
  272. "ring": {
  273. "color": color,
  274. "title": {
  275. "text": ''
  276. },
  277. "tooltip": {
  278. "trigger": 'item'
  279. },
  280. "grid": {
  281. "top": 40,
  282. "bottom": 30,
  283. "right": 15,
  284. "left": 15
  285. },
  286. "legend": {
  287. "bottom": 'left',
  288. },
  289. "seriesTemplate": {
  290. "name": '',
  291. "type": 'pie',
  292. "data": [],
  293. "radius": ['40%', '70%'],
  294. "avoidLabelOverlap": false,
  295. "label": {
  296. "show": true,
  297. "color": "#666666",
  298. "position": 'top',
  299. },
  300. "labelLine": {
  301. "show": true
  302. },
  303. },
  304. },
  305. "rose": {
  306. "color": color,
  307. "title": {
  308. "text": ''
  309. },
  310. "tooltip": {
  311. "trigger": 'item'
  312. },
  313. "legend": {
  314. "top": 'bottom'
  315. },
  316. "seriesTemplate": {
  317. "name": '',
  318. "type": 'pie',
  319. "data": [],
  320. "radius": "55%",
  321. "center": ['50%', '50%'],
  322. "roseType": 'area',
  323. },
  324. },
  325. "funnel": {
  326. "color": color,
  327. "title": {
  328. "text": ''
  329. },
  330. "tooltip": {
  331. "trigger": 'item',
  332. "formatter": "{b} : {c}%"
  333. },
  334. "legend": {
  335. "top": 'bottom'
  336. },
  337. "seriesTemplate": {
  338. "name": '',
  339. "type": 'funnel',
  340. "left": '10%',
  341. "top": 60,
  342. "bottom": 60,
  343. "width": '80%',
  344. "min": 0,
  345. "max": 100,
  346. "minSize": '0%',
  347. "maxSize": '100%',
  348. "sort": 'descending',
  349. "gap": 2,
  350. "label": {
  351. "show": true,
  352. "position": 'inside'
  353. },
  354. "labelLine": {
  355. "length": 10,
  356. "lineStyle": {
  357. "width": 1,
  358. "type": 'solid'
  359. }
  360. },
  361. "itemStyle": {
  362. "bordercolor": '#fff',
  363. "borderwidth": 1
  364. },
  365. "emphasis": {
  366. "label": {
  367. "fontSize": 20
  368. }
  369. },
  370. "data": [],
  371. },
  372. },
  373. "gauge": {
  374. "color": color,
  375. "tooltip": {
  376. "formatter": '{a} <br/>{b} : {c}%'
  377. },
  378. "seriesTemplate": {
  379. "name": '业务指标',
  380. "type": 'gauge',
  381. "detail": {"formatter": '{value}%'},
  382. "data": [{"value": 50, "name": '完成率'}]
  383. },
  384. },
  385. "candle": {
  386. "xAxis": {
  387. "data": []
  388. },
  389. "yAxis": {},
  390. "color": color,
  391. "title": {
  392. "text": ''
  393. },
  394. "dataZoom": [{
  395. "type": 'inside',
  396. "xAxisIndex": [0, 1],
  397. "start": 10,
  398. "end": 100
  399. },
  400. {
  401. "show": true,
  402. "xAxisIndex": [0, 1],
  403. "type": 'slider',
  404. "bottom": 10,
  405. "start": 10,
  406. "end": 100
  407. }
  408. ],
  409. "seriesTemplate": {
  410. "name": '',
  411. "type": 'k',
  412. "data": [],
  413. },
  414. }
  415. }
  416. export default cfe;