From b850e41c9fc8bccc152a52d7b9730af1c7163542 Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Wed, 8 Dec 2021 15:14:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE-=E9=9C=80=E6=B1=82?= =?UTF-8?q?=E6=B8=85=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/shuju/measure/jgzs@2x.png | Bin 0 -> 1603 bytes src/assets/img/shuju/measure/lxdj@2x.png | Bin 0 -> 1426 bytes src/assets/img/shuju/measure/ly@2x.png | Bin 0 -> 1590 bytes src/assets/img/shuju/measure/qita.png | Bin 0 -> 1414 bytes src/assets/img/shuju/measure/xq@2x.png | Bin 0 -> 1913 bytes .../visual/communityParty/community.vue | 401 ++++++++++++++++++ src/views/modules/visual/measure/service.vue | 271 +++++------- 7 files changed, 496 insertions(+), 176 deletions(-) create mode 100644 src/assets/img/shuju/measure/jgzs@2x.png create mode 100644 src/assets/img/shuju/measure/lxdj@2x.png create mode 100644 src/assets/img/shuju/measure/ly@2x.png create mode 100644 src/assets/img/shuju/measure/qita.png create mode 100644 src/assets/img/shuju/measure/xq@2x.png diff --git a/src/assets/img/shuju/measure/jgzs@2x.png b/src/assets/img/shuju/measure/jgzs@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..fd3e53c80d1795c1d67a90455181a3a537fd9f42 GIT binary patch literal 1603 zcmV-J2E6%+P)Px){YgYYR9M5cS6yrrRTSny(I^ilYGRE4e~Iyd7~inFGt=#EyIY|xbX%dcTS{rm z&dl}~idH0m8io1?#DJAn5iM+K*_ok*c4-TOw)_Z4@C5^j@r4Ip^nv&Txqj!|S=gk7 z!WNr+nd!afeCM3+o^z+2G2=FWyuHodtezF^o}QJbJnjTNbHZ zYwn%#fBdL>8=gXtc-HP#fdqtSPmA#GZ4ll>y+Bd|dxH1kE6;d(Tk`K{@T|V37ZBhA z1=R-Xg#WumBJWtC2%elLaiTy3zAq8J!KK36*C?QjQ2Lsd-I3s)xcM*wUsP-ZK}tpb znUKi;DJY+W)9&+3kk|8$6^ZNvHLQ@Qud!hI3G_C1s{K(BJYFb52on5p?)AziLFjZo z!8X~(D4G1H?}}Py%BYE&0QHK zpzW{SnLAbt!UZ5JCR_z+IZ z<&KqfUb7zyivT9Zmt68p1_^{`LH@IWqpyp=5s93UibYfT1x71MQ}z-IMc{Dx)3=>K z_*{4<5*Vi*NWqs}x@#&w-%wR|x=#QI4wpWgQ4jbJmG}Bb%S8&lgOwsDS!LeHp7zKl z-3J_h2S>{u%P0Xf&?-P&M}&?+_=Y20IiuxSbDf&|2!Y{*6Re*H<+*4wrIU$yj|AlRbV`nw=or8#B{356BM zoa?n>CzZYRf{}2aj0SpMQWIt^lq*mzqn;9H4#(KcoZzMylLn`GhT$5St^O$)O9I1G z9kUElE<`o!kkHqV^b-B$Wkhz&GOH$MEzyW(L34KF_N&`#y;?64oV7~v`;Z8 z)+FD4y;ZY}&t(GWdfR*x4W*-!V%h^nNJi=j&5G4%PP77@egQUD)c)G_nq^jLj`5z9 z8n$$Fwy}UXn9DXcvI>YndlS1J4MWv&melnyLZ-_>Jl~am6y3d@s;8cybH?9()!E4< zZ6KWon<($0>ByFR$d@>nixQW`ZKYTfj{xJ6N`MUL?1)rWVbnpoK@jb6lWT!Z4L4>Y zR)pqU=B{mE8`yI4@FfoBk`u8>9;LZ<;t`-}QVj^hk3hbfIvHnINfq*F+2(!@V3{An z{w)g1z&o#D&$VfjKJb+jw3_xMH#MSJHt7h$_%k?vL54IwAXzD;H5Nn8e5#s9$~Jc4 z*$sT@q8nB1cGW|F=pk7U6aHT&KSpn3x(x$%nHc&8UqP& zgJO@t?^tv9$(GNaeEB9Mb<7UpMnbRN^fIC(C`)%{H_K*%64ZF40I4DSqL3PqFCBiz z8Y@K#m@%FzYF_3rcMvCW-`f8JiRj~070)xqO3p7eDcy>Clbiw^4Vsg{QqvmtxZ|m6 zy3EKIV@DTKjvad&zM{{wPc>4DJ)_H+OM002ovPDHLkV1gf5 B6z%{3 literal 0 HcmV?d00001 diff --git a/src/assets/img/shuju/measure/lxdj@2x.png b/src/assets/img/shuju/measure/lxdj@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..2db1aea005d7a6871faeaf8652bf6c47984033e5 GIT binary patch literal 1426 zcmX|A2~bl<7=9!`l9xat@CZ2|kpZtd6qPFUm_`JVDKb_lGYqxTQUbJ!!$?uA3&R5i{KR7KE7Jrb~y2ChMV-5HZRoTIdT+c0?0QOb7@WJX6dfx|pMp>uJe< z^R5xWo*}rFi$Ax;2kh`ZTU=wOS8(wG1Rq4O0rob`VJ-%i|HqI$HfV>9b1;oP z2IgSHdW>^T;~dkNgK3;MB!)~Aj>E@E6A}tO zKBVId&iET=z!2|Ti6z(31aso8%Zl0w*Es@m?uNBiLeW38BbGK{3MRNu(+C&j!RI#; z`pv}3W>94~mIO|Xoicx!PMJ(KpUttH&4=f*$gl5ME#8FR{z+acChJQr^-BJVjJ2ZV zf#j=Yq}2hzT9w6Gzte{b(g!KsP(?D_qZ$Tyh7p0Wnq+*;G%69a-U4l;0+H*bu}Pt+ z4>9$#O)uCcjRQ~u%$g>hOfy1!!Vw4tX4kdhuYoBS;=L=O-$X2LwoLl`9C&=i@rMJ0 zAQIWaf;zB}^6(a1>gvEwJ=emiyM z_oU=x$+@)i=^0ts*_SToGkEDG6Ps4bOj z?G1VmJ{`M7Qx~0QbAj}>J#0LW%%Ec|!4AF!wyww%f@HF!4> z{eNHO4c0C$gvk>oyMihLV{WIH>0dps$T@M8X+DxeF8u7+9NffHL60)Yl)#iZ&c(T< zfWB+HdYwht9<~=fN{b7N!n(aYquB2HaQ=w0VX9qh|FK3C|?`-cwoPSclAtel*w1Yh}6MsbJQSH&_KJMsT&Ik!- z=*-!(QBf|ZdfmD@Ri9d4$lyp2PjAoLzJ}14I9g&{OsK(E$J*gnN1{_Z1eL;FTix8Y z+E%s-oW*7#CDyv8G(;Q~S$-!{9Lc^Q6+P*H1gDiGXbkP*D6_o@cW*iNTW-ww8W}Cw zc6Tv}Oio&?xxEw%*X8EjKR;i0zrLZN{`~dmPqL`Lnk7{_?P0SWzBvlH%3M4g$8u9j t%gy(XPv!=zch|?AythLga%C!oPKMIdwDx<_P(FClkiT!BPpx-&>c8Ir-U9#t literal 0 HcmV?d00001 diff --git a/src/assets/img/shuju/measure/ly@2x.png b/src/assets/img/shuju/measure/ly@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..76303b9c1428b8e885297aa1d720dc8cce4951d0 GIT binary patch literal 1590 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 LS41!#7@PYaC-IVr literal 0 HcmV?d00001 diff --git a/src/assets/img/shuju/measure/xq@2x.png b/src/assets/img/shuju/measure/xq@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..bb4674f9d32846c6a46bbc6479f40536a7103bf9 GIT binary patch literal 1913 zcmV-<2Zs2GP)Px+Gf6~2R9M5cRts=c4 zo?9h9$!BBJ1CoNqa><5zz;C!|Qy6aD(hSp!Ti}+$2uN&=Ao`kb-rSV^qvoDg6na=< z3w23s^>9x~J3Lw51AnPF3oqG+;AO;%N6*3BgMIM8&Q6$86b8x0I+(IKyy!S_+OH9V-j9H^=@Ae#n%>(Ks!eE@#(X*)n?5xVg|* zI2RKR_^YIkcw3D7m11yx-F)S<)`b?95` zwfN*Cj>rX5(>ZwZP?VebFVD}$pB<}yx}w!*jt+pj@eG3|lKAX;VY+albd;}e>W9C2 zWAOWm=&W()f6mi3<3(RAYG}p8%{>hBTv5~Y;^tMh>PPungfe^zWT8_Jj=KPDTiaAs z^T|40TQ}(2P9wVEp}m#+t`|4^%gVhO{%O#*c7qO~Z$1613C)1v#K{Bt<8d&2bCTgV z|E_`uKd*T0T72>mXOvH|h!Jxv_R9$sV2s698DcRYSmJT`v%d~zeQ^+ey{}^Dqvikk z<5PzZPbWNb;Olv0BOh^yI~r%~?DSDLCscr`t82FDdg51Go5{CI_qp)zO9rDf} zXP`CNatB%vQLvtmfUzs)m3xv8y?hj=O(?m{$^S`a=l>x+mMY6SlD26(;*|?i^{2ErRlmC#BNx+qSP3lORv6V(m)rEBifBFk+ ze{&-LN)6k%QyzZ}FOLKn?VXOC*!BWt7%Ue97MRxF}G=HR!IHp_vzuHL=l{0m6h z!-x*Pm=UpU*$&Q1f_gt+Vya8K^`46*IxoLIH_;H!2QMrF+_~UQ>%+aJdiSNR=32pJ z2=F^7hGI!0qs14C+IuM17(>Uc#A-h#5)Bakeg|8(423lKy0tR5E?s5xr*`XoDVw(H z(qd)R@O*Qky2~n5T-Mab*Q;HZ@^m%A2I3G`?Mbc5vh!-vAT61L+f3S&gC6VE9mot! ziCBP*Nch}d&35rBeAioNu1$Lkfz)R@AHQB*%`exuMieSfPrfqHv07DiQLd>LmXZ$( zEF~_*P%LSX7HNu)p@edc(ShXJ(E^CTo}GhVibqkcbn{EhLBV143t#DLQZ}78^%lO2 zF4nlyT9tc5sje0lkqv#Dh(p{QH~%Wdk_Kt94T=R&uB!^j44OEAE^dq5$-hUFjJ5@G zCnwi>h1KTZg=5A5E22o_72c(!1X`1ge8eFx#ZWArpo|t*Bo22O@wjtW3mmH^q+*xI&;p&R+q6qBaD^WQ%_9#eL&{n z?v}fR-(g1-Y{z1I*%gZr*DIM1IgE=jH=_MN+)7Ew>uCMa00000NkvXXu0mjfb(*OX literal 0 HcmV?d00001 diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue index e69de29b..30fdb498 100644 --- a/src/views/modules/visual/communityParty/community.vue +++ b/src/views/modules/visual/communityParty/community.vue @@ -0,0 +1,401 @@ + + + + + + diff --git a/src/views/modules/visual/measure/service.vue b/src/views/modules/visual/measure/service.vue index eff367fe..96cc33ba 100644 --- a/src/views/modules/visual/measure/service.vue +++ b/src/views/modules/visual/measure/service.vue @@ -29,7 +29,7 @@ -
+ + +
+
@@ -173,218 +177,125 @@ export default { async mounted() { await nextTick(100); this.initCharts() - this.initChartType() + // this.initChartType() this.getBuildingwarnlist(); }, methods: { initCharts() { - const eId = document.getElementById('echartOrg') + const eId = document.getElementById('echartsBox') let _charts = echarts.init(eId) + let option = { tooltip: { - show: false, - trigger: 'item' + trigger: 'axis', + axisPointer: { + // Use axis to trigger tooltip + type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' + } }, legend: { - show: false, - orient: 'vertical', - top: '40%', - left: 'right', + top: 'bottom', + bottom: 'bottom', textStyle: { color: '#fff' } }, - title: { - text: '12000', //图形标题，配置在中间对应效果图的80% - subtext: '总数', - left: "center", - top: "center", - textStyle: { - color: "#fff", - fontSize: 28, - align: "center" + grid: { + left: '3%', + right: '4%', + bottom: '10%', + containLabel: true + }, + xAxis: { + type: 'category', + axisLabel: { + color: '#fff' + }, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value', + splitLine: { + show: false }, - subtextStyle: { - fontSize: 16, + axisLabel: { color: '#fff' - } + }, + // axisLine: false }, series: [ { - // name: 'Access From', - type: 'pie', - // center: ['10%', '50%'], - radius: ['40%', '60%'], - avoidLabelOverlap: false, - // top: top + '%', - // height: '80%', - left: 'center', - width: 400, + name: '区域化党建单位', + type: 'bar', + stack: 'total', + // barWidth: 20, label: { - show: true, - position: 'outer', - alignTo: 'edge', - formatter: '{a|{c}}\n{r|}\n{name|{b}}', - minMargin: 5, - edgeDistance: 20, - lineHeight: 15, - color: '#fff', - fontSize: 12, - // padding: [5], - distanceToLabelLine: 10, - rich: { - name: { - padding: [0, 6, 0, 6] - }, - a: { - fontSize: 15, - color: '#fff', - padding: [0, 6, 0, 6] - }, - r: { - backgroundColor: 'auto', - borderRadius: 6, - width: 6, - height: 6, - // padding: [3, 3, 0, -12] - } - } + show: true }, emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } + focus: 'series' }, - labelLine: { - show: true, - length: 20, - length2: 0, - maxSurfaceAngle: 80, - lineStyle: { - cap: 'round' - } + data: [320, 302, 301, 334, 390, 330, 320] + }, + { + name: '社会组织', + type: 'bar', + stack: 'total', + // barWidth: 20, + label: { + show: true }, - labelLayout: function (params) { - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - return { - labelLinePoints: points - }; + emphasis: { + focus: 'series' }, - data: [ - { value: 1048, name: 'Search Engine' }, - { value: 735, name: 'Direct' }, - { value: 580, name: 'Email' }, - { value: 484, name: 'Union Ads' }, - { value: 300, name: 'Video Ads' } - ] - } - ] - } - option && _charts.setOption(option); - - }, - initChartType() { - const eId = document.getElementById('echartType') - let _charts = echarts.init(eId) - let option = { - tooltip: { - trigger: 'item' - }, - legend: { - show: false, - orient: 'vertical', - top: '40%', - left: 'right', - textStyle: { - color: '#fff' - } - }, - title: { - text: '12000', //图形标题，配置在中间对应效果图的80% - subtext: '总数', - left: "center", - top: "center", - textStyle: { - color: "#fff", - fontSize: 28, - align: "center" + data: [120, 132, 101, 134, 90, 230, 210] }, - subtextStyle: { - fontSize: 16, - color: '#fff' - } - }, - series: [ { - // name: 'Access From', - type: 'pie', - // center: ['10%', '50%'], - radius: ['40%', '60%'], - avoidLabelOverlap: false, - // top: top + '%', - // height: '80%', - left: 'center', - width: 400, + name: '社区自组织', + type: 'bar', + stack: 'total', + // barWidth: 20, label: { - position: 'outer', - alignTo: 'labelLine', - formatter: '{name|{b}}\n{time|{c} 小时}', - minMargin: 5, - edgeDistance: 20, - lineHeight: 15, - color: '#fff', - fontSize: 15, - rich: { - time: { - fontSize: 10, - color: '#fff' - } - } + show: true }, emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } + focus: 'series' }, - labelLine: { - show: true, - length: 20, - length2: 0, - maxSurfaceAngle: 80 + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: '志愿者', + type: 'bar', + stack: 'total', + // barWidth: 20, + label: { + show: true }, - labelLayout: function (params) { - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - return { - labelLinePoints: points - }; + emphasis: { + focus: 'series' }, - data: [ - { value: 1048, name: 'Search Engine' }, - { value: 735, name: 'Direct' }, - { value: 580, name: 'Email' }, - { value: 484, name: 'Union Ads' }, - { value: 300, name: 'Video Ads' } - ] + data: [150, 212, 201, 154, 190, 330, 410] + }, + { + name: '未完成', + type: 'bar', + stack: 'total', + // barWidth: 20, + label: { + show: true + }, + emphasis: { + focus: 'series' + }, + data: [820, 832, 901, 934, 1290, 1330, 1320] } ] - } + }; + option && _charts.setOption(option); }, + onClickList(index, level) { this.activeIndex = index; this.activeLevel = level; @@ -597,4 +508,12 @@ export default { } } } + + +.echarts-boxs { + width: 100%; + height: 400px; +} + +