From 0eb06744fde44bc97faf463d083e5b7d5defaba6 Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 14 Dec 2023 16:46:13 +0800 Subject: [PATCH] =?UTF-8?q?feat--=E5=9C=B0=E5=9B=BE=E7=B3=BB=E5=88=97?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/iconfont2/demo_index.html | 41 +-- report-ui/src/assets/iconfont2/iconfont.css | 14 +- report-ui/src/assets/iconfont2/iconfont.js | 2 +- report-ui/src/assets/iconfont2/iconfont.json | 15 +- report-ui/src/assets/iconfont2/iconfont.ttf | Bin 1972 -> 1856 bytes report-ui/src/assets/iconfont2/iconfont.woff | Bin 1348 -> 1240 bytes report-ui/src/assets/iconfont2/iconfont.woff2 | Bin 944 -> 876 bytes .../configure/mapCharts/widget-bar-map.js | 334 ++++++++++-------- .../designer/widget/map/widgetBarMap.vue | 202 +++-------- 9 files changed, 264 insertions(+), 344 deletions(-) diff --git a/report-ui/src/assets/iconfont2/demo_index.html b/report-ui/src/assets/iconfont2/demo_index.html index 0529acc3..e84c8e11 100644 --- a/report-ui/src/assets/iconfont2/demo_index.html +++ b/report-ui/src/assets/iconfont2/demo_index.html @@ -55,15 +55,9 @@ @@ -84,9 +78,9 @@ 
@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1702535676905') format('woff2'),
-       url('iconfont.woff?t=1702535676905') format('woff'),
-       url('iconfont.ttf?t=1702535676905') format('truetype');
+  src: url('iconfont.woff2?t=1702540060096') format('woff2'),
+       url('iconfont.woff?t=1702540060096') format('woff'),
+       url('iconfont.ttf?t=1702540060096') format('truetype');
 }

第二步：定义使用 iconfont 的样式

