Skip to content

R
report-html-template
Commit 0973f865 by Tippi.Rao
Options

Merge branch 'main' of http://47.108.78.218:28999/frontend/report-html-template

parents b25f18a2 e3d1f2c8
正在显示 包含 1333 行增加 和 301 行删除
energy-report/assets/no-1.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_19861_77859"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath><clipPath id="master_svg1_19861_77859/0_66264"><rect x="9.36669921875" y="-11.5703125" width="43.45343017578125" height="43.45343017578125" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_19861_77859)"><g transform="matrix(0.876246452331543,0.48186323046684265,-0.4818631410598755,0.8762465119361877,-4.416144866030663,-5.945334474221454)" clip-path="url(#master_svg1_19861_77859/0_66264)"><g><path d="M26.00214984375,7.1143C26.00214984375,7.1143,19.72176984375,4.008050000000001,19.72176984375,4.008050000000001C19.03007984375,3.66432,18.42750384375,4.01229,18.37658184375,4.784610000000001C18.37658184375,4.784610000000001,17.92677050375,11.777899999999999,17.92677050375,11.777899999999999C17.87584854375,12.5502,18.39779884375,13.4541,19.09372984375,13.797799999999999C19.09372984375,13.797799999999999,25.36986984375,16.904,25.36986984375,16.904C26.06155984375,17.2478,26.66837984375,16.8998,26.715059843749998,16.1275C26.715059843749998,16.1275,27.164869843749997,9.1342,27.164869843749997,9.1342C27.22003984375,8.3619,26.69383984375,7.458,26.00214984375,7.1143C26.00214984375,7.1143,26.00214984375,7.1143,26.00214984375,7.1143ZM40.400339843750004,-1.1987299999999999C40.400339843750004,-1.1987299999999999,34.119939843750004,-4.304966,34.119939843750004,-4.304966C33.42823984375,-4.64869,32.82143984375,-4.300723,32.77473984375,-3.528406C32.77473984375,-3.528406,32.32493984375,3.4606399999999997,32.32493984375,3.4606399999999997C32.27403984375,4.232950000000001,32.79603984375,5.13682,33.49193984375,5.4805399999999995C33.49193984375,5.4805399999999995,39.772339843750004,8.5868,39.772339843750004,8.5868C40.46403984375,8.9305,41.07083984375,8.5825,41.117539843749995,7.8102C41.117539843749995,7.8102,41.56733984375,0.8169399999999998,41.56733984375,0.8169399999999998C41.61393984375,0.04886000000000035,41.09623984375,-0.855,40.400339843750004,-1.1987299999999999C40.400339843750004,-1.1987299999999999,40.400339843750004,-1.1987299999999999,40.400339843750004,-1.1987299999999999Z" fill="#FEAE30" fill-opacity="1"/></g><g><path d="M33.12547359375,19.21439125C33.367353593749996,19.63450125,33.82989359375,19.698151250000002,34.27122359375,19.44354125C34.27122359375,19.44354125,37.74664359375,17.43212125,37.74664359375,17.43212125C38.08612359375,17.23692125,38.20494359375,16.81257125,38.01398359375,16.47309125C37.81878359375,16.13361125,37.38594359375,16.01903125,37.04646359375,16.20999125C37.04646359375,16.20999125,34.81438359375,17.50001125,34.81438359375,17.50001125C34.81438359375,17.50001125,35.39150359375,16.091171250000002,35.39150359375,16.091171250000002C36.01954359375,14.555031249999999,36.26142359375,13.710571250000001,35.64187359375,12.63697125C35.64187359375,12.63697125,35.63338359375,12.61999125,35.63338359375,12.61999125C34.94169359375,11.42332585,33.61347359375,11.15174225,32.28526359375,11.91981525C31.31349859375,12.47995725,30.91461059375,13.17589125,30.74487029375,14.06702125C30.71092229375,14.245251249999999,30.74487059375,14.44894125,30.83398359375,14.59746125C31.04191559375,14.95391125,31.49172759375,15.07273125,31.843933593750002,14.86905125C32.06460359375,14.74174125,32.17068359375,14.54654125,32.20039359375,14.39377125C32.33194359375,13.80393125,32.51865359375,13.46869125,32.92178359375,13.23106125C33.42676359375,12.94250125,33.94871359375,13.02737125,34.26273359375,13.566291249999999C34.56826359375,14.09673125,34.46642359375,14.63565125,34.04207359375,15.747451250000001C34.04207359375,15.747451250000001,33.08304359375,18.29355125,33.08304359375,18.29355125C32.95997359375,18.62879125,32.96846359375,18.94281125,33.12547359375,19.21439125Z" fill="#E5E5E5" fill-opacity="1"/></g><g><path d="M47.59862734375,9.95678125C48.04422734375,10.996481249999999,47.85752734375,12.17608125,47.18272734375,13.050281250000001C45.61692734375,14.95138125,42.15422734375,17.65448125,37.79612734375,20.22608125C33.53562734375,22.73398125,29.58922734375,24.42288125,27.18312734375,24.90238125C26.06282734375,25.08488125,24.90442734375,24.65198125,24.20422734375,23.72268125C24.21692734375,23.73968125,24.22122734375,23.76508125,24.23812734375,23.78208125C24.23812734375,23.78208125,14.04527934375,10.59328125,14.04527934375,10.59328125C14.04952234375,10.580581250000002,14.07074034375,10.584781249999999,14.05376634375,10.55088125C13.76520834375,10.05438125,13.94343494375,9.41358125,14.44841134375,9.12508125C14.63936834375,9.01048125,14.85578734375,8.98928125,15.06371734375,9.00628125C15.06371734375,9.00628125,24.50552734375,10.953981249999998,24.50552734375,10.953981249999998C24.50552734375,10.953981249999998,23.81381734375,-1.53461875,23.81381734375,-1.53461875C23.79683734375,-2.05656875,24.064227343749998,-2.57426875,24.556427343750002,-2.85434875C25.01472734375,-3.12168875,25.55362734375,-3.09197875,25.98222734375,-2.86282875C25.98222734375,-2.86282875,36.51032734375,4.020121250000001,36.51032734375,4.020121250000001C36.51032734375,4.020121250000001,39.485027343750005,-4.95912075,39.485027343750005,-4.95912075C39.48932734375,-4.95912075,39.49352734375,-4.92517275,39.49352734375,-4.93790275C39.56572734375,-5.18826975,39.735427343750004,-5.41317475,39.98152734375,-5.55745375C40.48652734375,-5.84601175,41.123027343749996,-5.68051545,41.41162734375,-5.18402575C41.42432734375,-5.15856475,41.42862734375,-5.17978275,41.44552734375,-5.17553875C41.44552734375,-5.17553875,47.72592734375,10.15198125,47.72592734375,10.15198125C47.68352734375,10.08408125,47.63262734375,10.03738125,47.59862734375,9.95678125C47.59862734375,9.95678125,47.59862734375,9.95678125,47.59862734375,9.95678125Z" fill="#FED530" fill-opacity="1"/></g><g><path d="M30.03787171875,6.51762925C32.82160171875,4.91358625,36.37766171875,5.86412925,37.990211718750004,8.64786125C39.59421171875,11.43160125,38.64371171875,14.98765125,35.85995171875,16.60018125C33.07621171875,18.204181249999998,29.52016171875,17.25368125,27.90763071875,14.46994125C26.29510071875,11.68621125,27.25413171875,8.13016125,30.03787171875,6.51762925C30.03787171875,6.51762925,30.03787171875,6.51762925,30.03787171875,6.51762925Z" fill="#FEAE30" fill-opacity="1"/></g><g><path d="M34.15198359375,14.15223875C34.41084359375,14.60204875,34.98371359375,14.754808749999999,35.43352359375,14.49595875C35.88333359375,14.23710875,36.03610359375,13.66422875,35.777253593750004,13.21441875C35.777253593750004,13.21441875,33.13354359375,8.85634875,33.13354359375,8.85634875C32.87469359375,8.40653805,32.30182359375,8.25377175,31.85201359375,8.51262475C31.85201359375,8.51262475,31.83079359375,8.52535675,31.83079359375,8.52535675C31.60589359375,8.65266175,31.40220359375,8.84361775,31.14334359375,9.10671475C31.14334359375,9.10671475,30.26494259375,10.02755875,30.26494259375,10.02755875C29.98911519375,10.31610875,29.93394919375,10.71499875,30.12915059375,11.045998749999999C30.34981259375,11.43214875,30.86752059375,11.559458750000001,31.24943359375,11.33454875C31.33855359375,11.28362875,31.43615359375,11.19875875,31.51253359375,11.12237875C31.51253359375,11.12237875,32.00477359375,10.63861875,32.00477359375,10.63861875C32.00477359375,10.63861875,34.15198359375,14.15223875,34.15198359375,14.15223875Z" fill="#FED530" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
energy-report/assets/no-2.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_19861_77882"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath><clipPath id="master_svg1_19861_77882/0_66270"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath><clipPath id="master_svg2_19861_77882/0_66271"><rect x="9" y="-12.85546875" width="45.039512634277344" height="45.039512634277344" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_19861_77882)"><g transform="matrix(1,2.607103866125726e-9,-2.607103866125726e-9,1,0,0)" clip-path="url(#master_svg1_19861_77882/0_66270)"><g transform="matrix(0.8746196627616882,0.48480960726737976,-0.48480960726737976,0.8746196627616882,-5.1040317207807675,-5.975109472637996)" clip-path="url(#master_svg2_19861_77882/0_66271)"><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,8.881784197001252e-16)"><path d="M26.23697125,6.50855625C26.23697125,6.50855625,19.727351249999998,3.2889762499999993,19.727351249999998,3.2889762499999993C19.01042125,2.9327062500000007,18.38584725,3.29336625,18.33306625,4.093876249999999C18.33306625,4.093876249999999,17.86683713,11.342456250000001,17.86683713,11.342456250000001C17.81405645,12.142956250000001,18.35505825,13.079756249999999,19.07639125,13.43605625C19.07639125,13.43605625,25.58161125,16.65565625,25.58161125,16.65565625C26.29855125,17.01195625,26.927521249999998,16.65125625,26.97590125,15.85075625C26.97590125,15.85075625,27.44213125,8.60225625,27.44213125,8.60225625C27.499311249999998,7.80175625,26.95391125,6.864856250000001,26.23697125,6.50855625C26.23697125,6.50855625,26.23697125,6.50855625,26.23697125,6.50855625ZM41.160681249999996,-2.10785375C41.160681249999996,-2.10785375,34.651081250000004,-5.32747275,34.651081250000004,-5.32747275C33.93418125,-5.68374175,33.305181250000004,-5.32307375,33.25678125,-4.52256675C33.25678125,-4.52256675,32.79058125,2.72157625,32.79058125,2.72157625C32.73778125,3.522086249999999,33.27878125,4.45894625,34.00008125,4.815256249999999C34.00008125,4.815256249999999,40.50978125,8.03485625,40.50978125,8.03485625C41.22668125,8.39105625,41.85568125,8.03045625,41.904081250000004,7.229956250000001C41.904081250000004,7.229956250000001,42.36588125,-0.014213749999999692,42.36588125,-0.014213749999999692C42.41868125,-0.8147237499999997,41.88208125,-1.75158375,41.160681249999996,-2.10785375C41.160681249999996,-2.10785375,41.160681249999996,-2.10785375,41.160681249999996,-2.10785375Z" fill="#C6C6C6" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M33.627394375,19.054994999999998C33.878094375,19.490434999999998,34.357524375,19.556404999999998,34.814954375,19.292505C34.814954375,19.292505,38.417234375,17.207665,38.417234375,17.207665C38.769104375,17.005345,38.892254375,16.565505,38.694334375,16.213635C38.492004375,15.861754999999999,38.043374375,15.743005,37.691504375,15.940925C37.691504375,15.940925,35.377944375,17.278045,35.377944375,17.278045C35.377944375,17.278045,35.976124375,15.817775000000001,35.976124375,15.817775000000001C36.627094375,14.225555,36.877804375,13.350285,36.235634375000004,12.237485C36.235634375000004,12.237485,36.226834375,12.219895,36.226834375,12.219895C35.509904375,10.9795487,34.133204375,10.698052,32.756504375,11.49416C31.749276375,12.074745,31.335828375,12.796085,31.159893275,13.719745C31.124706175,13.904475,31.159893575,14.115594999999999,31.252259375,14.269545C31.467780375,14.639005000000001,31.934010375,14.762165,32.299074375000004,14.551045C32.527794375,14.419084999999999,32.637754375,14.216765,32.668544375,14.058425C32.804894375,13.447045,32.998414375,13.099575,33.416264375,12.853265C33.939674375,12.554175,34.480674375,12.642135,34.806154375,13.200735C35.122844375,13.750535,35.017284375,14.309125,34.577444375,15.461504999999999C34.577444375,15.461504999999999,33.583404375,18.100545,33.583404375,18.100545C33.455854375,18.448014999999998,33.464654375,18.773495,33.627394375,19.054994999999998Z" fill="#E8E8E8" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,8.881784197001252e-16)"><path d="M48.625490625,9.44625C49.087290625,10.52385,48.893790625,11.74655,48.194390625,12.652650000000001C46.571390625,14.623149999999999,42.982290625000005,17.42485,38.465190625000005,20.09025C34.049190625,22.68975,29.958690625,24.44035,27.464790625,24.93735C26.303590625,25.12645,25.102890625,24.67785,24.377090625,23.71455C24.390290625,23.73215,24.394690625000003,23.75855,24.412290625,23.77615C24.412290625,23.77615,13.847378625,10.10595,13.847378625,10.10595C13.851776625,10.092749999999999,13.873768625,10.09715,13.856175625,10.06195C13.557084625,9.547350000000002,13.741816825,8.88325,14.265224625,8.58415C14.463152625,8.46535,14.687470625,8.44335,14.902990625,8.46095C14.902990625,8.46095,24.689390625,10.479849999999999,24.689390625,10.479849999999999C24.689390625,10.479849999999999,23.972490625,-2.46464,23.972490625,-2.46464C23.954890625,-3.00564,24.231990625,-3.54224,24.742190625,-3.83254C25.217190625,-4.10963,25.775790625,-4.07885,26.220090624999997,-3.84133C26.220090624999997,-3.84133,37.132490625,3.2928499999999996,37.132490625,3.2928499999999996C37.132490625,3.2928499999999996,40.215690625,-6.014138,40.215690625,-6.014138C40.220090625,-6.014138,40.224490625,-5.978951,40.224490625,-5.992146C40.299290625,-6.251651,40.475190624999996,-6.484766,40.730290624999995,-6.634311C41.253790625,-6.933401,41.913490625,-6.761864,42.212590625000004,-6.247252C42.225790625,-6.220862,42.230190625,-6.242854,42.247790625,-6.238456C42.247790625,-6.238456,48.757390625,9.64855,48.757390625,9.64855C48.713390625,9.57815,48.660590625,9.52975,48.625490625,9.44625C48.625490625,9.44625,48.625490625,9.44625,48.625490625,9.44625Z" fill="#E8E8E8" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M30.42204375,5.88982525C33.30738375,4.22723425,36.99323375,5.21247325,38.664643749999996,8.09781125C40.32724375,10.98316125,39.34194375,14.66901125,36.45663375,16.34043125C33.57128375,18.00303125,29.88543375,17.01773125,28.21404675,14.13240125C26.54265875,11.24706125,27.53669575,7.5612112499999995,30.42204375,5.88982525C30.42204375,5.88982525,30.42204375,5.88982525,30.42204375,5.88982525Z" fill="#C6C6C6" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M32.670881875,14.73139875C32.908391875,15.140448750000001,33.361421875,15.20202875,33.788071875,14.955718749999999C33.788071875,14.955718749999999,37.183621875,12.99843875,37.183621875,12.99843875C37.517901875,12.80930875,37.632261875,12.39585875,37.438731875,12.061578749999999C37.249601874999996,11.72729875,36.827351875,11.61733875,36.493071875,11.810868750000001C36.493071875,11.810868750000001,34.311481875,13.068808749999999,34.311481875,13.068808749999999C34.311481875,13.068808749999999,34.878871875,11.69651875,34.878871875,11.69651875C35.490241875,10.19666875,35.732151875,9.36976875,35.125181875,8.32294875C35.125181875,8.32294875,35.116381875,8.30535875,35.116381875,8.30535875C34.439031875,7.13538495,33.141501875,6.87148175,31.848381875,7.61920775C30.902725875,8.16460775,30.506870875,8.84635875,30.339732575,9.71723875C30.304545475,9.88877875,30.339732275,10.08669875,30.423301675,10.24064875C30.621228875,10.58811875,31.061067875,10.70687875,31.412941875,10.50894875C31.628461875,10.38579875,31.729621875,10.196658750000001,31.764811875,10.04271875C31.896761875,9.46652875,32.072691875,9.136648749999999,32.468551875,8.91232875C32.956771875,8.62643875,33.471381875,8.71440875,33.774871875,9.24220875C34.073961875,9.76121875,33.968401875,10.28462875,33.559351875,11.36663875C33.559351875,11.36663875,32.626891875,13.842928749999999,32.626891875,13.842928749999999C32.508141875,14.15520875,32.512531875,14.45869875,32.670881875,14.73139875Z" fill="#E8E8E8" fill-opacity="1"/></g></g></g></g></svg>
\ No newline at end of file
energy-report/assets/no-3.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_19861_77901"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath><clipPath id="master_svg1_19861_77901/0_66277"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath><clipPath id="master_svg2_19861_77901/0_66278"><rect x="8.9775390625" y="-12.85546875" width="45.03792953491211" height="45.03792953491211" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_19861_77901)"><g transform="matrix(1,2.607103866125726e-9,-2.607103866125726e-9,1,0,0)" clip-path="url(#master_svg1_19861_77901/0_66277)"><g transform="matrix(0.874619722366333,0.48480960726737976,-0.48480960726737976,0.874619722366333,-5.106848415802233,-5.964219428104116)" clip-path="url(#master_svg2_19861_77901/0_66278)"><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,8.881784197001252e-16)"><path d="M26.2181265625,6.465187500000001C26.2181265625,6.465187500000001,19.7087365625,3.2456975000000003,19.7087365625,3.2456975000000003C18.991826562500002,2.8894374999999997,18.3672745625,3.2500975000000007,18.3144955625,4.050577499999999C18.3144955625,4.050577499999999,17.8482823125,11.2988875,17.8482823125,11.2988875C17.7955034625,12.099387499999999,18.3364865625,13.0361875,19.057796562500002,13.392387500000002C19.057796562500002,13.392387500000002,25.5627865625,16.6118875,25.5627865625,16.6118875C26.2796965625,16.9681875,26.9086465625,16.6075875,26.957026562499998,15.807087500000002C26.957026562499998,15.807087500000002,27.4232365625,8.5587875,27.4232365625,8.5587875C27.4804165625,7.7582875,26.935036562500002,6.8214875,26.2181265625,6.465187500000001C26.2181265625,6.465187500000001,26.2181265625,6.465187500000001,26.2181265625,6.465187500000001ZM41.1413265625,-2.1509425C41.1413265625,-2.1509425,34.6319265625,-5.3704465,34.6319265625,-5.3704465C33.9150265625,-5.7267035,33.2861265625,-5.3660475,33.2377265625,-4.5655685C33.2377265625,-4.5655685,32.7715265625,2.6783275,32.7715265625,2.6783275C32.7187265625,3.4788075000000003,33.2597265625,4.415627499999999,33.9810265625,4.7718875C33.9810265625,4.7718875,40.490426562500005,7.9913875,40.490426562500005,7.9913875C41.2073265625,8.3476875,41.8362265625,7.9869875,41.8846265625,7.1864875C41.8846265625,7.1864875,42.3464265625,-0.057372499999999604,42.3464265625,-0.057372499999999604C42.399226562500004,-0.8578524999999999,41.8626265625,-1.7946825,41.1413265625,-2.1509425C41.1413265625,-2.1509425,41.1413265625,-2.1509425,41.1413265625,-2.1509425Z" fill="#AA733D" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M33.6048434375,19.00784C33.8555434375,19.443260000000002,34.3349534375,19.50924,34.7923634375,19.24534C34.7923634375,19.24534,38.3945234375,17.16058,38.3945234375,17.16058C38.7463834375,16.95826,38.8695334375,16.51844,38.671603437499996,16.16658C38.4692934375,15.814720000000001,38.0206734375,15.69596,37.6688134375,15.893889999999999C37.6688134375,15.893889999999999,35.3553434375,17.23095,35.3553434375,17.23095C35.3553434375,17.23095,35.953503437500004,15.77074,35.953503437500004,15.77074C36.6044334375,14.17857,36.8551434375,13.303329999999999,36.2129934375,12.19057C36.2129934375,12.19057,36.2042034375,12.172979999999999,36.2042034375,12.172979999999999C35.4872834375,10.932676,34.1106334375,10.651189,32.7339934375,11.44727C31.7267944375,12.02784,31.3133614375,12.74915,31.1374318375,13.67278C31.1022460375,13.8575,31.1374321375,14.06862,31.2297954375,14.22256C31.4453084375,14.59201,31.9115224375,14.715160000000001,32.2765734375,14.50404C32.5052834375,14.3721,32.6152334375,14.16978,32.6460234375,14.01144C32.7823734375,13.40009,32.9758934375,13.05263,33.3937234375,12.806329999999999C33.9171134375,12.507249999999999,34.4581034375,12.59521,34.7835734375,13.15378C35.1002434375,13.70356,34.9946834375,14.26214,34.5548634375,15.414480000000001C34.5548634375,15.414480000000001,33.560863437500004,18.05342,33.560863437500004,18.05342C33.4333134375,18.40088,33.4421134375,18.72635,33.6048434375,19.00784Z" fill="#E5E5E5" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,8.881784197001252e-16)"><path d="M48.6017296875,9.39486875C49.0635296875,10.47246875,48.8700296875,11.69516875,48.1707296875,12.60116875C46.5478296875,14.57156875,42.9588296875,17.37326875,38.441829687500004,20.03856875C34.0260296875,22.63796875,29.9356296875,24.38846875,27.4418296875,24.88546875C26.2807296875,25.07456875,25.0800296875,24.62596875,24.354329687499998,23.66276875C24.3675296875,23.68036875,24.3719296875,23.70666875,24.389429687499998,23.72426875C24.389429687499998,23.72426875,13.8249126875,10.054568750000001,13.8249126875,10.054568750000001C13.8293106875,10.04136875,13.8513016875,10.04576875,13.8337096875,10.010568750000001C13.5346286875,9.49596875,13.7193548875,8.83186875,14.2427446875,8.53276875C14.4406656875,8.41406875,14.6649756875,8.39206875,14.880489687499999,8.40966875C14.880489687499999,8.40966875,24.666529687500002,10.42846875,24.666529687500002,10.42846875C24.666529687500002,10.42846875,23.9496296875,-2.51557125,23.9496296875,-2.51557125C23.9320296875,-3.05655125,24.209129687500003,-3.59314125,24.7193296875,-3.88342125C25.1943296875,-4.16051125,25.7529296875,-4.129721249999999,26.197129687500002,-3.89222125C26.197129687500002,-3.89222125,37.1091296875,3.2417687500000003,37.1091296875,3.2417687500000003C37.1091296875,3.2417687500000003,40.1923296875,-6.06494525,40.1923296875,-6.06494525C40.196729687499996,-6.06494525,40.2011296875,-6.02976025,40.2011296875,-6.04295425C40.275929687499996,-6.30245025,40.451829687499995,-6.53555725,40.7069296875,-6.68509725C41.2303296875,-6.98417725,41.890029687500004,-6.81264585,42.1891296875,-6.29805225C42.2023296875,-6.27166325,42.2067296875,-6.29365425,42.2243296875,-6.28925625C42.2243296875,-6.28925625,48.7337296875,9.597168750000002,48.7337296875,9.597168750000002C48.6897296875,9.526768749999999,48.6369296875,9.478468750000001,48.6017296875,9.39486875C48.6017296875,9.39486875,48.6017296875,9.39486875,48.6017296875,9.39486875Z" fill="#CA9561" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M30.4014259375,5.84292225C33.2866659375,4.18038925,36.9723859375,5.16559325,38.6437359375,8.05083625C40.3062359375,10.93607625,39.3210359375,14.62179625,36.4358059375,16.29315625C33.5505659375,17.95565625,29.8648359375,16.970456249999998,28.1935109375,14.08521625C26.5221809375,11.199976249999999,27.516182937499998,7.51425625,30.4014259375,5.84292225C30.4014259375,5.84292225,30.4014259375,5.84292225,30.4014259375,5.84292225Z" fill="#AA733D" fill-opacity="1"/></g><g transform="matrix(1,-6.476300756398583e-17,6.476300756398583e-17,1,0,1.7763568394002505e-15)"><path d="M35.3716753125,14.38191875C36.6955453125,13.61662875,37.0298153125,12.327948750000001,36.3876753125,11.20638875C36.3876753125,11.20638875,36.3788753125,11.18879875,36.3788753125,11.18879875C35.7411353125,10.084848749999999,34.7119453125,10.12002875,33.823505312500004,10.44549875C33.823505312500004,10.44549875,34.3424953125,8.66421875,34.3424953125,8.66421875C34.4480553125,8.29916075,34.5008253125,8.03086975,34.3073053125,7.70979775C34.1049853125,7.35354095,33.6959553125,7.29636425,33.3133053125,7.51627575C33.3133053125,7.51627575,30.4280633125,9.19639875,30.4280633125,9.19639875C30.1245846125,9.37232875,30.0146276125,9.77256875,30.1905570125,10.08044875C30.3664863125,10.383928749999999,30.7667263125,10.49387875,31.0746023125,10.31794875C31.0746023125,10.31794875,32.8954753125,9.26676875,32.8954753125,9.26676875C32.8954753125,9.26676875,32.4204653125,11.08763875,32.4204653125,11.08763875C32.3368953125,11.40431875,32.3456953125,11.60663875,32.4468553125,11.78256875C32.6227853125,12.08603875,33.0230253125,12.195998750000001,33.3308953125,12.02006875C33.3308953125,12.02006875,33.5332153125,11.90131875,33.5332153125,11.90131875C34.2589253125,11.479088749999999,34.848285312499996,11.50107875,35.1297753125,11.98487875C35.1297753125,11.98487875,35.1385753125,12.00247875,35.1385753125,12.00247875C35.3936653125,12.44669875,35.2045453125,12.926108750000001,34.716345312499996,13.20758875C34.2501253125,13.48027875,33.8103053125,13.53305875,33.3001053125,13.436298749999999C33.1461753125,13.41430875,32.9746453125,13.40990875,32.7899153125,13.51546875C32.4512553125,13.70898875,32.3280953125,14.16640875,32.5216253125,14.50506875C32.6315753125,14.68979875,32.8338953125,14.80854875,33.0098253125,14.84373875C33.7355353125,14.97567875,34.5272153125,14.87012875,35.3716753125,14.38191875C35.3716753125,14.38191875,35.3716753125,14.38191875,35.3716753125,14.38191875Z" fill="#CA9561" fill-opacity="1"/></g></g></g></g></svg>
\ No newline at end of file
energy-report/assets/yd.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="34" viewBox="0 0 26 34"><g><path d="M16.9031,0.152465C15.9999,-0.199231,14.9767,0.0708806,14.3558,0.824935L0.441621,18.1845C-0.0575011,18.7944,-0.14133,19.6518,0.229928,20.3496C0.621826,21.0683,1.37413,21.5077,2.18242,21.4935L7.85446,21.4935L7.85446,31.9328C7.8737,32.8507,8.48255,33.646,9.35207,33.8897C9.57426,33.9608,9.80696,33.9964,10.0396,34C10.7167,34.0035,11.3606,33.6958,11.7892,33.1603L25.5704,15.484C26.0673,14.8613,26.1355,14.0252,25.7628,13.3314C25.3919,12.6287,24.6449,12.1982,23.8173,12.1982L17.1043,12.1982L18.2643,2.2944C18.3745,1.36041,17.8251,0.497596,16.9031,0.152465Z" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
energy-report/index.css
...@@ -53,6 +53,7 @@ body { ...@@ -53,6 +53,7 @@ body {
} }
} }
.flex { .flex {
display: flex; display: flex;
} }
...@@ -62,8 +63,8 @@ body { ...@@ -62,8 +63,8 @@ body {
} }
.header { .header {
height: 6vh; height: 11vh;
width: 60vw; width: 65vw;
max-width: 766px; max-width: 766px;
background: url('./assets/top-bg.png') no-repeat; background: url('./assets/top-bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -72,10 +73,11 @@ body { ...@@ -72,10 +73,11 @@ body {
right: 0; right: 0;
margin: auto; margin: auto;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 30px; font-size: 24px;
padding-bottom: 10px; padding-bottom: 10px;
} }
...@@ -136,12 +138,22 @@ body { ...@@ -136,12 +138,22 @@ body {
flex: 2; flex: 2;
} }
.echarts-box1#distribution-charts { @media screen and (min-width: 769px){
#distribution-charts {
height: 380px; height: 380px;
flex: 2; flex: 2;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
margin-right: 30px; margin-right: 30px;
}
}
@media screen and (max-width: 768px){
#distribution-charts {
height: 380px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
} }
.right { .right {
...@@ -175,6 +187,12 @@ body { ...@@ -175,6 +187,12 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
.top-15-wrap > .items .index img {
width: 22px;
height: 18px;
margin-top: 3px;
}
.top-15-wrap > .items .company-name { .top-15-wrap > .items .company-name {
margin: 0 20px 0 10px; margin: 0 20px 0 10px;
width: 300px; width: 300px;
...@@ -213,37 +231,37 @@ body { ...@@ -213,37 +231,37 @@ body {
/* font-size: 14px; */ /* font-size: 14px; */
} }
.distribution-wrap { @media screen and (min-width: 769px) {
.distribution-wrap {
display: flex; display: flex;
} }
.distribution-right {
.distribution-right {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.distribution-right-top { .distribution-right-top {
} }
#slide { #slide {
position: absolute; position: absolute;
height: 270px; height: 270px;
overflow: hidden; overflow: hidden;
margin-bottom: 21px; margin-bottom: 21px;
width: 100%; width: 100%;
} }
.distribution-right-bottom { .distribution-right-bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.distribution-right-top-list { .distribution-right-top-list {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 12px; padding: 12px;
display: flex; display: flex;
...@@ -253,29 +271,103 @@ body { ...@@ -253,29 +271,103 @@ body {
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 4px; margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600;
}
} }
.distribution-right-top-two { @media screen and (max-width: 768px) {
.distribution-wrap {
display: flex;
flex-direction: column;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right-top {
}
#slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
.distribution-right-bottom {
margin-top: 290px;
}
::-webkit-scrollbar {
display: none;
}
.distribution-right-top-list {
background: rgba(255, 255, 255, 0.1);
padding: 12px;
display: flex;
justify-content: space-between;
font-size: 18px;
font-family: PingFang TC-Regular, PingFang TC;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600; font-weight: 600;
}
} }
.production-portrait { @media screen and (min-width: 769px) {
.production-portrait {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
} }
.production-portrait-bottom { @media screen and (max-width: 768px) {
.production-portrait {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 769px) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 10px 0 25px 55px; padding: 10px 0 25px 55px;
margin-top:30px; margin-top: 30px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
}
} }
.production-portrait > div { @media screen and (max-width: 768px) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 20px;
margin-top: 10px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px); width: calc(100% / 2 - 10px);
height: 300px; height: 380px;
display: inline-flex; display: inline-flex;
}
} }
.popup { .popup {
position: relative; position: relative;
display: flex; display: flex;
...@@ -298,6 +390,17 @@ body { ...@@ -298,6 +390,17 @@ body {
box-sizing: border-box; box-sizing: border-box;
white-space: wrap; white-space: wrap;
text-align: center; text-align: center;
margin-top: 30px;
}
.popup > p {
position: absolute;
top: 30px;
left: 30px;
ont-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
} }
.popup > span:nth-of-type(1) { .popup > span:nth-of-type(1) {
...@@ -325,6 +428,7 @@ body { ...@@ -325,6 +428,7 @@ body {
position: relative; position: relative;
width: 110px; width: 110px;
height: 110px; height: 110px;
margin-top: 30px;
} }
.popup > div:nth-of-type(1) > span { .popup > div:nth-of-type(1) > span {
...@@ -445,9 +549,11 @@ body { ...@@ -445,9 +549,11 @@ body {
.echarts-title-repair-left { .echarts-title-repair-left {
margin-right: 3%; margin-right: 3%;
} }
.echarts-title-repair-all{
.echarts-title-repair-all {
margin-top: 20px; margin-top: 20px;
} }
.echarts-title-repair-list { .echarts-title-repair-list {
display: flex; display: flex;
margin-top: 13px; margin-top: 13px;
...@@ -499,7 +605,7 @@ body { ...@@ -499,7 +605,7 @@ body {
.chart-desc-task-two { .chart-desc-task-two {
position: relative; position: relative;
display: flex; display: flex;
width: 85%; width: 90%;
margin-top: 15px; margin-top: 15px;
} }
...@@ -508,9 +614,15 @@ body { ...@@ -508,9 +614,15 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
top: 10px; top: 10px;
height: 30px; width: 100%
width:300px;
}
@media screen and (min-width: 1650px) {
.chart-desc-task-two img {
top: 2%;
} }
}
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
...@@ -540,7 +652,7 @@ body { ...@@ -540,7 +652,7 @@ body {
.chart-desc-text-left { .chart-desc-text-left {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 280px; width: 85%;
} }
.chart-desc-value-two { .chart-desc-value-two {
...@@ -600,6 +712,7 @@ body { ...@@ -600,6 +712,7 @@ body {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
} }
.electricity-content-title { .electricity-content-title {
font-size: 18px; font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
...@@ -633,11 +746,25 @@ body { ...@@ -633,11 +746,25 @@ body {
border: 2px solid #5cb3ff; border: 2px solid #5cb3ff;
} }
.chart-desc-centerPro-icon2 {
width: 8px;
height: 8px;
background: rgba(63, 241, 217, 0.302);
border: 1px solid #3ff1d9;
}
.chart-desc-centerPro-icon3 {
width: 8px;
height: 8px;
background: rgba(255, 100, 100, 0.302);
border: 1px solid #ff6464;
}
.echarts-box1-right { .echarts-box1-right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-right: 50px;; padding-right: 70px;;
flex: 1; flex: 1;
} }
...@@ -647,6 +774,7 @@ body { ...@@ -647,6 +774,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.invest-wrapper-content1 { .invest-wrapper-content1 {
height: 108px; height: 108px;
...@@ -667,9 +795,11 @@ body { ...@@ -667,9 +795,11 @@ body {
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
height: 68px; height: 68px;
} }
.invest-wrapper-left-bracket1 img { .invest-wrapper-left-bracket1 img {
height: 108px; height: 108px;
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #c8565b; color: #c8565b;
} }
...@@ -681,46 +811,90 @@ body { ...@@ -681,46 +811,90 @@ body {
margin: 27px 0 37px; margin: 27px 0 37px;
} }
.centerPro { @media screen and (min-width: 769px) {
.centerPro {
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
} }
.centerPro-left {
.centerPro-left {
flex: 2; flex: 2;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
margin-right: 30px; margin-right: 30px;
height: 304px; height: 354px;
} }
#repair-require6 { .centerPro-right {
height: 304px; flex: 1;
margin-top: -5px background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
} }
.centerPro-right { @media screen and (max-width: 768px) {
flex: 1; .centerPro {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.centerPro-left {
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
}
.centerPro-right {
margin-top: 10px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
}
#repair-require6 {
height: 304px; height: 304px;
margin-top: -5px
} }
#repair-require7 { #repair-require7 {
height: 200px; height: 200px;
margin-top: -10px; margin-top: -10px;
background: url('./assets/yd.svg') no-repeat;
background-position: 50%;
}
.centerPro-total {
font-size: 30px;
font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
font-weight: 400;
color: #FFFFFF;
text-align: center;
margin-top: -20px;
margin-bottom: 10px;
}
.centerPro-total span:nth-of-type(2) {
font-size: 18px;
} }
.chart-desc-task-centerPro { .chart-desc-task-centerPro {
display: flex; display: flex;
justify-content: space-around;
}
.chart-desc-task-centerPro-list{
width: 50%;
align-items: center;
} }
.chart-centerPro-text { .chart-centerPro-text {
font-size: 18px; font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
} margin-left: 10px;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;}
.chart-desc-task-right { .chart-desc-task-right {
margin-top: 5px; margin-top: 5px;
...@@ -733,8 +907,8 @@ body { ...@@ -733,8 +907,8 @@ body {
.chart-desc-task-title { .chart-desc-task-title {
display: flex; display: flex;
justify-content: space-between; align-items: center;
width: 70%;
} }
.chart-centerPro-value { .chart-centerPro-value {
...@@ -742,7 +916,13 @@ body { ...@@ -742,7 +916,13 @@ body {
font-family: DINAlternate-Bold-Regular, DINAlternate-Bold; font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
width: 85%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-left: 20px;
margin-top: 14px;
} }
.centerPro-right-title { .centerPro-right-title {
...@@ -757,7 +937,8 @@ body { ...@@ -757,7 +937,8 @@ body {
margin-bottom: 19px; margin-bottom: 19px;
} }
.timePeriod-textBox { @media screen and (min-width: 769px){
.timePeriod-textBox {
width: 100%; width: 100%;
height: 40px; height: 40px;
background: linear-gradient( background: linear-gradient(
...@@ -768,9 +949,35 @@ body { ...@@ -768,9 +949,35 @@ body {
background-size: cover; background-size: cover;
border-radius: 20px; border-radius: 20px;
margin-bottom: 30px; margin-bottom: 30px;
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
}
} }
.timePeriod-textBox-text { @media screen and (max-width: 768px){
.timePeriod-textBox {
width: 100%;
height: 40px;
background: linear-gradient(
-90deg,
rgba(92, 179, 255, 0) 0%,
rgba(92, 179, 255, 0.2) 100%
);
background-size: cover;
border-radius: 20px;
margin-bottom: 15px;
}
.timePeriod-textBox-text {
font-size: 16px; font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -779,24 +986,43 @@ body { ...@@ -779,24 +986,43 @@ body {
display: inline-block; display: inline-block;
margin-left: 20px; margin-left: 20px;
margin-top: 13px; margin-top: 13px;
}
} }
.echarts-timePeriod1{
padding: 0 20px 20px 0; .echarts-timePeriod1 {
padding: 20px;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
margin-bottom: 24px; margin-bottom: 24px;
} }
.echarts-content {
padding: 20px;
background: rgba(8, 16, 24, 0.27);
}
.echarts-timePeriod { .echarts-timePeriod {
height: 360px; height: 360px;
} }
.avgMonthlyBox { @media screen and (min-width: 769px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
height: 200px; height: 200px;
width: calc(100% - 2.4vw); width: calc(100% - 2.4vw);
margin-bottom: 24px; margin-bottom: 24px;
padding: 16px 0px 0 30px; padding: 16px 0px 0 30px;
}
}
@media screen and (max-width: 768px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
width: auto;
margin-bottom: 24px;
padding: 20px;
}
} }
.avgMonthlyBox-title { .avgMonthlyBox-title {
...@@ -809,17 +1035,32 @@ body { ...@@ -809,17 +1035,32 @@ body {
margin-bottom: 39px; margin-bottom: 39px;
} }
.avgMonthlyBox-content { @media screen and (min-width: 769px){
.avgMonthlyBox-content {
display: flex; display: flex;
width: 100%; width: 100%;
}
.content-item {
width: 15%;
padding-top: 17px;
text-align: center;
}
} }
.content-item { @media screen and (max-width: 768px){
.avgMonthlyBox-content {
display: flex;
flex-direction: column;
/*width: 100%;*/
}
.content-item {
width: 15%; width: 15%;
padding-top: 17px;
text-align: center; text-align: center;
}
} }
.item-text1 { .item-text1 {
font-size: 14px; font-size: 14px;
font-family: PingFang SC-Bold, PingFang SC; font-family: PingFang SC-Bold, PingFang SC;
...@@ -839,39 +1080,98 @@ body { ...@@ -839,39 +1080,98 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.content-item-r { @media screen and (min-width: 769px){
.content-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 74%;
}
}
@media screen and (max-width: 768px){
.content-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.content-item-left-icon {
width: 60px;
height: 48px;
}
}
.content-item-m {
display: flex;
flex: 1;
flex-direction: row;
align-content: center;
justify-content: space-between;
}
@media screen and (min-width: 769px){
.content-item-r {
width: 26%; width: 26%;
display: flex; display: flex;
margin-left: 5%; margin-left: 5%;
padding-right: 30px; padding-right: 30px;
}
.item-r-text {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 25px;
letter-spacing: 2px;
margin: 22px 1% 0 4%;
}
} }
.item-r-text { @media screen and (max-width: 768px){
.content-item-r {
display: flex;
width: 100%;
margin-top: 20px;
}
.item-r-text {
width: 100%;
font-size: 14px; font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
line-height: 25px; line-height: 25px;
letter-spacing: 2px; letter-spacing: 2px;
margin: 22px 1% 0 4%; padding: 10px;
}
} }
.item-r-text-red { .item-r-text-red {
color: #ff6464; color: #ff6464;
} }
.timePeriod-legend { .timePeriod-legend {
display: flex;
width: 100%; width: 100%;
height: 20px; height: 20px;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding-top: 20px; padding-top: 20px;
justify-content: flex-end;
} }
.timePeriod-legend2 { .timePeriod-legend2 {
} }
.timePeriod-legend-img { @media screen and (min-width: 769px){
.timePeriod-legend-img {
float: right; float: right;
width: auto; width: auto;
height: auto; height: auto;
...@@ -879,4 +1179,57 @@ body { ...@@ -879,4 +1179,57 @@ body {
max-height: 100%; max-height: 100%;
padding-right: 20px; padding-right: 20px;
}
}
@media screen and (max-width: 768px){
.timePeriod-legend-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
@media screen and (max-width: 768px) {
.electricity-content {
background: rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
height: auto;
}
.echarts-title-content {
display: flex;
flex-direction: column;
align-items: center;
}
.chart-desc-two {
margin-left: 10%;
}
.echarts-title-top1{
margin-left: 0;
}
.chart-desc{
width: 100%;
margin-left: 0;
}
.echarts-box1-right{
padding: 20px;
}
}
@media screen and (max-width: 768px) {
.echarts-title-repair{
height:auto;
}
.echarts-title-repair-left{
margin-right: 0;
}
.chart-desc-text-left{
width: 75%;
}
}
@media screen and (max-width: 768px) {
.energy-wrap .header {
height: 8vh;
}
} }
energy-report/index.html
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
<body> <body>
<div class="energy-wrap"> <div class="energy-wrap">
<div class="header"> <div class="header">
成阿园区月度用电报告 <div>园区名or企业名</div>
<div>2023-05月度用电报告</div>
</div> </div>
<!-- 用电趋势 --> <!-- 用电趋势 -->
<div class="chart-wrap"> <div class="chart-wrap">
...@@ -21,7 +22,9 @@ ...@@ -21,7 +22,9 @@
<img src="./assets/title-arrow.png" alt=""> <img src="./assets/title-arrow.png" alt="">
用电趋势 用电趋势
</div> </div>
<div id="repair-require" class="echarts-box"></div> <div class="echarts-content">
<div class="echarts-box" id="repair-require"></div>
</div>
</div> </div>
<!-- 企业用电量排名TOP15 --> <!-- 企业用电量排名TOP15 -->
<div class="top-15"> <div class="top-15">
...@@ -31,13 +34,25 @@ ...@@ -31,13 +34,25 @@
</div> </div>
<div class="top-15-wrap"> <div class="top-15-wrap">
<div class="items"> <div class="items">
<span class="index">01</span> <span class="index"><img src="./assets/no-1.svg"></span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p>
</div>
<div class="items">
<span class="index"><img src="./assets/no-2.svg"></span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p>
</div>
<div class="items">
<span class="index"><img src="./assets/no-3.svg"></span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p> <p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p> <p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p> <p class="unit text-overflow">90000<span>MWh</span></p>
</div> </div>
<div class="items"> <div class="items">
<span class="index">02</span> <span class="index">03</span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p> <p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p> <p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p> <p class="unit text-overflow">90000<span>MWh</span></p>
...@@ -57,6 +72,7 @@ ...@@ -57,6 +72,7 @@
</div> </div>
<div class="production-portrait"> <div class="production-portrait">
<div class="left popup"> <div class="left popup">
<p>工作制</p>
<span></span> <span></span>
<span></span> <span></span>
<span>白天8小时制</span> <span>白天8小时制</span>
...@@ -65,6 +81,8 @@ ...@@ -65,6 +81,8 @@
<span>非规律生产</span> <span>非规律生产</span>
</div> </div>
<div class="right popup"> <div class="right popup">
<p>生产状态</p>
<span></span> <span></span>
<span></span> <span></span>
<span>白天8小时制</span> <span>白天8小时制</span>
...@@ -75,14 +93,71 @@ ...@@ -75,14 +93,71 @@
</div> </div>
<div class="production-portrait-bottom"> <div class="production-portrait-bottom">
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> <div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>达产率：一共有<span <div class="echarts-title-repair-list-right">
class="echarts-title-repair-list-right-red">880家</span>企业在<span <span> <span
class="echarts-title-repair-list-right-red">2023年5月</span>已达到往期正常生产水平，<span class="echarts-title-repair-list-right-red">成都精亮科技有限公司</span>为<span
class="echarts-title-repair-list-right-red">占比61%</span></span></div> class="echarts-title-repair-list-right-red">24小时工作制，</span>当前生产状态为<span
class="echarts-title-repair-list-right-red">不景气，</span>请持续关注该企业生产情况</span></div>
</div> </div>
</div> </div>
<!-- 月度用电分析 --> <!-- 月度用电分析 -->
<div class="chart-wrap">
<div class="title">
<img alt="" src="./assets/title-arrow.png"/>
月度用电分析
</div>
<div class="echarts-content">
<div class="echarts-box" id="month-power"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right">
<span>分析可知<span
class="echarts-title-repair-list-right-red">3日、5日、12日、20日、22日</span>用电较多，分别为<span
class="echarts-title-repair-list-right-red">29385KWh、29385KWh、29385KWh、29385KWh、29385KWh</span> </span>
</div>
</div>
</div>
</div>
<!-- 月度功率因数趋势 -->
<div class="chart-wrap">
<div class="title">
<img alt="" src="./assets/title-arrow.png"/>
月度功率因数趋势
</div>
<div class="echarts-content">
<div class="echarts-box" id="month-trend"></div>
<div class="echarts-title-repair-list">
<img src="./assets/icon1.png"/>
<div class="echarts-title-repair-list-right">
<span
>分析可知<span class="echarts-title-repair-list-right-red"
>3日</span
>该企业当日的平均功率因数低于0.8，需要密切关注，必要时加装或启用无功补偿装置，提高企业用电功率因数。</span
>
</div>
</div>
<div class="echarts-title-repair-list">
<img src="./assets/icon1.png"/>
<div class="echarts-title-repair-list-right">
<span>分析可知该企业每日的平均功率因数均高于0.8，请持续关注。</span>
</div>
</div>
<div class="echarts-title-repair-list">
<img src="./assets/icon1.png"/>
<div class="echarts-title-repair-list-right">
<span
>分析可知<span class="echarts-title-repair-list-right-red"
>5日</span
>功率因数不稳定，请密切关注。</span
>
</div>
</div>
</div>
</div>
<!-- 功率因数企业分布 --> <!-- 功率因数企业分布 -->
<div class="distribution"> <div class="distribution">
<div class="title"> <div class="title">
...@@ -90,7 +165,7 @@ ...@@ -90,7 +165,7 @@
功率因数企业分布 功率因数企业分布
</div> </div>
<div class="distribution-wrap "> <div class="distribution-wrap ">
<div id="distribution-charts" class="echarts-box1"></div> <div id="distribution-charts"></div>
<div class="distribution-right"> <div class="distribution-right">
<div id="slide"> <div id="slide">
<div id="slide1" class="distribution-right-top"> <div id="slide1" class="distribution-right-top">
...@@ -138,10 +213,19 @@ ...@@ -138,10 +213,19 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="production-portrait-bottom">
<!-- 月度功率因数趋势 --> <div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right">
<span>其中功率因数大于等于0.8的企业的总用电量为<span
class="echarts-title-repair-list-right-red">【用电量】</span>为<span
class="echarts-title-repair-list-right-red">24小时工作制，</span>KWh，占总用电量的<span
class="echarts-title-repair-list-right-red">【占比百分比】。</span>功率因数小于0.8的企业的总用电量为<span
class="echarts-title-repair-list-right-red">【用电量】</span>KWh，占总用电量的<span
class="echarts-title-repair-list-right-red">【占比百分比】。</span></span></div>
</div>
</div>
</div>
<!-- 分时段企业用电情况分析 --> <!-- 分时段企业用电情况分析 -->
<div class="timePeriod"> <div class="timePeriod">
<div class="title"> <div class="title">
...@@ -160,13 +244,20 @@ ...@@ -160,13 +244,20 @@
</div> </div>
<div class="echarts-timePeriod1"> <div class="echarts-timePeriod1">
<div id="timePeriod-barCharts-1" class="echarts-timePeriod"></div> <div id="timePeriod-barCharts-1" class="echarts-timePeriod"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right">
<span>根据以上数据显示，该企业在<span
class="echarts-title-repair-list-right-red">生产时段1、生产时段2、生产时段3</span>进行生产的频率最高</span></div>
</div>
</div> </div>
<!-- 各时段生产企业 月度平均数(家) --> <!-- 各时段生产企业 月度平均数(家) -->
<div class="avgMonthlyBox"> <div class="avgMonthlyBox">
<div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div> <div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <div class="content-left">
<img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
<div class="content-item-m">
<div class="content-item"> <div class="content-item">
<div class="item-text1">尖时</div> <div class="item-text1">尖时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
...@@ -183,6 +274,8 @@ ...@@ -183,6 +274,8 @@
<div class="item-text1">谷时</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
</div> </div>
</div>
</div>
<div class="content-item-r"> <div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/> <img src="./assets/avgMonthlyLeft.svg"/>
<div class="item-r-text"> <div class="item-r-text">
...@@ -197,53 +290,55 @@ ...@@ -197,53 +290,55 @@
<!-- 尖峰平谷各时段，集中生产的企业月度平均数 --> <!-- 尖峰平谷各时段，集中生产的企业月度平均数 -->
<div class="timePeriod-textBox"> <div class="timePeriod-textBox">
<span class="timePeriod-textBox-text"> <span class="timePeriod-textBox-text">
尖峰平谷各时段，集中生产的企业月度平均数 尖峰平谷各时段，集中生产的企业月度平均数
</span> </span>
</div> </div>
<div class="centerPro"> <div class="centerPro">
<div class="centerPro-left"> <div class="centerPro-left">
<div class="timePeriod-legend2"> <div class="timePeriod-legend">
<img src="./assets/legend.svg" class="timePeriod-legend-img"/> <img src="./assets/legend.svg" class="timePeriod-legend-img"/>
</div> </div>
<div id="repair-require6"></div> <div id="repair-require6"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right">
<span>根据以上数据显示，该企业在<span
class="echarts-title-repair-list-right-red">集中生产时段1、集中生产时段2、集中生产时段3</span>进行集中生产的频率最高</span>
</div>
</div>
</div> </div>
<div class="centerPro-right"> <div class="centerPro-right">
<div class="centerPro-right-title">集中生产时段用电量占比</div> <div class="centerPro-right-title">集中生产时段用电量占比</div>
<div id="repair-require7"></div> <div id="repair-require7"></div>
<div> <div class="centerPro-total"><span>20011111.11</span><span>KWh</span></div>
<div class="chart-desc-task"> <div class="chart-desc-task-centerPro">
<div class="chart-desc-icon chart-desc-icon2"></div> <div class="chart-desc-task-centerPro-list">
<div class="chart-desc-task-right">
<div class="chart-desc-task-title"> <div class="chart-desc-task-title">
<div class="chart-desc-centerPro-icon2"></div>
<div class="chart-centerPro-text">非集中生产时间段</div> <div class="chart-centerPro-text">非集中生产时间段</div>
<div class="chart-centerPro-value">75%</div>
</div> </div>
<div class="chart-centerPro-value">200KWh</div> <div class="chart-centerPro-value">75%</div>
</div> <div class="chart-centerPro-value" title="20011111.11KWh">20011111.11KWh</div>
</div> </div>
<div class="chart-desc-task-centerPro"> <div class="chart-desc-task-centerPro-list">
<div class="chart-desc-icon chart-desc-icon3"></div>
<div class="chart-desc-task-right">
<div class="chart-desc-task-title"> <div class="chart-desc-task-title">
<div class="chart-desc-centerPro-icon3"></div>
<div class="chart-centerPro-text">集中生产时间段</div> <div class="chart-centerPro-text">集中生产时间段</div>
<div class="chart-centerPro-value">7.25%</div>
</div> </div>
<div class="chart-centerPro-value">7.25%</div>
<div class="chart-centerPro-value">20KWh</div> <div class="chart-centerPro-value">20KWh</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 各时段集中生产企业 月度平均数(家) --> <!-- 各时段集中生产企业 月度平均数(家) -->
<div class="avgMonthlyBox"> <div class="avgMonthlyBox">
<div class="avgMonthlyBox-title"> <div class="avgMonthlyBox-title">
各时段集中生产企业 月度平均数(家) 各时段集中生产企业 月度平均数(家)
</div> </div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <div class="content-left">
<img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
<div class="content-item-m">
<div class="content-item"> <div class="content-item">
<div class="item-text1">尖时</div> <div class="item-text1">尖时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
...@@ -260,6 +355,8 @@ ...@@ -260,6 +355,8 @@
<div class="item-text1">谷时</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
</div> </div>
</div>
</div>
<div class="content-item-r"> <div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/> <img src="./assets/avgMonthlyLeft.svg"/>
<div class="item-r-text"> <div class="item-r-text">
...@@ -280,14 +377,15 @@ ...@@ -280,14 +377,15 @@
<div class="timePeriod-legend"> <div class="timePeriod-legend">
<img src="./assets/legend.svg" class="timePeriod-legend-img"/> <img src="./assets/legend.svg" class="timePeriod-legend-img"/>
</div> </div>
<div class="echarts-timePeriod1"> <div id="timePeriod-barCharts-3" class="echarts-timePeriod"></div></div> <div class="echarts-timePeriod1">
<div class="echarts-timePeriod" id="timePeriod-barCharts-3"></div>
</div>
</div> </div>
</div> </div>
<!--用电结构--> <!--用电结构-->
<div class="flex electricity-content"> <div class="flex electricity-content">
<div class=" echarts-box2"> <div class="echarts-box2">
<div class="electricity-content-title">用电结构</div> <div class="electricity-content-title">用电结构</div>
<div class="echarts-title-content"> <div class="echarts-title-content">
<div class="echarts-title-top1"> <div class="echarts-title-top1">
...@@ -321,8 +419,6 @@ ...@@ -321,8 +419,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="echarts-box1-right"> <div class="echarts-box1-right">
<div class="invest-wrapper-content"> <div class="invest-wrapper-content">
...@@ -454,9 +550,7 @@ ...@@ -454,9 +550,7 @@
let slide1 = document.getElementById("slide1"); let slide1 = document.getElementById("slide1");
let listH = document.getElementsByClassName('distribution-right-top-list')[0] let listH = document.getElementsByClassName('distribution-right-top-list')[0]
slide2.innerHTML = slide1.innerHTML slide2.innerHTML = slide1.innerHTML
function rowUp() { function rowUp() {
if (slide2.offsetTop - slide.scrollTop <= 0) if (slide2.offsetTop - slide.scrollTop <= 0)
slide.scrollTop -= slide1.offsetHeight slide.scrollTop -= slide1.offsetHeight
else { else {
...@@ -464,7 +558,6 @@ ...@@ -464,7 +558,6 @@
slide.scrollTop++ slide.scrollTop++
} }
} }
let timer = setInterval(rowUp, speed) let timer = setInterval(rowUp, speed)
slide.onmouseover = function () { slide.onmouseover = function () {
clearInterval(timer) , $(slide).css( clearInterval(timer) , $(slide).css(
...@@ -480,7 +573,6 @@ ...@@ -480,7 +573,6 @@
} }
var myChart7, myChart8, myChart9, myChart10, myChart11;
const myChart = {} const myChart = {}
function initEcharts(el, option) { function initEcharts(el, option) {
...@@ -489,9 +581,31 @@ ...@@ -489,9 +581,31 @@
option && ele.setOption({...option}) option && ele.setOption({...option})
} }
const getOption = () => { let windowWidth = window.screen.width;
return {} const getEchartsDataZoom = () => {
if (windowWidth > 768) {
return []
}
return [
{ //y轴固定,让内容滚动
type: 'slider',
xAxisIndex: [0],
show:true, //显示滚轴
height:8, //设置滚轴的高度
bottom:0, //设置滚轴在底部
start: 0,
end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。
maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。
realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
filterMode:'empty' // 溢出窗口数据隐藏
},
]
} }
//用电趋势
const getEcharts = () => { const getEcharts = () => {
let option = { let option = {
tooltip: { tooltip: {
...@@ -506,42 +620,42 @@ ...@@ -506,42 +620,42 @@
color: "#fff" color: "#fff"
}, },
}, },
dataZoom: [//给x轴设置滚动条 // dataZoom: [//给x轴设置滚动条
{ // {
type: 'slider',//slider表示有滑动块的，inside表示内置的 // type: 'slider',//slider表示有滑动块的，inside表示内置的
// startValue: 8,//可用于设置开始显示的柱子的长度 // // startValue: 8,//可用于设置开始显示的柱子的长度
// endValue: 1,//可用于设置结束显示的柱子的长度 // // endValue: 1,//可用于设置结束显示的柱子的长度
start: 80,//默认为0 可设置滚动条从在后进行展示 // start: 80,//默认为0 可设置滚动条从在后进行展示
end: 100,//默认为100 // end: 100,//默认为100
show: true, // show: true,
xAxisIndex: [0], // xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小 // handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度 // height: 8,//组件高度
left: '10%', //左边的距离 // left: '10%', //左边的距离
right: '10%',//右边的距离 // right: '10%',//右边的距离
bottom: -2,//右边的距离 // bottom: -2,//右边的距离
borderColor: "#F4F4F4", // borderColor: "#F4F4F4",
fillerColor: '#E7E7E7', // fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色 // backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto // showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true // showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新 // realtime: true, //是否实时更新
filterMode: 'filter', // filterMode: 'filter',
handleStyle: { // handleStyle: {
borderRadius: '20', // borderRadius: '20',
}, // },
}, // },
//下面这个属性是里面拖到 // //下面这个属性是里面拖到
{ // {
type: 'inside', // type: 'inside',
show: true, // show: true,
xAxisIndex: [0], // xAxisIndex: [0],
start: 0,//默认为1 // start: 0,//默认为1
end: 100,//默认为100 // end: 100,//默认为100
moveOnMouseWheel: false, // moveOnMouseWheel: false,
preventDefaultMouseMove: false, // preventDefaultMouseMove: false,
}, // },
], // ],
xAxis: [ xAxis: [
{ {
axisLine: { axisLine: {
...@@ -569,7 +683,8 @@ ...@@ -569,7 +683,8 @@
data: ['2018年', '2019年', '2020年', '2021年', '2022年'] data: ['2018年', '2019年', '2020年', '2021年', '2022年']
} }
], ],
yAxis: [{ yAxis: [
{
name: '单位：MWh', name: '单位：MWh',
alignWithLabel: true, alignWithLabel: true,
"position": "left", "position": "left",
...@@ -609,7 +724,6 @@ ...@@ -609,7 +724,6 @@
color: '#fff', color: '#fff',
align: 'left', align: 'left',
}, },
// nameLocation: 'end',
type: 'value', type: 'value',
position: 'right', position: 'right',
splitLine: {show: false}, splitLine: {show: false},
...@@ -641,6 +755,8 @@ ...@@ -641,6 +755,8 @@
{offset: 0, color: 'rgba(63, 241, 217, 1)'}, {offset: 0, color: 'rgba(63, 241, 217, 1)'},
]) ])
}, },
stack: "one",
}, },
{ {
name: '去年用电量', name: '去年用电量',
...@@ -682,7 +798,7 @@ ...@@ -682,7 +798,7 @@
}, },
showBackground: true, showBackground: true,
data: [50, 110, 110, 210, 150],//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了 data: [50, 110, 110, 210, 150],//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
barWidth: '50%', barWidth: '60%',
backgroundStyle: { backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(255, 255, 255, 0.05)'}, {offset: 0, color: 'rgba(255, 255, 255, 0.05)'},
...@@ -702,22 +818,13 @@ ...@@ -702,22 +818,13 @@
initEcharts('#repair-require', option) initEcharts('#repair-require', option)
} }
getEcharts(); getEcharts();
//功率因数企业分布
const getEcharts2 = () => { const getEcharts2 = () => {
var option = { var option = {
tooltip: {
//提示框组件
trigger: 'axis',
tooltip: {
trigger: "axis",
axisPointer: {
//type: "shadow",
},
},
},
grid: { grid: {
left: '1%', left: '1%',
right: '1%', right: '5%',
bottom: '6%', bottom: '6%',
top: 30, top: 30,
padding: '0 0 10 0', padding: '0 0 10 0',
...@@ -731,58 +838,56 @@ ...@@ -731,58 +838,56 @@
color: "#fff" color: "#fff"
}, },
}, },
dataZoom: [//给x轴设置滚动条 tooltip: {
{ trigger: 'axis',
type: 'slider',//slider表示有滑动块的，inside表示内置的 borderWidth: 0,
// startValue: 8,//可用于设置开始显示的柱子的长度 textStyle: {
// endValue: 1,//可用于设置结束显示的柱子的长度 lineHeight: 20,
start: 80,//默认为0 可设置滚动条从在后进行展示 },
end: 100,//默认为100 formatter: function (params) {
show: true, let data;
xAxisIndex: [0], if (!(Number(params[0].axisValue) * 10 - 1)) {
handleSize: 0,//滑动条的 左右2个滑动条的大小 data = `0 - ${params[0].axisValue}`;
height: 8,//组件高度 } else {
left: '10%', //左边的距离 data = `0.${(Number(params[0].axisValue) * 10 - 1)} - ${params[0].axisValue}`;
right: '10%',//右边的距离 }
bottom: -2,//右边的距离
borderColor: "#F4F4F4", let tip = '';
fillerColor: '#E7E7E7', tip += `<div style=" width: 200px; padding-bottom: 5px;"><div>${data}</div> </div>`;
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色 for (let i = 0; i < params.length; i++) {
showDataShadow: false,//是否显示数据阴影 默认auto tip += `<div style="display: flex;width: 200px;justify-content: space-between; align-items: center;margin-top: 5px"> <div>${
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true params[i].marker + params[i].seriesName
realtime: true, //是否实时更新 }</div><div>${params[i].value}</div></div>`;
filterMode: 'filter', }
handleStyle: { return tip;
borderRadius: '20', },
},
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100,//默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
}, },
],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
name: '功率因数',
nameTextStyle: {
color: '#fff',
verticalAlign: 'bottom',
lineHeight: -26,
},
boundaryGap: true, //坐标轴两边留白 boundaryGap: true, //坐标轴两边留白
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '17:00', '8:00'], data: ['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1.0'],
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置。 //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』 interval: 'auto', //设置为 1，表示『隔一个标签显示一个标签』
margin: 15, // margin: 15,
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', color: 'rgba(255, 255, 255, 1)',
}
}, },
// align: 'center',
padding: [0, 0, 0, 65]
},
// offset:5,
axisTick: { axisTick: {
//坐标轴刻度相关设置。 //坐标轴刻度相关设置。
show: false, show: true,
}, },
axisLine: { axisLine: {
//坐标轴轴线相关设置 //坐标轴轴线相关设置
...@@ -795,6 +900,11 @@ ...@@ -795,6 +900,11 @@
show: false, show: false,
}, },
}, },
{
type: 'category',
show: false,
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '17:00', '8:00'],
}
], ],
yAxis: [ yAxis: [
{ {
...@@ -802,7 +912,7 @@ ...@@ -802,7 +912,7 @@
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
}, },
name: '企业数', name: '企业数:个',
position: 'left', position: 'left',
splitNumber: 5, splitNumber: 5,
axisLabel: { axisLabel: {
...@@ -829,13 +939,14 @@ ...@@ -829,13 +939,14 @@
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
}, },
name: '用电量', name: '用电量:KWh',
position: 'right', position: 'right',
splitNumber: 5, // splitNumber: 5,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', color: 'rgba(255, 255, 255, 1)',
} },
padding: [0, 20, 0, 0]
}, },
axisLine: { axisLine: {
show: false, show: false,
...@@ -854,7 +965,7 @@ ...@@ -854,7 +965,7 @@
], ],
series: [ series: [
{ {
name: '企业数', name: '企业数:个',
yAxisIndex: 0, yAxisIndex: 0,
type: 'pictorialBar', //设置类型为象形柱状图 type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形 symbol: 'roundRect', //图形类型，带圆角的矩形
...@@ -887,7 +998,7 @@ ...@@ -887,7 +998,7 @@
stack: '2', stack: '2',
}, },
{ {
name: '用电数', name: '用电量：KWh',
yAxisIndex: 1, yAxisIndex: 1,
type: 'pictorialBar', //设置类型为象形柱状图 type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形 symbol: 'roundRect', //图形类型，带圆角的矩形
...@@ -915,44 +1026,45 @@ ...@@ -915,44 +1026,45 @@
barGap: 0, //柱间距离 barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复 symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸 symbolSize: [14, 5], //图形元素的尺寸
data: [2.9, 5, 4.4, 2.7, 5.7, 9, 5, 4, 2, 4], data: [29, 522, 40, 2.7, 5.7, 9, 5, 4, 2, 4],
animationEasing: 'elasticOut', //动画效果 animationEasing: 'elasticOut', //动画效果
stack: '1', stack: '1',
}, },
{
xAxisIndex: 1,
itemStyle: {
show: false,
color: 'transparent',
opacity: 0//透明度
},
showBackground: true,
data: [2.9, 5, 4.4, 2.7, 5.7, 9, 5, 4, 2, 4],
barWidth: '60%',
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(255, 255, 255, 0.05)'},
{offset: 1, color: 'rgba(255, 255, 255, 0.05)'},
])
},
z: 0,
tooltip: {
show: false,
trigger: 'axis',
type: 'none',
},
type: 'bar'
}
], ],
}; };
initEcharts('#distribution-charts', option) initEcharts('#distribution-charts', option)
} }
getEcharts2() getEcharts2()
//集中生产时段用电量占比 //集中生产时段用电量占比
var chartDom7 = document.getElementById("repair-require7"); const getEcharts3 = () => {
myChart7 = echarts.init(chartDom7) var option = {
var option7;
option7 = {
tooltip: {}, tooltip: {},
color: ["#3DEBD5", "#E86265"], color: ["#3DEBD5", "#E86265"],
title: {
text: '400',
// subtext: 7789,
subtext: 'KWh',
itemGap: 0,
textStyle: {
color: '#f2f2f2',
fontSize: 23,
fontWeight: 800,
top: '0px'
// align: 'center'
},
subtextStyle: {
fontSize: 18,
color: '#FFFFFF'
},
x: 'center',
y: 'center'
},
legend: false, legend: false,
series: [ series: [
// 主要展示层的 // 主要展示层的
{ {
...@@ -1072,15 +1184,13 @@ ...@@ -1072,15 +1184,13 @@
} }
] ]
} }
initEcharts('#repair-require7', option)
}
option7 && myChart7.setOption(option7); getEcharts3()
//用电结构 //用电结构
var chartDom9 = document.getElementById("repair-require9"); const getEcharts4 = () => {
myChart9 = echarts.init(chartDom9) var option = {
var option9;
option9 = {
tooltip: {}, tooltip: {},
legend: false, legend: false,
color: ["#F68500", "#3FF1D9", "#FF6464", "#00DDFF"], color: ["#F68500", "#3FF1D9", "#FF6464", "#00DDFF"],
...@@ -1179,13 +1289,13 @@ ...@@ -1179,13 +1289,13 @@
}, },
], ],
}; };
option9 && myChart9.setOption(option9); initEcharts('#repair-require9', option)
}
getEcharts4()
//园区企业生产状态分析 //园区企业生产状态分析
var chartDom10 = document.getElementById("repair-require10"); const getEcharts5 = () => {
myChart10 = echarts.init(chartDom10) var option = {
var option10;
option10 = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
...@@ -1280,13 +1390,13 @@ ...@@ -1280,13 +1390,13 @@
}, },
], ],
}; };
option10 && myChart10.setOption(option10); initEcharts('#repair-require10', option)
}
getEcharts5()
//企业生产工作制分析 //企业生产工作制分析
var chartDom11 = document.getElementById("repair-require11"); const getEcharts6 = () => {
myChart11 = echarts.init(chartDom11) var option = {
var option11;
option11 = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -1328,6 +1438,11 @@ ...@@ -1328,6 +1438,11 @@
padding: [0, 0, 0, 0], padding: [0, 0, 0, 0],
}, },
} }
},
{
type: 'category',
show: false,
data: ['非规律生产', '白天8小时工作制', '24小时工作制'],
} }
], ],
yAxis: [ yAxis: [
...@@ -1338,9 +1453,7 @@ ...@@ -1338,9 +1453,7 @@
color: "#fff", color: "#fff",
top: -10, top: -10,
}, },
min: 0,
max: 900,
interval: 300,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -1364,9 +1477,7 @@ ...@@ -1364,9 +1477,7 @@
color: "#fff", color: "#fff",
}, },
min: 0,
max: 900,
interval: 300,
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
...@@ -1382,21 +1493,23 @@ ...@@ -1382,21 +1493,23 @@
color: '#354050' color: '#354050'
} }
} }
} },
], ],
series: [ series: [
{ {
name: '企业数：个', name: '企业数：个',
type: 'pictorialBar', type: 'pictorialBar',
symbol: 'rect', // symbol: 'rect',
symbol: "roundRect",
symbolOffset: [0, 0],
symbolSize: [14, 5], //图形元素的尺寸
data: [ data: [222,44,11],
200, 400, 900,
],
symbolSize: ['55%', 10],
symbolRepeat: true, symbolRepeat: true,
symbolMargin: 2, symbolMargin: 1,
barWidth: 40, barWidth: '10%', //柱图宽度
barMaxWidth: '20%', //最大宽度
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
...@@ -1423,19 +1536,20 @@ ...@@ -1423,19 +1536,20 @@
{ {
name: '用电量：KWh', name: '用电量：KWh',
type: 'pictorialBar', type: 'pictorialBar',
symbol: 'rect', // symbol: 'rect',
symbol: "roundRect",
symbolOffset: [5, 0],
symbolSize: [14, 5], //图形元素的尺寸
barGap: '1%', barGap: 0,
yAxisIndex: 1, yAxisIndex: 1,
data: [ data: [111,44,77],
100, 300, 600
],
symbolSize: ['55%', 10],
symbolRepeat: true, symbolRepeat: true,
symbolMargin: 2, symbolMargin: 1,
barWidth: 40, barWidth: '10%', //柱图宽度
barMaxWidth: '20%', //最大宽度
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
...@@ -1459,11 +1573,37 @@ ...@@ -1459,11 +1573,37 @@
}, },
}, },
{
xAxisIndex: 1,
itemStyle: {
show: false,
color: 'transparent',
opacity: 0//透明度
},
showBackground: true,
data: [50, 110, 110, 210, 150],//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
barWidth: '35%',
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(255, 255, 255, 0.05)'},
{offset: 1, color: 'rgba(255, 255, 255, 0.05)'},
])
},
z: 0,
tooltip: {
show: false,
trigger: 'axis',
type: 'none',
},
type: 'bar'
}
] ]
}; };
option11 && myChart11.setOption(option11); initEcharts('#repair-require11', option)
<!-- 分时段企业用电情况分析 --> }
getEcharts6()
// <!-- 分时段企业用电情况分析 -->
const allTimeData = [ const allTimeData = [
{ {
value: 25, value: 25,
...@@ -1558,34 +1698,224 @@ ...@@ -1558,34 +1698,224 @@
name: "低谷时段", name: "低谷时段",
}, },
]; ];
const newData = []; const allTimeData1 = [
if (allTimeData && allTimeData.length > 0) { {
allTimeData.forEach((i) => { value: 35,
if (i.name === "低谷时段") { name: "尖峰时段",
newData.push({
...i,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: `rgba(0, 221, 255, 0.2)`},
{offset: 1, color: "#00DDFF"},
]),
}, },
}); {
} else if (i.name === "平均时段") { value: 22,
newData.push({ name: "尖峰时段",
...i,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: `rgba(63, 241, 217, 0.2)`},
{offset: 1, color: "#3FF1D9"},
]),
}, },
}); {
} else if (i.name === "高峰时段") { value: 21,
newData.push({ name: "尖峰时段",
...i, },
itemStyle: { {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ value: 20,
name: "尖峰时段",
},
{
value: 15,
name: "平均时段",
},
{
value: 14,
name: "平均时段",
},
{
value: 15,
name: "平均时段",
},
{
value: 11,
name: "平均时段",
},
{
value: 11,
name: "平均时段",
},
{
value: 18,
name: "高峰时段",
},
{
value: 16,
name: "高峰时段",
},
{
value: 19,
name: "高峰时段",
},
{
value: 21,
name: "尖峰时段",
},
{
value: 11,
name: "高峰时段",
},
{
value: 11,
name: "高峰时段",
},
{
value: 4,
name: "低谷时段",
},
{
value: 4,
name: "低谷时段",
},
{
value: 5,
name: "低谷时段",
},
{
value: 7,
name: "低谷时段",
},
{
value: 8,
name: "低谷时段",
},
{
value: 14,
name: "高峰时段",
},
{
value: 3,
name: "高峰时段",
},
{
value: 1,
name: "低谷时段",
},
];
const allTimeData2 = [
{
value: 45,
name: "尖峰时段",
},
{
value: 22,
name: "尖峰时段",
},
{
value: 21,
name: "尖峰时段",
},
{
value: 20,
name: "尖峰时段",
},
{
value: 15,
name: "平均时段",
},
{
value: 14,
name: "平均时段",
},
{
value: 15,
name: "平均时段",
},
{
value: 11,
name: "平均时段",
},
{
value: 11,
name: "平均时段",
},
{
value: 18,
name: "高峰时段",
},
{
value: 16,
name: "高峰时段",
},
{
value: 19,
name: "高峰时段",
},
{
value: 21,
name: "尖峰时段",
},
{
value: 11,
name: "高峰时段",
},
{
value: 11,
name: "高峰时段",
},
{
value: 4,
name: "低谷时段",
},
{
value: 4,
name: "低谷时段",
},
{
value: 5,
name: "低谷时段",
},
{
value: 7,
name: "低谷时段",
},
{
value: 8,
name: "低谷时段",
},
{
value: 14,
name: "高峰时段",
},
{
value: 3,
name: "高峰时段",
},
{
value: 1,
name: "低谷时段",
},
];
function TimeData(dataList) {
const newData = [];
if (dataList && dataList.length > 0) {
dataList.forEach((i) => {
if (i.name === "低谷时段") {
newData.push({
...i,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: `rgba(0, 221, 255, 0.2)`},
{offset: 1, color: "#00DDFF"},
]),
},
});
} else if (i.name === "平均时段") {
newData.push({
...i,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: `rgba(63, 241, 217, 0.2)`},
{offset: 1, color: "#3FF1D9"},
]),
},
});
} else if (i.name === "高峰时段") {
newData.push({
...i,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: `rgba(246, 133, 0, 0.2)`}, {offset: 0, color: `rgba(246, 133, 0, 0.2)`},
{offset: 1, color: "#F68500"}, {offset: 1, color: "#F68500"},
]), ]),
...@@ -1604,7 +1934,9 @@ ...@@ -1604,7 +1934,9 @@
} }
}); });
} }
console.log(newData); return newData
}
//尖峰平谷各时段，进行生产的企业月度平均数 //尖峰平谷各时段，进行生产的企业月度平均数
const getBarEcharts = () => { const getBarEcharts = () => {
let option = { let option = {
...@@ -1617,7 +1949,7 @@ ...@@ -1617,7 +1949,7 @@
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 20, 21, 22, 23,
], ],
axisLabel: { axisLabel: {
...@@ -1671,12 +2003,13 @@ ...@@ -1671,12 +2003,13 @@
}, },
series: [ series: [
{ {
data: newData, data: TimeData(allTimeData),
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#timePeriod-barCharts-1", option); initEcharts("#timePeriod-barCharts-1", option);
}; };
...@@ -1747,12 +2080,13 @@ ...@@ -1747,12 +2080,13 @@
}, },
series: [ series: [
{ {
data: newData, data: TimeData(allTimeData1),
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#timePeriod-barCharts-3", option); initEcharts("#timePeriod-barCharts-3", option);
}; };
...@@ -1823,22 +2157,359 @@ ...@@ -1823,22 +2157,359 @@
}, },
series: [ series: [
{ {
data: newData, data: TimeData(allTimeData2),
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#repair-require6", option); initEcharts("#repair-require6", option);
}; };
getBarEcharts4(); getBarEcharts4();
window.onresize = function () { //月度用电分析
myChart8.resize(); const getEcharts7 = () => {
myChart9.resize(); var option = {
myChart10.resize(); tooltip: {
myChart11.resize(); trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
show: true,
textStyle: {
color: "#fff",
fontSize: 16,
},
itemHeight: 10,
itemWidth: 14,
},
xAxis: [
{
type: "category",
data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1,
2, 3, 4, 5, 6, 7, 8, 9, 10,
],
axisPointer: {
type: "shadow",
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
},
},
{
type: "category",
data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1,
2, 3, 4, 5, 6, 7, 8, 9, 10,
],
show: false,
},
],
yAxis: [
{
type: "value",
name: "单位:MWh",
nameTextStyle: {
color: "#fff",
fontSize: 16,
top: -10,
},
min: 0,
// max: 900,
// interval: 300,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#354050",
},
},
},
{
type: "value",
name: "同比%",
nameTextStyle: {
color: "#fff",
fontSize: 16,
},
// min: -50,
// max: 200,
// interval: 25,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
formatter: "{value} %",
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "#354050",
},
},
},
{
type: "value",
name: "",
min: 0,
max: 100,
show: false
},
],
grid: {
top: 50,
left: "1%",
right: -20,
bottom: 20,
containLabel: true,
},
series: [
{
name: "当月用电量",
type: "bar",
data: [136296.770, 136114.330, 130937.710, 128811.420, 136217.500, 136560.100, 142997.550, 144501.440, 150104.850, 147947.450, 134496.190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: "one",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: "#0D332E"},
{offset: 1, color: "#3FF1D9"},
]),
},
barWidth: "25%",
},
{
name: "",
type: "bar",
data: [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
],
yAxisIndex: 2,
stack: "one",
color: "#37F1C8",
barWidth: "25%",
tooltip: {
show: false,
},
},
{
name: "上月用电量",
type: "bar",
data: [36263.050, 55479.250, 88524.650, 132205.970, 147379.820, 153868.390, 135878.660, 139844.390, 141156.850, 145195.760, 152567.230, 158905.090, 158802.080, 141452.540, 155269.020, 143850.890, 150561.280, 133303.860, 146315.850, 134842.180, 94732.810, 1001.490, 318410.620, 138384.030, 148923.660, 144025.280, 135101.050, 121167.230, 152633.180, 155588.950],
stack: "two",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: "#00525E"},
{offset: 1, color: "#00DDFF"},
]),
},
barWidth: "25%",
},
{
name: "",
type: "bar",
data: [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
],
yAxisIndex: 2,
stack: "two",
color: "#00DDFF",
barWidth: "25%",
tooltip: {
show: false,
},
},
{
name: "同比",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + " %";
},
},
yAxisIndex: 1,
data: [
0, 10, 2300, 2, -10, 22, 45, 10, 23, 2, -10, 22, 45, 21, 10, 23,
2, -10, 22, 45, 21, 10, 0, 10, 23, 2, -10, 22, 10,
],
symbolSize: 9,
itemStyle: {
color: "rgba(255, 100, 100, 1)",
},
},
{
xAxisIndex: 1,
itemStyle: {
show: false,
color: "transparent",
opacity: 0, //透明度
},
showBackground: true,
data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2,
3, 4, 5, 6, 7, 8, 9, 0,
], //这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
barWidth: "90%",
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: "rgba(255, 255, 255, 0.05)"},
{offset: 1, color: "rgba(255, 255, 255, 0.05)"},
]),
},
z: 0,
tooltip: {
show: false,
trigger: "axis",
type: "none",
},
type: "bar",
},
],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts('#month-power', option)
}
getEcharts7()
//月度功率因数趋势
const getEcharts8 = () => {
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
show: true,
textStyle: {
color: "#fff",
fontSize: 16,
},
itemHeight: 10,
itemWidth: 14,
},
xAxis: [
{
type: "category",
data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1,
2, 3, 4, 5, 6, 7, 8, 9, 10,
],
axisPointer: {
type: "shadow",
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
},
},
],
yAxis: [
{
type: "value",
name: "功率因数",
nameTextStyle: {
color: "#fff",
fontSize: 16,
top: -10,
},
min: 0,
max: 1,
interval: 0.25,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#354050",
},
},
},
],
grid: {
top: 50,
left: "1%",
right: "1%",
bottom: 20,
containLabel: true,
},
series: [
{
name: "",
type: "line",
symbol: "none",
data: [
0.2, 0.5, 0.3, 0.1, 0.2, 0.2, 0.5, 0.3, 0.1, 0.2, 0.2, 0.5, 0.3,
0.1, 0.2, 0.2, 0.5, 0.3, 0.1, 0.2, 0.2, 0.5, 0.3, 0.1, 0.2, 0.2,
0.5, 0.3, 0.1, 0.2,
],
color: "#5CB3FF",
markLine: {
symbol: "none",
lineStyle: {
color: "#FF6464",
type: "solid",
width: 2,
},
label: {
position: "start",
distance: 10,
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
},
data: [
{
yAxis: 0.8,
},
],
silent: true,
},
},
],
dataZoom: getEchartsDataZoom(),
};
initEcharts('#month-trend', option)
}
getEcharts8()
window.onresize = function () { window.onresize = function () {
Object.values(myChart).forEach(chart => chart.resize()) Object.values(myChart).forEach(chart => chart.resize())
}; };
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论