From dcb3475aebff3726ecbae07461e4fde5c11f1af9 Mon Sep 17 00:00:00 2001
From: "453530270@qq.com" <aa123456>
Date: Fri, 30 Jun 2023 14:12:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=96=87=E5=8C=96=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/wh_24ins_bg.png | Bin 0 -> 8642 bytes
 src/assets/wh_tbg.png      | Bin 0 -> 4659 bytes
 src/assets/wh_tsg_tbg.png  | Bin 0 -> 4416 bytes
 src/views/WhView.vue       | 809 +++++++++++++++++++++++++++----------
 4 files changed, 594 insertions(+), 215 deletions(-)
 create mode 100644 src/assets/wh_24ins_bg.png
 create mode 100644 src/assets/wh_tbg.png
 create mode 100644 src/assets/wh_tsg_tbg.png

diff --git a/src/assets/wh_24ins_bg.png b/src/assets/wh_24ins_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5389f99f090b3983c0e227f196584ff2cc66eea
GIT binary patch
literal 8642
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
CI$?YO

literal 0
HcmV?d00001

diff --git a/src/assets/wh_tbg.png b/src/assets/wh_tbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..976753072140429b04c47c8bc8caa5fc6a2287b3
GIT binary patch
literal 4659
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

literal 0
HcmV?d00001

