widget-heatmap.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. /*
  2. * @Descripttion: 热力图
  3. * @version:
  4. * @Author: whw
  5. * @Date: 2021-11-3
  6. * @LastEditors: whw
  7. * @LastEditTime: 2021-11-3
  8. */
  9. export const widgetHeatmap = {
  10. code: 'widget-heatmap',
  11. type: 'chart',
  12. label: '热力图',
  13. icon: 'iconrelitu',
  14. options: {
  15. // 配置
  16. setup: [
  17. {
  18. type: 'el-input-text',
  19. label: '图层名称',
  20. name: 'layerName',
  21. required: false,
  22. placeholder: '',
  23. value: '热力图',
  24. },
  25. {
  26. type: 'vue-color',
  27. label: '背景颜色',
  28. name: 'background',
  29. required: false,
  30. placeholder: '',
  31. value: ''
  32. },
  33. [
  34. {
  35. name: '标题设置',
  36. list: [
  37. {
  38. type: 'el-switch',
  39. label: '标题',
  40. name: 'isNoTitle',
  41. required: false,
  42. placeholder: '',
  43. value: true
  44. },
  45. {
  46. type: 'el-input-text',
  47. label: '标题',
  48. name: 'titleText',
  49. required: false,
  50. placeholder: '',
  51. value: ''
  52. },
  53. {
  54. type: 'vue-color',
  55. label: '字体颜色',
  56. name: 'textColor',
  57. required: false,
  58. placeholder: '',
  59. value: '#fff'
  60. },
  61. {
  62. type: 'el-select',
  63. label: '字体粗细',
  64. name: 'textFontWeight',
  65. required: false,
  66. placeholder: '',
  67. selectOptions: [
  68. {code: 'normal', name: '正常'},
  69. {code: 'bold', name: '粗体'},
  70. {code: 'bolder', name: '特粗体'},
  71. {code: 'lighter', name: '细体'}
  72. ],
  73. value: 'normal'
  74. },
  75. {
  76. type: 'el-input-number',
  77. label: '字体大小',
  78. name: 'textFontSize',
  79. required: false,
  80. placeholder: '',
  81. value: 16
  82. },
  83. {
  84. type: 'el-select',
  85. label: '字体位置',
  86. name: 'textAlign',
  87. required: false,
  88. placeholder: '',
  89. selectOptions: [
  90. {code: 'center', name: '居中'},
  91. {code: 'left', name: '左对齐'},
  92. {code: 'right', name: '右对齐'},
  93. ],
  94. value: 'center'
  95. },
  96. {
  97. type: 'el-input-text',
  98. label: '副标题',
  99. name: 'subText',
  100. required: false,
  101. placeholder: '',
  102. value: ''
  103. },
  104. {
  105. type: 'vue-color',
  106. label: '字体颜色',
  107. name: 'subTextColor',
  108. required: false,
  109. placeholder: '',
  110. value: ''
  111. },
  112. {
  113. type: 'el-select',
  114. label: '字体粗细',
  115. name: 'subTextFontWeight',
  116. required: false,
  117. placeholder: '',
  118. selectOptions: [
  119. {code: 'normal', name: '正常'},
  120. {code: 'bold', name: '粗体'},
  121. {code: 'bolder', name: '特粗体'},
  122. {code: 'lighter', name: '细体'}
  123. ],
  124. value: 'normal'
  125. },
  126. {
  127. type: 'el-input-number',
  128. label: '字体大小',
  129. name: 'subTextFontSize',
  130. required: false,
  131. placeholder: '',
  132. value: 16
  133. },
  134. ],
  135. },
  136. {
  137. name: 'X轴设置',
  138. list: [
  139. {
  140. type: 'el-switch',
  141. label: '显示',
  142. name: 'hideX',
  143. required: false,
  144. placeholder: '',
  145. value: true,
  146. },
  147. {
  148. type: 'el-input-text',
  149. label: 'X轴别名',
  150. name: 'xName',
  151. required: false,
  152. placeholder: '',
  153. value: ''
  154. },
  155. {
  156. type: 'vue-color',
  157. label: '别名颜色',
  158. name: 'xNameColor',
  159. required: false,
  160. placeholder: '',
  161. value: '#fff'
  162. },
  163. {
  164. type: 'el-input-number',
  165. label: '别名字号',
  166. name: 'xNameFontSize',
  167. required: false,
  168. placeholder: '',
  169. value: 14
  170. },
  171. {
  172. type: 'el-switch',
  173. label: '轴反转',
  174. name: 'reversalX',
  175. required: false,
  176. placeholder: '',
  177. value: false
  178. },
  179. {
  180. type: 'el-slider',
  181. label: '文字角度',
  182. name: 'textAngleX',
  183. required: false,
  184. placeholder: '',
  185. value: 0
  186. },
  187. {
  188. type: 'el-input-number',
  189. label: '文字间隔',
  190. name: 'textInterval',
  191. required: false,
  192. placeholder: '',
  193. value: ''
  194. },
  195. {
  196. type: 'vue-color',
  197. label: '文字颜色',
  198. name: 'Xcolor',
  199. required: false,
  200. placeholder: '',
  201. value: '#fff',
  202. },
  203. {
  204. type: 'el-input-number',
  205. label: '文字字号',
  206. name: 'fontSizeX',
  207. required: false,
  208. placeholder: '',
  209. value: 14,
  210. },
  211. {
  212. type: 'vue-color',
  213. label: '轴颜色',
  214. name: 'lineColorX',
  215. required: false,
  216. placeholder: '',
  217. value: '#fff',
  218. },
  219. ],
  220. },
  221. {
  222. name: 'Y轴设置',
  223. list: [
  224. {
  225. type: 'el-switch',
  226. label: '显示',
  227. name: 'isShowY',
  228. require: false,
  229. placeholder: '',
  230. value: true,
  231. },
  232. {
  233. type: 'el-input-text',
  234. label: 'Y轴别名',
  235. name: 'textNameY',
  236. require: false,
  237. placeholder: '',
  238. value: ''
  239. },
  240. {
  241. type: 'vue-color',
  242. label: '别名颜色',
  243. name: 'NameColorY',
  244. required: false,
  245. placeholder: '',
  246. value: '#fff',
  247. },
  248. {
  249. type: 'el-input-number',
  250. label: '别名字号',
  251. name: 'NameFontSizeY',
  252. required: false,
  253. placeholder: '',
  254. value: 14,
  255. },
  256. {
  257. type: 'el-switch',
  258. label: '轴反转',
  259. name: 'reversalY',
  260. required: false,
  261. placeholder: '',
  262. value: false
  263. },
  264. {
  265. type: 'el-slider',
  266. label: '文字角度',
  267. name: 'textAngleY',
  268. required: false,
  269. placeholder: '',
  270. value: 0
  271. },
  272. {
  273. type: 'vue-color',
  274. label: '文字颜色',
  275. name: 'colorY',
  276. required: false,
  277. placeholder: '',
  278. value: '#fff',
  279. },
  280. {
  281. type: 'el-input-number',
  282. label: '文字字号',
  283. name: 'fontSizeY',
  284. required: false,
  285. placeholder: '',
  286. value: 14,
  287. },
  288. {
  289. type: 'vue-color',
  290. label: '轴颜色',
  291. name: 'lineColorY',
  292. required: false,
  293. placeholder: '',
  294. value: '#fff',
  295. },
  296. ],
  297. },
  298. {
  299. name: '数值设定',
  300. list: [
  301. {
  302. type: 'el-switch',
  303. label: '显示',
  304. name: 'isShow',
  305. required: false,
  306. placeholder: '',
  307. value: true
  308. },
  309. {
  310. type: 'el-input-number',
  311. label: '字体字号',
  312. name: 'fontSize',
  313. required: false,
  314. placeholder: '',
  315. value: 14
  316. },
  317. {
  318. type: 'vue-color',
  319. label: '字体颜色',
  320. name: 'subTextColor',
  321. required: false,
  322. placeholder: '',
  323. value: '#fff'
  324. },
  325. {
  326. type: 'el-select',
  327. label: '字体粗细',
  328. name: 'fontWeight',
  329. required: false,
  330. placeholder: '',
  331. selectOptions: [
  332. {code: 'normal', name: '正常'},
  333. {code: 'bold', name: '粗体'},
  334. {code: 'bolder', name: '特粗体'},
  335. {code: 'lighter', name: '细体'}
  336. ],
  337. value: 'normal'
  338. },
  339. ],
  340. },
  341. {
  342. name: '提示语设置',
  343. list: [
  344. {
  345. type: 'el-input-number',
  346. label: '字体字号',
  347. name: 'tipsFontSize',
  348. required: false,
  349. placeholder: '',
  350. value: 16
  351. },
  352. {
  353. type: 'vue-color',
  354. label: '字体颜色',
  355. name: 'tipsColor',
  356. required: false,
  357. placeholder: '',
  358. value: '#00FEFF'
  359. },
  360. ],
  361. },
  362. {
  363. name: '坐标轴边距设置',
  364. list: [
  365. {
  366. type: 'el-slider',
  367. label: '左边距(像素)',
  368. name: 'marginLeft',
  369. required: false,
  370. placeholder: '',
  371. value: 10,
  372. }, {
  373. type: 'el-slider',
  374. label: '顶边距(像素)',
  375. name: 'marginTop',
  376. required: false,
  377. placeholder: '',
  378. value: 50,
  379. }, {
  380. type: 'el-slider',
  381. label: '右边距(像素)',
  382. name: 'marginRight',
  383. required: false,
  384. placeholder: '',
  385. value: 40,
  386. }, {
  387. type: 'el-slider',
  388. label: '底边距(像素)',
  389. name: 'marginBottom',
  390. required: false,
  391. placeholder: '',
  392. value: 10,
  393. },
  394. ],
  395. },
  396. {
  397. name: '图设置',
  398. list: [
  399. {
  400. type: 'el-switch',
  401. label: '图例',
  402. name: 'isShowLegend',
  403. required: false,
  404. placeholder: '',
  405. value: false,
  406. },
  407. {
  408. type: 'el-input-number',
  409. label: '最小值',
  410. name: 'dataMin',
  411. required: false,
  412. placeholder: '',
  413. value: 0,
  414. },
  415. {
  416. type: 'el-input-number',
  417. label: '最大值',
  418. name: 'dataMax',
  419. required: false,
  420. placeholder: '',
  421. value: 5000,
  422. },
  423. {
  424. type: 'vue-color',
  425. label: '数值颜色',
  426. name: 'legendColor',
  427. required: false,
  428. placeholder: '',
  429. value: '#fff',
  430. },
  431. {
  432. type: 'el-input-number',
  433. label: '图例大小',
  434. name: 'legendFontSize',
  435. required: false,
  436. placeholder: '',
  437. value: 12,
  438. },
  439. {
  440. type: 'el-input-number',
  441. label: '图例宽度',
  442. name: 'legendWidth',
  443. required: false,
  444. placeholder: '',
  445. value: 12,
  446. },
  447. {
  448. type: 'el-select',
  449. label: '横向位置',
  450. name: 'lateralPosition',
  451. required: false,
  452. placeholder: '',
  453. selectOptions: [
  454. {code: 'center', name: '居中'},
  455. {code: 'left', name: '左对齐'},
  456. {code: 'right', name: '右对齐'},
  457. ],
  458. value: 'center'
  459. },
  460. {
  461. type: 'el-select',
  462. label: '纵向位置',
  463. name: 'longitudinalPosition',
  464. required: false,
  465. placeholder: '',
  466. selectOptions: [
  467. {code: 'top', name: '顶部'},
  468. {code: 'bottom', name: '底部'},
  469. ],
  470. value: 'top'
  471. },
  472. {
  473. type: 'el-select',
  474. label: '布局前置',
  475. name: 'layoutFront',
  476. required: false,
  477. placeholder: '',
  478. selectOptions: [
  479. {code: 'vertical', name: '竖排'},
  480. {code: 'horizontal', name: '横排'},
  481. ],
  482. value: 'horizontal'
  483. },
  484. ],
  485. },
  486. {
  487. name: '自定义配色',
  488. list: [
  489. {
  490. type: 'customColor',
  491. label: '',
  492. name: 'legendColorList',
  493. required: false,
  494. value: [{color: '#abd9e9'}, {color: '#74add1'}, {color: '#4575b4'}, {color: '#313695'}],
  495. },
  496. ],
  497. },
  498. ],
  499. ],
  500. // 数据
  501. data: [
  502. {
  503. type: 'el-radio-group',
  504. label: '数据类型',
  505. name: 'dataType',
  506. require: false,
  507. placeholder: '',
  508. selectValue: true,
  509. selectOptions: [
  510. {
  511. code: 'staticData',
  512. name: '静态数据',
  513. },
  514. {
  515. code: 'dynamicData',
  516. name: '动态数据',
  517. },
  518. ],
  519. value: 'staticData',
  520. },
  521. {
  522. type: 'el-input-number',
  523. label: '刷新时间(毫秒)',
  524. name: 'refreshTime',
  525. relactiveDom: 'dataType',
  526. relactiveDomValue: 'dynamicData',
  527. value: 5000
  528. },
  529. {
  530. type: 'el-button',
  531. label: '静态数据',
  532. name: 'staticData',
  533. required: false,
  534. placeholder: '',
  535. relactiveDom: 'dataType',
  536. relactiveDomValue: 'staticData',
  537. value: [
  538. {"axis": "0", "yaxis": "0", "num": 3320},
  539. {"axis": "0", "yaxis": "1", "num": 1561},
  540. {"axis": "0", "yaxis": "2", "num": 3194},
  541. {"axis": "0", "yaxis": "3", "num": 2899},
  542. {"axis": "0", "yaxis": "4", "num": 2363},
  543. {"axis": "0", "yaxis": "5", "num": 3945},
  544. {"axis": "0", "yaxis": "6", "num": 2051},
  545. {"axis": "0", "yaxis": "7", "num": 3657},
  546. {"axis": "0", "yaxis": "8", "num": 3304},
  547. {"axis": "0", "yaxis": "9", "num": 2990},
  548. {"axis": "1", "yaxis": "9", "num": 2663},
  549. {"axis": "1", "yaxis": "0", "num": 378},
  550. {"axis": "1", "yaxis": "1", "num": 4076},
  551. {"axis": "1", "yaxis": "2", "num": 3178},
  552. {"axis": "1", "yaxis": "3", "num": 1501},
  553. {"axis": "1", "yaxis": "4", "num": 1660},
  554. {"axis": "1", "yaxis": "5", "num": 726},
  555. {"axis": "1", "yaxis": "6", "num": 4148},
  556. {"axis": "1", "yaxis": "7", "num": 720},
  557. {"axis": "1", "yaxis": "8", "num": 430},
  558. {"axis": "2", "yaxis": "9", "num": 2983},
  559. {"axis": "2", "yaxis": "0", "num": 1917},
  560. {"axis": "2", "yaxis": "1", "num": 1188},
  561. {"axis": "2", "yaxis": "2", "num": 3581},
  562. {"axis": "2", "yaxis": "3", "num": 1781},
  563. {"axis": "2", "yaxis": "4", "num": 4725},
  564. {"axis": "2", "yaxis": "5", "num": 4077},
  565. {"axis": "2", "yaxis": "6", "num": 299},
  566. {"axis": "2", "yaxis": "7", "num": 4828},
  567. {"axis": "2", "yaxis": "8", "num": 1778},
  568. {"axis": "3", "yaxis": "9", "num": 3171},
  569. {"axis": "3", "yaxis": "0", "num": 2944},
  570. {"axis": "3", "yaxis": "1", "num": 763},
  571. {"axis": "3", "yaxis": "2", "num": 1678},
  572. {"axis": "3", "yaxis": "3", "num": 1765},
  573. {"axis": "3", "yaxis": "4", "num": 2949},
  574. {"axis": "3", "yaxis": "5", "num": 966},
  575. {"axis": "3", "yaxis": "6", "num": 4622},
  576. {"axis": "3", "yaxis": "7", "num": 2818},
  577. {"axis": "3", "yaxis": "8", "num": 3913},
  578. {"axis": "4", "yaxis": "9", "num": 4382},
  579. {"axis": "4", "yaxis": "0", "num": 1670},
  580. {"axis": "4", "yaxis": "1", "num": 4532},
  581. {"axis": "4", "yaxis": "2", "num": 2116},
  582. {"axis": "4", "yaxis": "3", "num": 2383},
  583. {"axis": "4", "yaxis": "4", "num": 510},
  584. {"axis": "4", "yaxis": "5", "num": 33},
  585. {"axis": "4", "yaxis": "6", "num": 4974},
  586. {"axis": "4", "yaxis": "7", "num": 3627},
  587. {"axis": "4", "yaxis": "8", "num": 2737},
  588. {"axis": "5", "yaxis": "9", "num": 656},
  589. {"axis": "5", "yaxis": "0", "num": 3689},
  590. {"axis": "5", "yaxis": "1", "num": 713},
  591. {"axis": "5", "yaxis": "2", "num": 3551},
  592. {"axis": "5", "yaxis": "3", "num": 3159},
  593. {"axis": "5", "yaxis": "4", "num": 4150},
  594. {"axis": "5", "yaxis": "5", "num": 1416},
  595. {"axis": "5", "yaxis": "6", "num": 3021},
  596. {"axis": "5", "yaxis": "7", "num": 1778},
  597. {"axis": "5", "yaxis": "8", "num": 863},
  598. {"axis": "6", "yaxis": "9", "num": 772},
  599. {"axis": "6", "yaxis": "0", "num": 1675},
  600. {"axis": "6", "yaxis": "1", "num": 1323},
  601. {"axis": "6", "yaxis": "2", "num": 2023},
  602. {"axis": "6", "yaxis": "3", "num": 43},
  603. {"axis": "6", "yaxis": "4", "num": 4964},
  604. {"axis": "6", "yaxis": "5", "num": 4781},
  605. {"axis": "6", "yaxis": "6", "num": 2608},
  606. {"axis": "6", "yaxis": "7", "num": 2278},
  607. {"axis": "6", "yaxis": "8", "num": 3285},
  608. {"axis": "7", "yaxis": "9", "num": 1977},
  609. {"axis": "7", "yaxis": "0", "num": 882},
  610. {"axis": "7", "yaxis": "1", "num": 2434},
  611. {"axis": "7", "yaxis": "2", "num": 4694},
  612. {"axis": "7", "yaxis": "3", "num": 3022},
  613. {"axis": "7", "yaxis": "4", "num": 1798},
  614. {"axis": "7", "yaxis": "5", "num": 2503},
  615. {"axis": "7", "yaxis": "6", "num": 693},
  616. {"axis": "7", "yaxis": "7", "num": 275},
  617. {"axis": "7", "yaxis": "8", "num": 3774},
  618. {"axis": "8", "yaxis": "9", "num": 1386},
  619. {"axis": "8", "yaxis": "0", "num": 1212},
  620. {"axis": "8", "yaxis": "1", "num": 1982},
  621. {"axis": "8", "yaxis": "2", "num": 1509},
  622. {"axis": "8", "yaxis": "3", "num": 94},
  623. {"axis": "8", "yaxis": "4", "num": 2082},
  624. {"axis": "8", "yaxis": "5", "num": 3930},
  625. {"axis": "8", "yaxis": "6", "num": 4528},
  626. {"axis": "8", "yaxis": "7", "num": 1861},
  627. {"axis": "8", "yaxis": "8", "num": 4582},
  628. {"axis": "9", "yaxis": "9", "num": 3038},
  629. {"axis": "9", "yaxis": "0", "num": 4038},
  630. {"axis": "9", "yaxis": "1", "num": 357},
  631. {"axis": "9", "yaxis": "2", "num": 306},
  632. {"axis": "9", "yaxis": "3", "num": 479},
  633. {"axis": "9", "yaxis": "4", "num": 823},
  634. {"axis": "9", "yaxis": "5", "num": 3442},
  635. {"axis": "9", "yaxis": "6", "num": 904},
  636. {"axis": "9", "yaxis": "7", "num": 399},
  637. {"axis": "9", "yaxis": "8", "num": 4869},
  638. ]
  639. },
  640. {
  641. type: 'dycustComponents',
  642. label: '',
  643. name: 'dynamicData',
  644. required: false,
  645. placeholder: '',
  646. relactiveDom: 'dataType',
  647. chartType: 'widget-coord',
  648. relactiveDomValue: 'dynamicData',
  649. dictKey: 'COORD_PROPERTIES',
  650. value: '',
  651. },
  652. ],
  653. // 坐标
  654. position: [
  655. {
  656. type: 'el-input-number',
  657. label: '左边距',
  658. name: 'left',
  659. required: false,
  660. placeholder: '',
  661. value: 0,
  662. },
  663. {
  664. type: 'el-input-number',
  665. label: '上边距',
  666. name: 'top',
  667. required: false,
  668. placeholder: '',
  669. value: 0,
  670. },
  671. {
  672. type: 'el-input-number',
  673. label: '宽度',
  674. name: 'width',
  675. required: false,
  676. placeholder: '该容器在1920px大屏中的宽度',
  677. value: 700,
  678. },
  679. {
  680. type: 'el-input-number',
  681. label: '高度',
  682. name: 'height',
  683. required: false,
  684. placeholder: '该容器在1080px大屏中的高度',
  685. value: 300,
  686. },
  687. ],
  688. }
  689. }