@@ -113,20 +107,11 @@ diff --git a/report-ui/src/assets/iconfont2/iconfont.css b/report-ui/src/assets/iconfont2/iconfont.css index b5982258..d03dce7c 100644 --- a/report-ui/src/assets/iconfont2/iconfont.css +++ b/report-ui/src/assets/iconfont2/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4369261 */ - src: url('iconfont.woff2?t=1702535676905') format('woff2'), - url('iconfont.woff?t=1702535676905') format('woff'), - url('iconfont.ttf?t=1702535676905') format('truetype'); + src: url('iconfont.woff2?t=1702540060096') format('woff2'), + url('iconfont.woff?t=1702540060096') format('woff'), + url('iconfont.ttf?t=1702540060096') format('truetype'); } .iconfont { @@ -13,11 +13,7 @@ -moz-osx-font-smoothing: grayscale; } -.icon-03:before { - content: "\e60e"; -} - -.icon-ditu:before { - content: "\e884"; +.icon-ditu1:before { + content: "\e627"; } diff --git a/report-ui/src/assets/iconfont2/iconfont.js b/report-ui/src/assets/iconfont2/iconfont.js index 2b68a01d..ae35c037 100644 --- a/report-ui/src/assets/iconfont2/iconfont.js +++ b/report-ui/src/assets/iconfont2/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4369261='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,l,c,d,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4369261,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(l=i,c=n.document,d=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){d||(d=!0,l())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window); \ No newline at end of file +window._iconfont_svg_string_4369261='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,a,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4369261,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,a=n.document,d=!1,r(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,l())})}function l(){d||(d=!0,c())}function r(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window); \ No newline at end of file diff --git a/report-ui/src/assets/iconfont2/iconfont.json b/report-ui/src/assets/iconfont2/iconfont.json index b4aa628e..d3bae0e3 100644 --- a/report-ui/src/assets/iconfont2/iconfont.json +++ b/report-ui/src/assets/iconfont2/iconfont.json @@ -6,18 +6,11 @@ "description": "", "glyphs": [ { - "icon_id": "1236837", + "icon_id": "7463933", "name": "地图", - "font_class": "03", - "unicode": "e60e", - "unicode_decimal": 58894 - }, - { - "icon_id": "2076231", - "name": "地图", - "font_class": "ditu", - "unicode": "e884", - "unicode_decimal": 59524 + "font_class": "ditu1", + "unicode": "e627", + "unicode_decimal": 58919 } ] } diff --git a/report-ui/src/assets/iconfont2/iconfont.ttf b/report-ui/src/assets/iconfont2/iconfont.ttf index e29b83f913bd402431ff1426437d9fd3c87580a1..c584be24a765617f6699a9626f8e19197f21d2fd 100644 GIT binary patch delta 774 zcmY*VO-~b16uoz*v{gc<(wS*xD3qDf2^66n`;nBPNeQ%;1-O8PMk7s&6hozr#Z+Tb zg6<>{LLwVuOxze(CKwmS1;4?y7~SAPml|VYsP}a+#(8t^yXU-f?)!Kx9Jsazn&yR{ z0JsGJi^WQz`ep7-KjH5b)#cSY*B>RP4*~d9!e)7?Pzo(}#!35$B2gy7@sYnz^*f4S zxl(U9sUYn)O3u}_Vga5q%$F$HD}_cC&%kY3_Yn@Rz%_*3ZJcQ8M|yiZ;6K0yE&sn6#~NGBp@T}EV#K0w{zN-VEOU*}e3}}} zlR<53Y>YqBTdlvDFl$CE+G(b5|1!s8v)2NaoQVlr2VqZ18@KlOuXLAQh`>d-3UsSM zhaR#L|w2X!N1zLfuFs*)`QJ%3M!Rk5@WB77WaWhjKG7XL3W~*+6j2kOR?kTHjQr z_Mn!T>eJ#WY$z^Ca;01zZj_UR-*rKv!b1eHiq5Bx3);A54BXgZ#Jc6-AcbAs1bEv?s&)v9CFA*M`@+L9;NsE1446zPXGV_ delta 874 zcmY*VUr3Wt6hG(QZ{Ig{Q@{OnQ$OeCX094;bK66vQcn`0DM5&s%fF%91T|&^Q?&mD z!U%&1f_jGlZ6is-F}RT2`>Q-KeX$X^&8e0% z=K=5@0E~{sqI2=Zci+k1C%G{-yEOS=VT%LsTjZ}#PejK(m-c>9ZjK~8O@Q=;Unl!D zNy~I>A*o|z0sf#zH=7uXLKt?aewlo2ESj7{1I$yrj(kTv8kHG~FOjJFUc3=WAy^bf{)q88jcECTuN;!p8`7o7OVCkP|>m4Z%azUja_!#L*;v4~i zYygoo0{cdcg#y4|O%bG+SkyEKis^G~KRwE-QaZu_juc#q2w@Txb zzf}ptEMSrd^ZcdJaUBzGhGkiXKF&tX6Idu`}A=*i{qxDLC~ku$z! z*{n77>>!)X7;CqA&)3z%{^i>e%RD|jd-D$4)UVP|8fx~DKj)2PDR2~qV3OLkMywI5 zzqJcP9X@ncquFG!NpOd=;M(1hp;1p^kdY!Y3~PESbg2%kW+ z%PE@WR3uD!H7H6}lO@=O?fyVGB#RO@A%hKNX-QG6^}fF0K3~06X=`X0h{p#S8?y$R z%|P-{(i_AC4i3%OJs$g^SAAz@Ds(%dK_~8Vji}e+eeBihxh9_pb2Mxy$)uvxb-8?f zKDw^1Q*}yPk&=i{+gfaN^J&qbm*P0+b=&hPl@eF%Zm(XOf4`&l+vUtyq0?31vcU3N ZVg6!MxXX+j8FCbWwFiaq%L|LNyFYl0u1^2} diff --git a/report-ui/src/assets/iconfont2/iconfont.woff b/report-ui/src/assets/iconfont2/iconfont.woff index 6cc82b1a7b4e4d418e5962b4dbc3c74ac34e7bde..3013a52e639fb0dc349b5a0ef85263147d9ed745 100644 GIT binary patch delta 775 zcmX@Yb%Rr++~3WOfsp|SSZ*+IgJ^b#i6XZ3HXh%Ta}x^~7#KT%V%|Wy;JN=c`ShI1 zG$8v55NiOjO~1M8-Hg=46b1&SKR|W*Ky0R#z-^iV6l7pv)&cTmfLMk79&>X>Zb=1D z%mc{h0AUc3lb;My7XW0kf$=;BhTO!80t=vE1W-T$gc$`H%JLF(Q-NYY0~j5EmZb|U zw%JgSUt9uo_YR;MIUv@bR#jRvnS;@ZF=4Vdqe}fs`{4AvANLO&I8f8h=wW2ANF#}f zAv=|4UB#T_goK1tAZAOFRY*%rNZ?6KNMT^KU!b8JF=u8Yx6Zjk3s}MqGYQo%`}g0z zhvie`0TpIt>BAZi7$+MA$XTpWn9(T6(BZ+w%1|*!wdbJUAqNrH=NBWwN;u|bPTa_0 z?7-X`P=9Qj3hS&X3DOY_($jQeHf`qQzJ6q>bojsK`49I0VExzR7=5;O=g#+g_H^qB z{HhGzH-&kZlin`(>Jo<)(c7y3f7No?| z%o)2DcA35R{ld{TcLkqD?gQr!N)vn)q;42B{fRD^DzVh9esSWZ+kwls7XEtqt9I_U zxxTB7C%I+UD9<`=QGM=FYVZ$58^hip-78-%ZE*ScUGTEa3(FIlo2S0`qp)m_|Kvk1 zQxnguDm^EBdRNNliZ}DO?GCjnnB%zXR<8d)i+P(%#C96Z)|C_gdB*7Fx_5D%uGv#R z3toRM5vOIEHSsfhP1lF@^=6!|L8;eyil-}o;eLP6d_O4IQxXyw9?cilFFf}7c1`Mo zv_yu+cJ4{f6<++m94RrwxG{#0O>Ke(gU2~;HDJ(!)q|o?;P4>^CWlEA8AS~k8QeLT zvRQ!f4Z>gmOf%pl%*2qzzzP;&0+Kvj3|v6!KUiS%eP$m<(awpT6K6J>s%~C#WkMq( K15X(fP$2;31`yl; delta 894 zcmcb?d4x-(+~3WOfsp|SSX~&nK{Wf8i6XZ3D&C>Vxrqe~42&H>v2Y;WmREY=ReDZk z8j$?}h%143!qk#g%o(YPDGUtEF+g?tKy0R#^x{hfP!K5A1LP|Ju?qVm=GKhdk_w>M z8X%tsgn5`47;^HHLF#q@`5a(u#&9Axv7*2ND0l!UAP>X}j6w{>d5O8HK(PlvOC1;( zn9>Cn+iWPvFD?PPTLGv>35boWDrT>p%)#iym@?U$QKkOl-i*Y&ANLO&I8f8RP*CGc z$D$5ShT_RQ-zw(3op6x1!GMQZKl3HC;$TB2(EnU&;JW-0Q1SHF`7iRPUH_?VmQ|_U_93>*Jq4KKEeKG&ZS@KzchOz(?DToFGVB&;Yl91++o{-AGsHX6Y$%(D)e}Ww|gRm@P8_>+wiMDx% o90Xc7H!(XhO3s|vIdSI1*2a?uW~i!eUNWVTk%3Qz$(n%y031wU)Bpeg diff --git a/report-ui/src/assets/iconfont2/iconfont.woff2 b/report-ui/src/assets/iconfont2/iconfont.woff2 index ff47d4749f5bd8b13948f097bf01a06311a5802e..fc3a82f01916dbf73893894ba233efef86148153 100644 GIT binary patch delta 862 zcmV-k1EKt|2kZtIcTYw#00961000AQ01E&B000L-0009Ykr*9+f^Z6gJc23#HUcCA z2nz-P1Rw>3X9q7EWd_JDux;3rM(#As8bQRej|IR>h==FL-ktkoX4aRsib^yKl_f+| zqLaE>CjUuWE2x!tP|wPz2pCXD^KJCcxw(?8y{G{^#eA>wk_Vt1M?QyU4dBSH3DsR#L_%W%`OI} z_ZTV%R(#absJlK8N z>Y)YS$nP1i2zO7Y$k}l8MV!k{37^&$#=tJuKSNi5KYY34lse4 z=frZ@r<#>Oaqg{m0FQeuNu3;kCgP#H=c4Czet+*du(eCB> zrnw2nnKf>I!fCm~!+oZ=Z@mB4v7@{a&vf_HRF4eLMVsc+Vp>{Ol2^9e*UnbFO{IOR z(be|dfigNVUZG5AuxY+5F`6E8w;h}wkzCVmt=hK9rjcE8!l%j3H)}RavkT=m(s;OI zn`COeloC7o=`?BSSxux)Sb3I{j;{IIU;Dpr%}on`e+v)~pz-`K5C7pe{&;VYnMMC^ zX)oYQ+;CuTya1RPXgN`1@YY3Ffykn{NTrG;M3XyoZiL@vd1z!>`~2)H?Z3NdXwiR< z=4RswWG&{fLRo{V-5xY)u@7z5rOa;EPf1IZRxGJU5PB>?(&ZgwJx;Jfd4X!kFKE)^ zKeRc2A12GSTZ$@)Aci6yvUO0zDdgCe(12(m5>!bUQsyf~L@mM|7~t!lkE9_vB14Q& zR|^6u#SjyP45o6sA*oaWl|&&%9Q74as*LpW!&Nu&ny#gqjEwhXVNW2ViMJIjHPCN>)*;CJ>0CFbE?kECZzqdPJ%Q6(D7G oCozOW`4aZ3X9qJI$OchVO|oP^4xH0lj1}VLcxkv{hNwjk67~NZ50CrtJ9pcA->s=< znm3h*hi;N+8A8!aQ_JKX+2!m5j9n3>=-WW9$cn67eZEW5G}&0w6j5@nb%3&R0OTI> z1ZjTY)uzl;|L1aldZWM>e+vM{T($@H!UM|#I*its;=Mc|?*le;Kl=!D+vbV1Kk(`a z>bFuQfDQ_?Fi6tlR<5Z)QP3$3>7i3-yY?*z4QWVE(+lt{_-)9=tg+sK4Xw4ts6OuD02x>v+p^?m)jo+r4b_(jrgU;Kr1^=kDi-iPgEm?>s7ob5=x~9pl z%H6zwMz`gnl55!aaK(t0O6W9_K+<6bvQD#Tp{_!s$1b!w?SpP>0tWXOQ6eJ>6Ij#= z5C*M5((gHBgYMBn{es50UuX^bhi<2XJ6?~)NcUq>gmg^%!CWm23|lDy*#|NcPvJ7} z3-QiIH#*umF5RcKJ{L|c2h=Exg`WVQ6Ek>RfVhM*1X|l)>iMICkSyeY#q=!Bn zVniW`4yE~la%n;V!y}gL_dOt{gh#<0(U$<*v5`D-WXGWcdMXP#<=x06j@e5+WlCr0qRQMy@0R F005pIySV@W diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js index 172b6d4b..4f729058 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js @@ -3,7 +3,7 @@ export const widgetBarMap = { type: 'mapChart', tabName: '地图', label: '柱形地图', - icon: 'iconzhongguoditu', + icon: 'icon-ditu1', options: { // 配置 setup: [ @@ -30,42 +30,42 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'world', name: '世界' }, - { code: 'china', name: '中国' }, - { code: '安徽', name: '安徽' }, - { code: '澳门', name: '澳门' }, - { code: '北京', name: '北京' }, - { code: '重庆', name: '重庆' }, - { code: '福建', name: '福建' }, - { code: '甘肃', name: '甘肃' }, - { code: '广东', name: '广东' }, - { code: '广西', name: '广西' }, - { code: '贵州', name: '贵州' }, - { code: '海南', name: '海南' }, - { code: '河北', name: '河北' }, - { code: '黑龙江', name: '黑龙江' }, - { code: '河南', name: '河南' }, - { code: '湖北', name: '湖北' }, - { code: '湖南', name: '湖南' }, - { code: '江苏', name: '江苏' }, - { code: '江西', name: '江西' }, - { code: '吉林', name: '吉林' }, - { code: '辽宁', name: '辽宁' }, - { code: '内蒙古', name: '内蒙古' }, - { code: '宁夏', name: '宁夏' }, - { code: '青海', name: '青海' }, - { code: '山东', name: '山东' }, - { code: '上海', name: '上海' }, - { code: '山西', name: '山西' }, - { code: '陕西', name: '陕西' }, - { code: '四川', name: '四川' }, - { code: '台湾', name: '台湾' }, - { code: '天津', name: '天津' }, - { code: '香港', name: '香港' }, - { code: '新疆', name: '新疆' }, - { code: '西藏', name: '西藏' }, - { code: '云南', name: '云南' }, - { code: '浙江', name: '浙江' }, + {code: 'world', name: '世界'}, + {code: 'china', name: '中国'}, + {code: '安徽', name: '安徽'}, + {code: '澳门', name: '澳门'}, + {code: '北京', name: '北京'}, + {code: '重庆', name: '重庆'}, + {code: '福建', name: '福建'}, + {code: '甘肃', name: '甘肃'}, + {code: '广东', name: '广东'}, + {code: '广西', name: '广西'}, + {code: '贵州', name: '贵州'}, + {code: '海南', name: '海南'}, + {code: '河北', name: '河北'}, + {code: '黑龙江', name: '黑龙江'}, + {code: '河南', name: '河南'}, + {code: '湖北', name: '湖北'}, + {code: '湖南', name: '湖南'}, + {code: '江苏', name: '江苏'}, + {code: '江西', name: '江西'}, + {code: '吉林', name: '吉林'}, + {code: '辽宁', name: '辽宁'}, + {code: '内蒙古', name: '内蒙古'}, + {code: '宁夏', name: '宁夏'}, + {code: '青海', name: '青海'}, + {code: '山东', name: '山东'}, + {code: '上海', name: '上海'}, + {code: '山西', name: '山西'}, + {code: '陕西', name: '陕西'}, + {code: '四川', name: '四川'}, + {code: '台湾', name: '台湾'}, + {code: '天津', name: '天津'}, + {code: '香港', name: '香港'}, + {code: '新疆', name: '新疆'}, + {code: '西藏', name: '西藏'}, + {code: '云南', name: '云南'}, + {code: '浙江', name: '浙江'}, ], value: 'china' }, @@ -276,10 +276,10 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -310,6 +310,22 @@ export const widgetBarMap = { ], value: 'sans-serif' }, + { + type: 'vue-color', + label: '0%渐变色', + name: 'fontColor0', + required: false, + placeholder: '', + value: '#073684' + }, + { + type: 'vue-color', + label: '100%渐变色', + name: 'fontColor100', + required: false, + placeholder: '', + value: '#061E3D' + }, { type: 'el-input-number', label: '边界线宽度', @@ -326,6 +342,129 @@ export const widgetBarMap = { placeholder: '', value: '#fff' }, + { + type: 'el-select', + label: '边界线类型', + name: 'borderType', + required: false, + placeholder: '', + selectOptions: [ + {code: 'solid', name: '实线'}, + {code: 'dashed', name: '虚线'}, + {code: 'dotted', name: '斑点'}, + ], + value: 'solid' + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: 'rgba(10,76,139,1)' + }, + { + type: 'el-input-number', + label: '阴影模糊系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 10 + }, + { + type: 'el-slider', + label: '透明度', + name: 'opacity', + required: false, + placeholder: '', + value: 100 + }, + ] + }, + { + name: '地图高亮设置', + list: [ + { + type: 'el-switch', + label: '文字显示', + name: 'isShowEmphasisLabel', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '文字大小', + name: 'emphasisLabelFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '文字颜色', + name: 'emphasisLabelFontColor', + required: false, + placeholder: '', + value: '#D4EEFF' + }, + { + type: 'el-select', + label: '文字粗细', + name: 'emphasisLabelFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '文字风格', + name: 'emphasisLabelFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '文字字体', + name: 'emphasisLabelFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'vue-color', + label: '0%渐变色', + name: 'emphasisLabelFontColor0', + required: false, + placeholder: '', + value: '#073684' + }, + { + type: 'vue-color', + label: '100%渐变色', + name: 'emphasisLabelFontColor100', + required: false, + placeholder: '', + value: 'rgba(199, 21, 133, 1)' + }, ] }, { @@ -397,9 +536,9 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -454,9 +593,9 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -476,105 +615,6 @@ export const widgetBarMap = { }, ], }, - { - name: '地图块颜色', - list: [ - { - type: 'vue-color', - label: '0%处颜色', - name: 'font0PreColor', - required: false, - placeholder: '', - value: '#073684' - }, - { - type: 'vue-color', - label: '100%颜色', - name: 'font100PreColor', - required: false, - placeholder: '', - value: '#061E3D' - }, - { - type: 'vue-color', - label: '高亮渐变色', - name: 'fontHighlightColor', - required: false, - placeholder: '', - value: '#2B91B7' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowTooltip', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'tooltipFontSize', - required: false, - placeholder: '', - value: 16 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'tooltipColor', - required: false, - placeholder: '', - value: '#00FEFF' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'tooltipFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-select', - label: '字体风格', - name: 'tooltipFontStyle', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'italic', name: 'italic斜体'}, - {code: 'oblique', name: 'oblique斜体'}, - ], - value: 'normal' - }, - { - type: 'el-select', - label: '字体系列', - name: 'tooltipFontFamily', - required: false, - placeholder: '', - selectOptions: [ - {code: 'sans-serif', name: 'sans-serif'}, - {code: 'serif', name: 'serif'}, - {code: 'Arial', name: 'Arial'}, - {code: 'Courier New', name: 'Courier New'}, - ], - value: 'sans-serif' - }, - ], - }, { name: '自定义配色', list: [ @@ -583,7 +623,7 @@ export const widgetBarMap = { label: '', name: 'customColor', required: false, - value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue index b0f594b7..3f3384b1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue @@ -79,7 +79,7 @@ export default { geo: { map: "china", show: true, - roam: false, + roam: true, layoutSize: "80%", label: { emphasis: { @@ -114,75 +114,6 @@ export default { }, }, series: [ - { - aspectScale: 0.75, - type: 'map', - map: 'china', - //roam: true, - effect: { - show: false, - period: 6, - trailLength: 0.7, - color: "#fff", - symbolSize: 3, - }, - label: { - normal: { - //调整数值 - position: "right", - // 地图省市区显隐 - show: false, - color: "#53D9FF", - fontSize: 20, - }, - emphasis: { - show: true, - }, - }, - itemStyle: { - normal: { - //地图块颜色 - areaColor: { - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: "#073684", // 0% 处的颜色 - }, - { - offset: 1, - color: "#061E3D", // 100% 处的颜色 - }, - ], - }, - borderColor: "#215495", - borderWidth: 1, - }, - //鼠标放置颜色加深 - emphasis: { - areaColor: { - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: "#073684", // 0% 处的颜色 - }, - { - offset: 1, - color: "#2B91B7", // 100% 处的颜色 - }, - ], - }, - }, - }, - data: [] - }, // 柱状体的主干 { type: 'lines', @@ -351,8 +282,6 @@ export default { editorOptions() { this.setOptionsTitle(); this.setOptionsGeo(); - this.setOptionsTooltip(); - this.setOptionsMap(); this.setOptionsData(); }, // 标题设置 @@ -382,40 +311,15 @@ export default { }; this.options.title = title; }, - // tooltip 设置 - setOptionsTooltip() { - const optionsSetup = this.optionsSetup; - const tooltip = { - trigger: "item", - show: optionsSetup.isShowTooltip, - textStyle: { - color: optionsSetup.tooltipColor, - fontSize: optionsSetup.tooltipFontSize, - fontWeight: optionsSetup.tooltipFontWeight, - fontStyle: optionsSetup.tooltipFontStyle, - fontFamily: optionsSetup.tooltipFontFamily, - }, - formatter: function (params) { - if (params.seriesType == 'scatter') { - return params.data.name + "" + params.data.value[2]; - } else { - return params.name; - } - }, - }; - this.options.tooltip = tooltip; - }, setOptionsGeo() { - this.options.geo['map'] = this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName; - this.options.series[0]['map'] = this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName; - }, - // 地图设置 - setOptionsMap() { const optionsSetup = this.optionsSetup; - const label = { - normal: { + const geo = { + map: this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName, + show: true, + roam: true, + layoutSize: "80%", + label: { //调整数值 - position: "right", // 地图省市区显隐 show: optionsSetup.isShowMap, color: optionsSetup.fontColor, @@ -424,54 +328,64 @@ export default { fontStyle: optionsSetup.fontStyle, fontFamily: optionsSetup.fontFamily, }, - emphasis: { - show: false, - }, - } - const itemStyle = { - normal: { - //地图块颜色 - areaColor: { - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: optionsSetup.font0PreColor, // 0% 处的颜色 - }, - { - offset: 1, - color: optionsSetup.font100PreColor, // 100% 处的颜色 - }, - ], + itemStyle: { + normal: { + //地图块颜色 + areaColor: { + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: optionsSetup.fontColor0, // 0% 处的颜色 + }, + { + offset: 1, + color: optionsSetup.fontColor100, // 100% 处的颜色 + }, + ], + }, + borderType: optionsSetup.borderType, + borderColor: optionsSetup.borderColor, + borderWidth: optionsSetup.borderWidth, + shadowColor: optionsSetup.shadowColor, + shadowBlur: optionsSetup.shadowBlur, + opacity: optionsSetup.opacity / 100, }, - borderColor: optionsSetup.borderColor, - borderWidth: optionsSetup.borderWidth, }, //鼠标放置颜色加深 emphasis: { - areaColor: { - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: "#073684", // 0% 处的颜色 - }, - { - offset: 1, - color: optionsSetup.fontHighlightColor, // 100% 处的颜色 - }, - ], + label: { + show: optionsSetup.isShowEmphasisLabel, + color: optionsSetup.emphasisLabelFontColor, + fontSize: optionsSetup.emphasisLabelFontSize, + fontWeight: optionsSetup.emphasisLabelFontWeight, + fontStyle: optionsSetup.emphasisLabelFontStyle, + fontFamily: optionsSetup.emphasisLabelFontFamily, + }, + itemStyle: { + areaColor: { + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: optionsSetup.emphasisLabelFontColor0, // 0% 处的颜色 + }, + { + offset: 1, + color: optionsSetup.emphasisLabelFontColor100, // 100% 处的颜色 + }, + ], + }, }, }, } - this.options.series[0]['label'] = label; - this.options.series[0]['itemStyle'] = itemStyle; + this.options.geo = geo; }, // 计算柱图的高度比例 calMaxHeight(val, heightRate) {