diff --git a/src/assets/wh_tsg_tbg.png b/src/assets/wh_tsg_tbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bbb324341396772f031e2acaeb5adde969a65fc
GIT binary patch
literal 4416
zcma)A_d6R7(5G5TV|5U#+M;R(Ewxuw?OCg~P_5c~1Vx3`Y7n$m)h1R_v$40>Ta6$h
zC01;;Uf=h5|A6<0yXStoyU%^@`8@aBXFZ))v^1<VWMpKt>S`(mWMt&lS25@&<&{@i
z?A<3LW2917QF`s4u{lqjad#q<YKN5`9Zpn@ZJ4o)>ndV<zTOo#^0!=6KQ~N;5p-SU
zW%*JXIo{J|mL)AH%~mq%g-(6@!!L6W7HJ!z9rg6DML)V8r5P35d=^^K;8apl8W`9`
z{b{FSh@h!!V$xjhS`u>pZ=y6XrJ4pC-8iXnHe(uQ2}=PxhC58dI%?E3chrkIr#DbH
zIRl+{1L(F-1>0ogZ&iu5qNW#7WN!Wl&7Egf>LT<YN(AX!gpqt`3r&JU7rUVEK$jQw
z+hvw1KtFxj9TAN9y{Fd-8VYQXL-tzk+HG|=@0C*n*H{yBsJn8;b2}UXG;+HZxnDmR
z+1Ob4TJ(!wqkuqh9#c2>J!oHn60*7&_A8-}#(+>jDPSI=0o!5?k1scnwY!(oX!NKy
z-cI%}zshW#gev13vl||fbwhpKjj9i~4*3*sanbvIk%_%FcfZ-??MgTPXE8itHdgkm
z3;4-AR(4LX_Ic;IMoRq%@RK#GRGm`RW%H!sSpqzc7#CJ2y!D2Qd8%h~D9-t;|8GJm
z!ZhRjD71GIem@n1&IX>7vQ+`8W{o6pF6g3tJyJ8aNnSw==?)_Sg@659yoS?1YvH9J
zn9uKQt2&;gPu#n7vR^(m*lIquU$iLA_P>kWTl<2tSd$#%y@Q1lGGU9NknX^nalz6U
z*};UR*Cvm3V6#b<mL7?^fH=gV<OqQ>!)87b7c7`33OUlyyJzk-(qN2oz<p;6O9&Wf
zJ?|3yrNtng{kErz?HTRSasO9ZDaoO4+u|I4JZX>Fny2p4Z=(x`=fur?>8Q4Klg&Yc
zoFEw(_)*9<YZUh6!Z$XRqn{D2pz2#^uZlCyu0n#Pp_sunAPWP;Ic)<S?|CNOsyCC9
z3xH+H7FqcEciYU68o$V)_hPsi*dvc$hC`@nDjreO@_!xP@eJo?Ho=@{*HZ?rEHzsK
z(!*|x#5<pji>oO|0p;VJsX3$WsES%Jc8fI3G3!_@{P5h5A%b%7cv_^O#X64unK_g2
zVO7Ksos8R})W5|jd9&M}059AgNQ+URAI`i|P6VdNc~}|fq)7*=6-j5fAJ`33-iSzT
z=%A3)a?H3>EHkJxtgkE+`@E-pUnS{!YYY9DM%(<jFH07LOM@@};_weH`xyjou<m{f
zx*ZSFw>qcwEyL=|?Qif3gu2mII6EbG!iTpCjB|S8g4%MigRF9L4cqUW@@H8U8c;Lq
z^mO-jeSEjuJGd?$KFJ?nVgg`GoFIU2OfIE=M(qD(TkEF(3JU&HXIZ0fJq_LZ1rKSG
zFZ=t{e5;T+hOC`ME(f|)A50_Vg<g192lIMi{=Fw2y5WdwWTCzt3fJ?KrRTzzeh1!p
z6Z>cXpd7(WcaANNwC;sXp4XbqcoKo`mET|o6WfTU(+~T*e;KFBMpLRTYmJ}t@t$kq
z@?5PKCW9`f8u^X4&-XhMR@6wa3x?$XuzuLnPOmxDo%|Y1-vdJn#OZkM*Os!gxbnWr
z<xI?-qsQp)NO*o~EMxacXzS)o+!C?K8q!SV8s=DuMjE~)SPG5)aSOq&`|q6nA8z9h
z#|4_qY?O{NYtN_OG-y;O<KHaX67PE>x8O}MZ_b9k^DWBD$AfNs!Cdta^EK589p$<t
zZwh3DMY{=~k8`Owge8TvD7UHP{mvxJcD@U2km`~4Cje03#~NqG!7suay;rXlC0Zm|
z+UWh(jqBWo6V{Y%xm;~cYn?w{g_zvg6wDl%fehbv0i#6ncOM*X$wgDd_fbd!J7tA2
z^yaaJ+Aj5F8DuSgDxehx>!zv7sP>718O866P~i?w>WLR)Q+8gh7S4G}sH(LxUA^9{
zTNSR#_+8rR&Bb#H>)gOYj45bn=-B`hYm){a+yK=+r2TFoE-U|5<=a_TcC-tFRrPmp
zn1_sUX8}0Io2C5|e$-{d7rpw<5~>|^h#MZS_BYJJn)KBhI*m>_9rNeM2UJ7dsHCE@
zasr+QruKKo0I=p%8rn7W7RQm?5I6RZwJc4DHHr5TQxQw2<4$OvA<hQ`F>KjVX|lni
z{GCQ?VKFXo6KDnX7@^AYJG+Gb1?P@FN!A&Bj8tEa^wY0j*51fD;IsjybNsjA{6B=3
z%%9PNWFG$h04iYz*w>tFo!vIFf^2{$j#aNn$iHSlhh^%qI}S05Tp!V_#AVr?jkKNu
z@LS-jlXwW4_*aTNeMXDXZ7=vg&hnSnS({Fqm3{ubgRJ}_-p8^N^N!keCLyy4Ut=<7
z_pE=G2H`ffXFU}EH~0FTCd5*fFa6}$4Gz+!^Q^-$vX-L#_|vL?Wcga|f0%OC|EyxZ
zmJ#z@t_FNh54%7oTOaQEb{R*TUX}0=b2wiQ!rhX1F}$~JlW^#(r%}wnmu0`SO-Sbo
z4%lwFJvMYihw#xs`uhnSqKcPdjr}vHDG}!o_&=&Ha$zaD48Q)mCl>KI6pug*xIf=u
z5{$G!A_IHDwDneyM(7iaK>iN?rAK1M(jk%DKWgc!VD@2$IWIQSXS{};^LWr5Oxu9E
z+MP=V$s!)AlYWWZ2VT!stbv1ndz9D}la-i^nJ8i+qCD$2qCL@jl4N|=3Qmn^he$bW
z{SdjCp&2MBkFeuIS|EHZqGf7I=&9!L53I77we7GIbWAfA?Be9i{OFS`O2>Ap)A|+)
zIz8O|VSa*|*3oVLVkxUg_+3MhE_y|zbc5)kWSdyjPXfcii5QK~T{`g4NVb%dhp8E$
zG>w`>9M}~EA+#KyK;l^k^b?Yz@CQv|;drSdsoOr|fj+UJ^^)77@PjY>0$LhNY|SNR
zL%nGa&LIPz?-VcZp6rQqH<qw~`pTC|$46pvI&3$*R#@i)#443tOrNeY?CIl07lFeI
z1VEcMHQs$e@q}m4me}6s;j|pFgBd0SZZr2Zpb*|Hlk!fD8%KYwD?|i;*Bk*KM^d<&
zn9*w>yDJE%IIR_n@1I*!?QNzz=S35R*S~luY=l$OE$|9+VOFy*L>kfxZdoy#RuHaw
z5W2;z=|3-6-GpV06!WB&3YFP=&k(|s<E><G=Bzo8gv<~NA393)Nivf!L8SevU%fsl
zP$C%O!7UK8Evm~Ov*6k0>NPTs?$&xwEF%)qM%9>{j~v{0M-vCtn2vIDWt<}YxNk*W
znZ)zIYD^j&=l+VH$xS}48pB=}^_<q4lz+PO;ioOW@^J1&TOv6#q{$0gKafOm0g#zg
z$(<rz+lyqV7G5|3Xi0dvbF}p>hoO|}I%RohPFI4Py6uT@tv+zw%nNEu$1XSU9(nis
zAVvAF_I2#3+uWNE0alZNEUQ<7!VwH~N8~dtE#%R7WM4PDHI~Kdv(sBlS}oKw&bn?1
zFj0Z>G&2B~ixJEb87`<1qK_^5Fyl{P6{3hDw3-^~R@z%v*ZC)Swj$eVVvyFlkaA92
zIgPw;L};UCcIB!XVJ~Ai?svg)OR!)3zq9uEv66DxWwt9-kg7p3X|&wydxz`vZ!wCl
zf%;j6*{j!VT<TMGP7gXg7eB_(q^Q3vKzw+FK{hjl+<Bu@sZ~Cun54bbI{VbV5lvjq
zp6WuFSkhJAxY2&J_z>NfbxWX@Be1bIPcAos4dr-srTE2(>F-7gDYz~U!n!-<Q3o-^
zgJL1C-(?tyT#tm!+*Mb}9UAMxb&&sMw413$@jC$UzA3*F6?OZcU#Sjmv50(RN{__o
z>pp%}N5fljG**L-W{?4!fY12a=NMHu9{sB6tqZXeX~uMVJ2ZVr9N1*d*_Q5!d^53J
zW|aQDf4Wh^WqC`ytIqPnsOt7F+8BXTi1r&2o%urHhf&X(3iTjmdl%Hff)i%Wj`;8M
zNL_b|_}J8DP(sC(GL2(JCvVTdzvR3Y?DlkO_tm@brWc4I?_QuNPBs+mhE01jPN2ew
zo#pR+%s>*l+}0K4)hUMD5#*@G)an(t(;3QkzgE?`GZJ&p_e)Aw={-_ljl=lz-IK%g
zLsr*CBEnynZkc0^R*MfFU2T$;*V4kL%2`Z0pzG}Zg6HPH;3lY3+E!alO3oZjnx~x0
znpet7Fz$Eq<PeSSpaC5n2fKr~z^ZQ#*2&mDEN^sU7PXCa2GEl*Dn=sz#>aGnbzrxi
zUHV(bK=r>JiL9}_T1AK5co<doG-ZD!qD;`vOrL6cqY`awwO5rq86ytP@@6zL){0k$
z|9Hi*06wR$ywTb2mr$+P5Ko%|M<jTjJXSLz)xPGRm;QNo+^`DLPKlp<5w>;-6fUIm
z%rDhsI29@2e-+RDYN>ut-)<L$kU#bsgz+dy5hE0g0(SD6kSl~@=Fswja1NXyoH1NM
zfmm95Hg~W*gl({KLCX8{3sq6FKruV9&nV{@?)EepMI1#?=4MliLJfe>Y>wp{!iBQi
zSYI>UwBZCANvK%+Xn-rr?h6u0thjiW%$#yiy9Igd(E10_h}dJ_-fP4kq$0}`TV$WV
zcFZtzEE}Fi8ry<fplSj;s^NIgf9`4bJZ*j6Kuwf|;4$S<X5rP;Okkhzm!{tqr38=6
zo-mVX{OTc?32Id;mYXj<$2#6$4eZwuVSWl(wQ-8>l}Cw=I5K5<4|Gg_q{)5{Todhg
z<nNQy2!5Q~A$}uLKFOZq7ry@SBi_~|WcxU9ku?VKv8j9nIU>{5qq9}?b!_;Kk5^oB
zc2qp0L8%8IwJ!q8Rh}~nn%5UrP~vb<Wi#R1@}rIS<69Pj_q@z0GHu`wfZwdq-gR3r
z&{i0pwd5H^8-IK|8rj>`oS8)P#iLZp&h6;2O|!|NN#hKAz)=?LrEFTKc~&Q0Zhk^O
zb20^_klPzncEc+DBTXL0vD}-@XGJ}M+ioCvDN#r+$$!<P7~%?Ov)^E~RoJrvR-U~d
z>U*KZ|43Z;Y4+3hQmvXWgZgs6yOa;HY|XNnAnp*xofamNyu$Xw+baNL(4g1qY$z)D
zQ2N9`;Z@V$@7&Sq$I=e8Fp<L1kG4HuT^<|W*GzRV!^ypD7|IeHa#<O>&)c_2E$_GF
zpAC#h3Fh$xTG8lC7*rWF1shaxyGBCVKLyY!z!=IoQgib?$pPIcMy6iX#e>*0LeLG)
z!a_NwK1!9nYgsT><WvU3LN@`U3UpANV=vB!E`d?`kJrTwo#4G%so%kAg?Yw6hXUu7
zB-sLW?Lkrb4nqTTuh@gMCo+*Z^%=9Du`rG&eJaIk!##B#NH0k!<!d!<uA<kg^r;*|
z?*N0o@XxU0EM3?usX-0Bhcf*4UiEZ-TNX5|X*YkXH~m2cZfO|e89|!QOB70q3e{=B
zYpz_DzP=dxVEFiwU?FcEqAb(r(GY|8_+~ew<76m2s}wd)3I2JrkY^Emc1dWMfMTjL
zT5qS>ni_`*;+)-V>$E*Gk1vgFuN~Iu<>auc@@9IEs{jApx@bP`h7=CRlb>u5rR}GA
zp+q6Yeb~qM1+Fo{Qp*v<=2Wz)U#mY+*<jOL<oea6N&xyy>$m{-V{SEbY6Hjl%n5yb
zyL4n!6JC;pS@^A?D$AF+`HqO?_8%kVOjI>A`;5$*u#=8T;^ldTPGJ-O7JZOHWoJP&
z*hZx7(RoN9{u{xvZhca<P?*KtBDYgCe|@FH!4iS8#@WQwM(5K4(G$p=p{MO;nWWJZ
xNG8{X)r9^#bp_(S5qoD;E(zfjy>l+`)jXt0IybfV>N7&7{!&M!T-hf4e*hm>^e+Ga

literal 0
HcmV?d00001

diff --git a/src/views/WhView.vue b/src/views/WhView.vue
index 4c049b3..c2ff15b 100644
--- a/src/views/WhView.vue
+++ b/src/views/WhView.vue
@@ -1,49 +1,57 @@
 <template>
     <div class="tyc">
-      <div class="topnav">文化</div>
-      <!-- 图形 -->
-      <div class="tyclogo">
-        <div class="tyname">文化</div>
-        <div class="tydesc">图书馆|文化馆|博物馆</div>
-      </div>
-      <!-- 总计进馆人数 -->
-      <div class="jgbox">
-        <div class="jg_title">总计进馆人数</div>
-        <div class="jgcon">
-  
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon01.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">今日进馆人数</span>
-          </div>
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon02.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">本月进馆人数</span>
-          </div>
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon03.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">本年进馆人数</span>
-          </div>                
+        <div class="topnav">文化</div>
+        <!-- 图形 -->
+        <div class="tyclogo">
+            <div class="tyname">文化</div>
+            <div class="tydesc">图书馆|文化馆|博物馆</div>
+        </div>
+        <!-- 总计进馆人数 -->
+        <div class="jgbox">
+            <div class="jg_title">总计进馆人数</div>
+            <div class="jgcon">
+
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon01.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">今日进馆人数</span>
+                </div>
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon02.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">本月进馆人数</span>
+                </div>
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon03.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">本年进馆人数</span>
+                </div>
+            </div>
+        </div>
+        <!-- 进馆人数统计 -->
+        <div class="gcins">
+            <div class="gcins_title">24小时进馆人数趋势</div>
+            <div id="gcins_charts" style="height:16rem"></div>
+        </div>
+
+        <!-- 各场馆人数趋势 -->
+        <div class="gcgrs">
+            <div class="gcgrs_title">各场馆人数趋势</div>
+            <div id="gc_charts" class="gcgrs_charts"></div>
+        </div>
+        <!-- 各场馆人数趋势 -->
+        <div class="tsgbox">
+            <div class="tsg_title">图书馆数据统计</div>
+            <div id="tsgchart" class="tsgc_charts"></div>
         </div>
-      </div>
-      <!-- 进馆人数统计 -->
-      <div class="gcins">
-        <div class="gcins_title">进馆人数统计</div>
-        <div id="gcins_charts" style="height:16rem"></div>
-      </div>
-      <!-- 人数状态 -->
-      <div class="incbox"></div>
-  
     </div>
-  </template>
-  <style scoped>
-  .tyc {
+</template>
+<style scoped>
+.tyc {
     position: relative;
-  }
-  
-  .topnav {
+}
+
+.topnav {
     height: 46px;
     line-height: 46px;
     text-align: center;
@@ -56,40 +64,43 @@
     top: 0;
     background-color: #080A25;
     margin-bottom: 30rpx;
-  }
-  
-  .tyclogo {
+}
+
+.tyclogo {
     margin-top: 1.6rem;
     background-image: url("../assets/wh_00.png");
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: 0 0;
     height: 12rem;
-  }
-  
-  .tyclogo .tyname {
+}
+
+.tyclogo .tyname {
     height: 3rem;
     line-height: 3rem;
     text-align: right;
     padding-right: 6.06rem;
     font-size: 2.02rem;
     padding-top: 4.8rem;
-  }
-  .tyclogo .tydesc{
+}
+
+.tyclogo .tydesc {
     height: 2rem;
     line-height: 2rem;
     font-size: 1.03rem;
     text-align: right;
     padding-right: 1.06rem;
     color: #999;
-  }
-  /* 总计进馆 */
-  .jgbox{
+}
+
+/* 总计进馆 */
+.jgbox {
     margin-top: 1.02rem;
     width: 100%;
     height: 12rem;
-  }
-  .jgbox .jg_title{
+}
+
+.jgbox .jg_title {
     background-image: url('../assets/ty_jg_bg.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -97,41 +108,48 @@
     padding-left: 3.2rem;
     height: 2.06rem;
     line-height: 2.06rem;
-  }
-  .jgbox .jgcon{
+}
+
+.jgbox .jgcon {
     width: 100%;
     height: 7rem;
     padding-top: 2rem;
-  }
-  .jgbox .jgcon .jgitem{
+}
+
+.jgbox .jgcon .jgitem {
     width: 30%;
     margin-left: 3%;
     float: left;
-  }
-  .jgbox .jgcon .jgitem .jgimg{
+}
+
+.jgbox .jgcon .jgitem .jgimg {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-  }
-  .jgbox .jgcon .jgitem span{
+}
+
+.jgbox .jgcon .jgitem span {
     display: block;
     text-align: center;
     height: 1.8rem;
     line-height: 1.8rem;
-  }
-  .jgbox .jgcon .jgitem .jgival{
+}
+
+.jgbox .jgcon .jgitem .jgival {
     font-size: 1.06rem;
-  }
-  .jgbox .jgcon .jgitem .jgdesc{
+}
+
+.jgbox .jgcon .jgitem .jgdesc {
     color: #666;
     font-size: 0.8rem;
-  }
-  /* 进馆人数统计 */
-  .gcins {
+}
+
+/* 24小时进馆人数趋势 */
+.gcins {
     margin-top: 1.6rem;
-  }
-  
-  .gcins .gcins_title {
+}
+
+.gcins .gcins_title {
     background-image: url("../assets/tyc_tbg.png");
     background-position: 0 0;
     background-repeat: no-repeat;
@@ -139,159 +157,520 @@
     height: 1.8rem;
     line-height: 1.8rem;
     padding-left: 2.02rem;
-  }
-  
-  /* 进馆人数 */
-  .incbox{
-    margin-top: 1.2rem;
-    background: url("../assets/tyc_bhd.png") no-repeat 0 center;
+}
+
+/* 各场馆人数趋势 */
+.gcgrs {
+    margin-top: 1.06rem;
+}
+
+.gcgrs .gcgrs_title {
+    background-image: url("../assets/wh_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    padding-left: 2.02rem;
+}
+
+.gcgrs .gcgrs_charts {
+    margin-top: 2rem;
+    width: 100%;
+    height: 17rem;
+}
+
+/* 图书馆趋势 */
+.tsgbox {
+    margin-top: 3rem;
+}
+
+.tsgbox .tsg_title {
+    background-image: url("../assets/wh_tsg_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
     background-size: 100%;
-    height: 8rem;
-  }
-  </style>
-  <script>
-  import * as echarts from 'echarts';
-  export default {
+    height: 2.2rem;
+    line-height: 2.2rem;
+    padding-left: 2.02rem;
+}
+
+.tsgbox .tsgc_charts {
+    margin-top: 2rem;
+    width: 100%;
+    height: 16rem;
+}
+</style>
+<script>
+import * as echarts from 'echarts';
+export default {
     name: 'TycView',
     data() {
-      return {
-        //
-      }
+        return {
+            //
+        }
     },
     mounted() {
-      this.cgsf_line()
+        // 24h ins k line
+        this.cgsf_line()
+        //
+        this.gc_line()
+        //
+        this.tsg_line()
     },
     methods: {
-      // 山峰图
-      cgsf_line() {
-        var chartDom = document.getElementById('gcins_charts');
-        var myChart = echarts.init(chartDom);
-        var option;
-  
-        option = {
-  
-          grid: {
-            left: '3%',
-            right: '3%',
-            bottom: '3%',
-            top: '10%',
-            containLabel: true
-          },
-          xAxis: [{
-            data: [
-              '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
-            ],
-            axisLine: {
-              lineStyle: {
-                color: '#0095FF',
-                width: 1,
-                type: 'solid',
-              },
-              show: true
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#fff'
-              }
+        // 山峰图
+        cgsf_line() {
+            var chartDom = document.getElementById('gcins_charts');
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            option = {
+
+                grid: {
+                    left: '3%',
+                    right: '3%',
+                    bottom: '3%',
+                    top: '10%',
+                    containLabel: true
+                },
+                xAxis: [{
+                    data: [
+                        '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
+                    ],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#0095FF',
+                            width: 1,
+                            type: 'solid',
+                        },
+                        show: true
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#fff'
+                        }
+                    }
+                }],
+                yAxis: [{
+                    type: 'value',
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: '#027eff'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#0095FF',
+                    }
+                }],
+                series: [{
+                    // name: '厂用电量',
+                    type: 'bar',
+                    barGap: '5%',
+                    barWidth: '10%',
+                    barCategoryGap: '60%',
+                    stack: 1,
+                    itemStyle: {
+                        normal: {
+                            barBorderRadius: [30, 30, 0, 0],
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#00feff'
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#0286ff'
+                                }
+                            ]
+                            )
+                        }
+                    },
+                    data: [
+                        14000,
+                        11000,
+                        10000,
+                        9000,
+                        8000,
+                        7000,
+                        5000,
+                        4000,
+                        3000,
+                    ],
+                    zlevel: 11
+                },
+                {
+                    // name: '厂用电量',
+                    type: 'scatter',
+                    stack: 1,
+                    xAxisIndex: 0,
+                    symbolOffset: [0, 0], //相对于原本位置的偏移量
+                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    itemStyle: {
+                        normal: {
+                            color: '#fff'
+                        }
+                    },
+                    symbolSize: 13,
+                    zlevel: 10,
+                    z: 2,
+                },
+                {
+                    name: '背景',
+                    type: 'bar',
+                    barWidth: '10%',
+                    barGap: '-100%',
+                    data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+                    itemStyle: {
+                        normal: {
+                            color: '#004298',
+                            barBorderRadius: 30,
+                        }
+                    },
+                    z: 1,
+                },
+                ]
             }
-          }],
-          yAxis: [{
-            type: 'value',
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                // 使用深浅的间隔色
-                color: '#027eff'
-              }
-            },
-            axisLabel: {
-              color: '#0095FF',
+
+            option && myChart.setOption(option);
+        },
+
+        //
+        gc_line() {
+            var chartDom = document.getElementById("gc_charts");
+            var myChart = echarts.init(chartDom);
+
+            var option
+            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
+            var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+            var name = ['图书馆', '文化馆', '博物馆']
+            var data = [
+                [137, 34, 135, 161, 74, 152, 110, 100, 150],
+                [174, 137, 135, 34, 152, 135, 140, 160, 100],
+                [134, 74, 137, 135, 161, 137, 300, 220, 250],
+            ]
+
+            var series = [];
+            for (var i = 0; i < 6; i++) {
+                series.push({
+                    name: name[i],
+                    type: "line",
+                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+                    smooth: true, //是否平滑曲线显示
+                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: color[i]
+                            }, {
+                                offset: 0.8,
+                                color: 'rgba(255,255,255,0)'
+                            }], false),
+                            // shadowColor: 'rgba(255,255,255, 0.1)',
+                            shadowBlur: 10,
+                            opacity: 0.3,
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: color[i],
+                            lineStyle: {
+                                width: 1,
+                                type: 'solid' //'dotted'虚线 'solid'实线
+                            },
+                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
+                            borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+                            barBorderRadius: 0,
+                            label: {
+                                show: false,
+                            },
+                            opacity: 0.5,
+                        }
+                    },
+                    data: data[i],
+
+                })
             }
-          }],
-          series: [{
-            // name: '厂用电量',
-            type: 'bar',
-            barGap: '5%',
-            barWidth: '10%',
-            barCategoryGap: '60%',
-            stack: 1,
-            itemStyle: {
-              normal: {
-                barBorderRadius: [30, 30, 0, 0],
-                color: new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1, [{
-                    offset: 0,
-                    color: '#00feff'
-                  },
-                  {
-                    offset: 1,
-                    color: '#0286ff'
-                  }
-                ]
-                )
-              }
+            option = {
+                // backgroundColor: "#141f56",
+                legend: {
+                    top: 0,
+                    itemGap: 15,
+                    itemWidth: 15,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14'
+                    },
+                    data: name
+                },
+                title: {
+                    // text: "负面言论分领域趋势",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '22',
+                        fontWeight: 'normal',
+                    },
+                    subtextStyle: {
+                        color: '#90979c',
+                        fontSize: '16',
+
+                    },
+                },
+                grid: {
+                    borderWidth: 0,
+                    top: 240,
+                    bottom: 240,
+                    textStyle: {
+                        color: "#fff"
+                    }
+                },
+                xAxis: [{
+                    type: "category",
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+                    axisTick: {
+                        show: false
+                    },
+                    splitArea: {
+                        show: false
+                    },
+                    axisLabel: {
+                        inside: false,
+                        textStyle: {
+                            color: '#FFFFFF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                    },
+                    data: xData,
+                }],
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#32346c ',
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#0095FF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                        formatter: '{value}',
+                    },
+                },
+                series: series,
+            }
+
+            option && myChart.setOption(option);
+        },
+        // 图书馆
+        tsg_line() {
+            var chartDom = document.getElementById("tsgchart");
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            var data = [{
+                name: '今日办证人数',
+                value: 323,
             },
-            data: [
-              14000,
-              11000,
-              10000,
-              9000,
-              8000,
-              7000,
-              5000,
-              4000,
-              3000,
-            ],
-            zlevel: 11
-          },
-          {
-            // name: '厂用电量',
-            type: 'scatter',
-            stack: 1,
-            xAxisIndex: 0,
-            symbolOffset: [0, 0], //相对于原本位置的偏移量
-            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
-            itemStyle: {
-              normal: {
-                color: '#fff'
-              }
+            {
+                name: '今日还书册数',
+                value: 209,
             },
-            symbolSize: 13,
-            zlevel: 10,
-            z: 2,
-          },
-          {
-            name: '背景',
-            type: 'bar',
-            barWidth: '10%',
-            barGap: '-100%',
-            data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
-            itemStyle: {
-              normal: {
-                color: '#004298',
-                barBorderRadius: 30,
-              }
+            {
+                name: '今日借书册数',
+                value: 323,
             },
-            z: 1,
-          },
-          ]
-        }
-  
-        option && myChart.setOption(option);
-      },
+            ];
+            var getArrByKey = (data, k) => {
+                let key = k || "value";
+                let res = [];
+                if (data) {
+                    data.forEach(function (t) {
+                        res.push(t[key]);
+                    });
+                }
+                return res;
+            };
+            var getSymbolData = (data) => {
+                let arr = [];
+                for (var i = 0; i < data.length; i++) {
+                    arr.push({
+                        value: data[i].value,
+                        symbolPosition: 'end'
+                    })
+                }
+                return arr;
+            }
+
+            console.log(getSymbolData(data));
+            option = {
+                grid: {
+                    top: '2%',
+                    bottom: -15,
+                    right: 30,
+                    left: 30,
+                    containLabel: true
+                },
+                xAxis: {
+                    show: false
+                },
+                yAxis: [{
+                    triggerEvent: true,
+                    show: true,
+                    // inverse: true,
+                    data: getArrByKey(data, 'name'),
+                    axisLine: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false,
+                        interval: 0,
+                        color: '#fff',
+                        align: 'left',
+                        margin: 80,
+                        fontSize: 12,
+                        formatter: function (value) {
+                            return '{title|' + value + '}'
+                        },
+                        rich: {
+                            title: {
+                                width: 165
+                            }
+                        }
+                    },
+                }, {
+                    triggerEvent: true,
+                    show: true,
+                    // inverse: true,
+                    data: getArrByKey(data, 'name'),
+                    axisLine: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        shadowOffsetX: '-20px',
+                        color: '#fff',
+                        align: 'right',
+                        verticalAlign: 'bottom',
+                        lineHeight: 30,
+                        fontSize: 16,
+                        formatter: function (value, index) {
+                            return data[index].value + ' 册 '
+                        },
+                    }
+                }],
+                series: [{
+                    name: 'XXX',
+                    type: 'pictorialBar',
+                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+                    symbolSize: [50, 50],
+                    symbolOffset: [20, 0],
+                    z: 12,
+                    itemStyle: {
+                        normal: {
+                            color: '#14b1eb'
+                        }
+                    },
+                    data: getSymbolData(data)
+                }, {
+                    name: '条',
+                    type: 'bar',
+                    showBackground: true,
+                    barBorderRadius: 30,
+                    yAxisIndex: 0,
+                    data: data,
+                    barWidth: 10,
+                    // align: left,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [{
+                                    offset: 0,
+                                    color: '#A71A2B'
+                                },
+                                {
+                                    offset: 0.7,
+                                    color: '#A71A2B'
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5EDEE5'
+                                }
+                                ],
+
+                                false
+                            ),
+                            barBorderRadius: 10
+                        },
+                        // color: '#A71A2B',
+                        barBorderRadius: 4,
+                    },
+                    label: {
+                        normal: {
+                            color: '#fff',
+                            show: true,
+                            position: [0, '-20px'],
+                            textStyle: {
+                                fontSize: 16
+                            },
+                            formatter: function (a) {
+                                return a.name
+                            }
+                        }
+                    }
+                }]
+            };
+
+            option && myChart.setOption(option);
+        },
     },
-  }
-  </script>
\ No newline at end of file
+}
+</script>
\ No newline at end of file