Skip to content

R
report-html-template
Commit 06dac29f by wangmin
Options

能耗

parent 83968555
正在显示 包含 1827 行增加 和 1132 行删除
energy-report/assets/avgMonthlyIcon.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="123" height="98" viewBox="0 0 123 98"><defs><linearGradient x1="0.45588240027427673" y1="0.7766991853713989" x2="0.4485294222831726" y2="0.019417470321059227" id="master_svg0_10629_015266"><stop offset="0%" stop-color="#FD5656" stop-opacity="1"/><stop offset="100%" stop-color="#FD5656" stop-opacity="0"/></linearGradient><filter id="master_svg1_19847_99715" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="53.880699157714844" height="62.60801696777344"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="0"/><feColorMatrix type="matrix" values="0 0 0 0 0.3874000012874603 0 0 0 0 0.1135082021355629 0 0 0 0 0.1135082021355629 0 0 0 1 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_10629_012297"><stop offset="2.857142873108387%" stop-color="#FFE5E5" stop-opacity="1"/><stop offset="99.28571581840515%" stop-color="#EC7E72" stop-opacity="1"/></linearGradient></defs><g><g style="opacity:0.30000001192092896;"><path d="M24.0552,69.9480375C24.0552,69.9480375,1,8.6484375,1,8.6484375C1,8.6484375,122,8.6484375,122,8.6484375C122,8.6484375,100.0578,69.9481375,100.0578,69.9481375C100.0578,69.9481375,61.8185,88.5708375,61.8185,88.5708375C61.8185,88.5708375,24.0552,69.9480375,24.0552,69.9480375Z" fill="url(#master_svg0_10629_015266)" fill-opacity="1"/></g><g style="opacity:0.4000000059604645;"><path d="M61.54584921875,53.65625C61.54584921875,53.65625,25.64794921875,69.95115,25.64794921875,69.95115C25.64794921875,69.95115,61.54584921875,87.79795,61.54584921875,87.79795C61.54584921875,87.79795,98.22454921875,69.95115,98.22454921875,69.95115C98.22454921875,69.95115,61.54584921875,53.65625,61.54584921875,53.65625Z" fill="#FD5656" fill-opacity="1"/><path d="M99.40974921875,69.93045000000001L98.42754921875,69.49415L61.54354921875,53.10815L24.48349921875,69.93055L61.54344921875,88.35515000000001L99.40974921875,69.93045000000001ZM97.03944921875,69.97175L61.54804921875,54.20435L26.81239921875,69.97165L61.54814921875,87.24074999999999L97.03944921875,69.97175Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g style="opacity:0.20000000298023224;"><path d="M61.98178984375,67.62109375C61.98178984375,67.62109375,30.32958984375,81.69389375,30.32958984375,81.69389375C30.32958984375,81.69389375,61.981689843750004,97.10699375,61.981689843750004,97.10699375C61.981689843750004,97.10699375,94.32188984375,81.69389375,94.32188984375,81.69389375C94.32188984375,81.69389375,61.98178984375,67.62109375,61.98178984375,67.62109375Z" fill="#FD5656" fill-opacity="1"/><path d="M95.52748984375,81.67319375L94.52138984375,81.23549375L61.97958984375,67.07486375L29.14520984375,81.67329375L61.97938984375,97.66199375L95.52748984375,81.67319375ZM93.11628984375,81.71459375L61.98388984375,68.16732375L31.51396984375,81.71449375L61.983989843749995,96.55199375000001L93.11628984375,81.71459375Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g style="opacity:0.800000011920929;"><path d="" fill="#FD5656" fill-opacity="1"/><path d="M59.01224921875,54.117634L67.98714921875,57.865610000000004L68.37244921875,56.94284L59.39754921875,53.194866L59.01224921875,54.117634ZM99.43884921875,69.91635L87.52804921875,64.94235L87.14264921875,65.86505L97.01034921875,69.98585L89.05924921875,73.85464999999999L89.49674921875,74.75385L99.43884921875,69.91635ZM24.51416921875,69.94585000000001L34.18158921875,74.75195L34.626759218749996,73.85655L26.78172921875,69.95635L35.23107921875,65.85345L34.79426921875,64.95395L24.51416921875,69.94585000000001ZM61.54364921875,88.35505L70.53574921875,83.97975L70.09824921875,83.08055L61.54844921875,87.24065L53.18434921875,83.08245L52.73914921875,83.97785L61.54364921875,88.35505Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g filter="url(#master_svg1_19847_99715)"><path d="M89.04957065429687,19.088116996765137Q89.04957065429687,18.695516996765136,88.99847065429688,18.306316996765137Q88.94727065429687,17.91701699676514,88.84587065429687,17.537816996765137Q88.74437065429687,17.158616996765137,88.59437065429688,16.795816996765137Q88.44447065429688,16.433016996765136,88.24847065429688,16.092816996765137Q88.05247065429688,15.752716996765137,87.81387065429688,15.440916996765136Q87.57527065429687,15.129216996765138,87.29807065429688,14.851316996765137Q87.02077065429688,14.573316996765136,86.70977065429688,14.333816996765137Q86.39867065429686,14.094316996765137,86.05907065429687,13.897416996765136L65.11877065429687,1.7564019967651368Q64.94817065429687,1.6575369967651368,64.77157065429688,1.5700769967651367Q64.59497065429687,1.4826159967651367,64.41297065429687,1.4069369967651366Q64.23097065429687,1.3312579967651368,64.04437065429687,1.2676879967651367Q63.85777065429687,1.2041169967651366,63.66747065429688,1.1529279967651367Q63.477070654296874,1.1017389967651368,63.28377065429687,1.0631529967651367Q63.09047065429688,1.0245666967651368,62.89507065429687,0.9987497967651368Q62.699670654296874,0.9729329967651367,62.502970654296874,0.9599966967651368Q62.30637065429687,0.9470603467651367,62.10927065429688,0.9470603467651367Q61.912070654296876,0.9470603467651367,61.71547065429688,0.9599966967651368Q61.51877065429687,0.9729329967651367,61.32337065429687,0.9987497967651368Q61.127970654296874,1.0245666967651368,60.93467065429687,1.0631529967651367Q60.74137065429687,1.1017389967651368,60.550970654296876,1.1529279967651367Q60.360670654296875,1.2041169967651366,60.17407065429688,1.2676879967651367Q59.987570654296874,1.3312579967651368,59.80557065429687,1.4069369967651366Q59.62357065429687,1.4826159967651367,59.44687065429687,1.5700769967651367Q59.27027065429688,1.6575369967651368,59.099770654296876,1.7564019967651368L38.159380654296875,13.897416996765136Q37.81976065429687,14.094316996765137,37.50869065429688,14.333816996765137Q37.19763065429687,14.573316996765136,36.920420654296876,14.851316996765137Q36.64321065429687,15.129216996765138,36.40458065429687,15.440916996765136Q36.165957654296875,15.752716996765137,35.96998265429688,16.092816996765137Q35.774007654296874,16.433016996765136,35.62402565429687,16.795816996765137Q35.47404365429688,17.158616996765137,35.372611654296875,17.537816996765137Q35.27117965429687,17.91701699676514,35.22002815429688,18.306316996765137Q35.16887617129687,18.695516996765136,35.16887617129687,19.088116996765137L35.16887712429688,43.414016996765135Q35.16887712429688,43.806616996765136,35.22002905429687,44.19581699676514Q35.27118065429688,44.58511699676514,35.37261265429687,44.964316996765135Q35.474044654296875,45.34351699676514,35.62402665429688,45.70631699676514Q35.77400865429688,46.06911699676514,35.969983654296875,46.409316996765135Q36.16595865429687,46.749416996765135,36.40458065429687,47.06121699676514Q36.64321065429687,47.372916996765134,36.920420654296876,47.65081699676514Q37.19763065429687,47.928816996765136,37.508700654296874,48.168316996765135Q37.81976065429687,48.407816996765135,38.159380654296875,48.604716996765134L59.099770654296876,60.74571699676514Q59.27027065429688,60.84461699676514,59.44687065429687,60.932016996765135Q59.62357065429687,61.019516996765134,59.80557065429687,61.09521699676514Q59.987570654296874,61.170916996765136,60.17407065429688,61.234416996765134Q60.360670654296875,61.298016996765135,60.550970654296876,61.349216996765136Q60.74137065429687,61.40041699676514,60.93467065429687,61.43901699676513Q61.127970654296874,61.477616996765136,61.32337065429687,61.50341699676514Q61.51877065429687,61.529216996765136,61.71547065429688,61.54211699676514Q61.912070654296876,61.555116996765136,62.10927065429688,61.555116996765136Q62.30637065429687,61.555116996765136,62.502970654296874,61.54211699676514Q62.699670654296874,61.529216996765136,62.89507065429687,61.50341699676514Q63.09047065429688,61.47751699676514,63.28377065429687,61.43901699676513Q63.477070654296874,61.40041699676514,63.66747065429688,61.349216996765136Q63.85777065429687,61.298016996765135,64.04437065429687,61.234416996765134Q64.23097065429687,61.170916996765136,64.41297065429687,61.09521699676514Q64.59497065429687,61.019516996765134,64.77157065429688,60.932016996765135Q64.94817065429687,60.84461699676514,65.11877065429687,60.74571699676514L86.05907065429687,48.604716996765134Q86.39867065429686,48.407816996765135,86.70977065429688,48.168316996765135Q87.02077065429688,47.928816996765136,87.29807065429688,47.65081699676514Q87.57527065429687,47.372916996765134,87.81387065429688,47.06121699676514Q88.05247065429688,46.749416996765135,88.24847065429688,46.409316996765135Q88.44447065429688,46.06911699676514,88.59447065429688,45.70631699676514Q88.74437065429687,45.34351699676514,88.84587065429687,44.964316996765135Q88.94727065429687,44.58511699676514,88.99847065429688,44.19581699676514Q89.04957065429687,43.806616996765136,89.04957065429687,43.414016996765135L89.04957065429687,19.088116996765137ZM63.099070654296874,17.698116996765137C63.62237065429687,17.070516996765136,64.48457065429687,16.845716996765137,65.24577065429688,17.138416996765137C66.02277065429688,17.425616996765136,66.48567065429688,18.143716996765136,66.39277065429687,18.921116996765136L65.41527065429688,27.163616996765136L71.07247065429686,27.163616996765136C71.76987065429688,27.163616996765136,72.39947065429688,27.521916996765135,72.71197065429688,28.106816996765136C73.02607065429687,28.684216996765137,72.96857065429688,29.380116996765135,72.54977065429688,29.898316996765136L60.93617065429687,44.60971699676514C60.57497065429688,45.055316996765136,60.03237065429688,45.311516996765135,59.46177065429687,45.308516996765135C59.265670654296876,45.30561699676514,59.069570654296875,45.27591699676514,58.88237065429688,45.216716996765136C58.14957065429687,45.01391699676514,57.63647065429687,44.35201699676514,57.620270654296874,43.588016996765134L57.620270654296874,34.89981699676514L52.840370654296876,34.89981699676514C52.15917065429687,34.911716996765136,51.52517065429687,34.54601699676514,51.194970654296874,33.947816996765134C50.882070654296875,33.36701699676514,50.95277065429688,32.65341699676514,51.37337065429688,32.14591699676514L63.099070654296874,17.698116996765137Z" fill-rule="evenodd" fill="url(#master_svg2_10629_012297)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
energy-report/assets/avgMonthlyLeft.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="10" height="68" viewBox="0 0 10 68"><g><g><g style="opacity:0.5;"><path d="M0.44667340624999996,62.48654375L6.39281640625,67.26774375L7.34390640625,66.08484375L1.96445940625,61.75934375L1.96445940625,6.38178375L7.34390640625,2.05625975L6.39281640625,0.87342775L0.44667340624999996,5.65462375L0.44667340624999996,62.48654375Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g><g><rect x="5.75830078125" y="0.4765625" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><rect x="5.75830078125" y="64.4921875" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
energy-report/assets/avgMonthlyRight.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="10" height="68" viewBox="0 0 10 68"><g transform="matrix(-1,0,0,1,20,0)"><g><g style="opacity:0.5;"><path d="M10.44667340625,62.48654375L16.39281640625,67.26774375L17.34390640625,66.08484375L11.96445940625,61.75934375L11.96445940625,6.38178375L17.34390640625,2.05625975L16.39281640625,0.87342775L10.44667340625,5.65462375L10.44667340625,62.48654375Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g><g><rect x="15.7587890625" y="0.4765625" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><rect x="15.7587890625" y="64.4921875" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
energy-report/assets/textBoxBg.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="1169" height="40" viewBox="0 0 1169 40"><defs><linearGradient x1="1" y1="0.5" x2="0" y2="0.5" id="master_svg0_19847_82606"><stop offset="0%" stop-color="#5CB3FF" stop-opacity="0"/><stop offset="100%" stop-color="#5CB3FF" stop-opacity="1"/></linearGradient></defs><g style="opacity:0.20000000298023224;"><rect x="0" y="0" width="1169" height="40" rx="20" fill="url(#master_svg0_19847_82606)" fill-opacity="1"/></g></svg>
\ No newline at end of file
energy-report/index.css
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
html, html,
body { body {
height: 100%; height: 100%;
} }
.energy-wrap { .energy-wrap {
height: 100%; height: 100%;
background-color: #152235; background-color: #152235;
padding: 0 4vw 0 4vw; padding: 0 4vw 0 4vw;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.energy-wrap .flex { .energy-wrap .flex {
display: block; display: block;
} }
.energy-wrap .flex .right { .energy-wrap .flex .right {
width: 100%; width: 100%;
} }
.energy-wrap .header { .energy-wrap .header {
height: 4vh; height: 4vh;
font-size: 18px; font-size: 18px;
} }
.top-15-wrap > .items { .top-15-wrap > .items {
height: 56px; height: 56px;
} }
.top-15-wrap > .items .company-name { .top-15-wrap > .items .company-name {
flex: 1; flex: 1;
} }
.top-15-wrap > .items .process { .top-15-wrap > .items .process {
position: absolute !important; position: absolute !important;
left: 50px; left: 50px;
height: 20px; height: 20px;
top: 44px; top: 44px;
width: calc(100% - 70px); width: calc(100% - 70px);
margin-right: 0 !important; margin-right: 0 !important;
} }
.production-portrait .popup { .production-portrait .popup {
width: 100%; width: 100%;
} }
} }
.flex { .flex {
display: flex; display: flex;
} }
.block-bg { .block-bg {
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
} }
.header { .header {
height: 6vh; height: 6vh;
width: 60vw; width: 60vw;
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%;
position: relative; position: relative;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.time { .time {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.month-check { .month-check {
position: relative; position: relative;
background-color: #152235; background-color: #152235;
outline: none; outline: none;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
width: 100px; width: 100px;
padding: 6px 0; padding: 6px 0;
} }
.month-check::-webkit-calendar-picker-indicator { .month-check::-webkit-calendar-picker-indicator {
position: absolute; position: absolute;
right: 0; right: 0;
padding-left: 100%; padding-left: 100%;
} }
.title { .title {
color: #fff; color: #fff;
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.title > img { .title > img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 4px; margin-right: 10px;
} }
.chart-wrap { .chart-wrap {
} }
.echarts-box { .echarts-box {
width: 100%; width: 100%;
height: 400px; height: 400px;
/* height: 30vh; */ /* height: 30vh; */
} }
.gonglv { .gonglv {
height: 30vh; height: 30vh;
} }
.echarts-box1 { .echarts-box1 {
flex: 1; flex: 1;
} }
.echarts-box1#distribution-charts{ .echarts-box1#distribution-charts {
height: 30vh; height: 30vh;
} }
.right { .right {
width: 40vw; width: 40vw;
height: 30vh; height: 30vh;
} }
.text-overflow { .text-overflow {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.top-15-wrap { .top-15-wrap {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
.top-15-wrap > .items { .top-15-wrap > .items {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
margin-bottom: 4px; margin-bottom: 4px;
display: flex; display: flex;
padding: 12px 20px; padding: 12px 20px;
color: #fff; color: #fff;
position: relative; position: relative;
} }
.top-15-wrap > .items .index { .top-15-wrap > .items .index {
width: 22px; width: 22px;
height: 18px; height: 18px;
flex-shrink: 0; flex-shrink: 0;
} }
.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;
} }
.top-15-wrap > .items .process { .top-15-wrap > .items .process {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
position: relative; position: relative;
} }
.top-15-wrap > .items .process > span { .top-15-wrap > .items .process > span {
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: "";
display: flex; display: flex;
width: 70%; width: 70%;
position: absolute; position: absolute;
background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1)); background: linear-gradient(
to right,
rgba(0, 216, 255, 1),
rgba(0, 182, 255, 1)
);
} }
.top-15-wrap > .items .process::after { .top-15-wrap > .items .process::after {
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: "";
display: flex; display: flex;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.top-15-wrap .items .unit { .top-15-wrap .items .unit {
width: 140px; width: 140px;
text-align: right; text-align: right;
} }
.top-15-wrap .items .unit > span { .top-15-wrap .items .unit > span {
/* font-size: 14px; */ /* font-size: 14px; */
} }
.distribution-wrap { .distribution-wrap {
} }
.production-portrait { .production-portrait {
} }
.production-portrait > div { .production-portrait > div {
width: calc(100% / 2 - 10px); width: calc(100% / 2 - 10px);
height: 300px; height: 300px;
display: inline-flex; display: inline-flex;
} }
.popup { .popup {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.popup > span { .popup > span {
position: absolute; position: absolute;
background-color: rgba(52, 69, 94, 1); background-color: rgba(52, 69, 94, 1);
border: 1px solid rgba(103, 120, 144, 1); border: 1px solid rgba(103, 120, 144, 1);
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
white-space: wrap; white-space: wrap;
text-align: center; text-align: center;
} }
.popup > span:nth-of-type(1) { .popup > span:nth-of-type(1) {
left: 20%; left: 20%;
top: 38%; top: 38%;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.popup > span:nth-of-type(2) { .popup > span:nth-of-type(2) {
left: 55%; left: 55%;
top: 5%; top: 5%;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.popup > span:nth-of-type(3) { .popup > span:nth-of-type(3) {
left: 70%; left: 70%;
top: 26%; top: 26%;
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.popup > div:nth-of-type(1) { .popup > div:nth-of-type(1) {
position: relative; position: relative;
width: 110px; width: 110px;
height: 110px; height: 110px;
} }
.popup > div:nth-of-type(1) > span { .popup > div:nth-of-type(1) > span {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(92, 179, 255, 1), rgba(8, 86, 155, 1)); background: linear-gradient(
position: absolute; to bottom,
border-radius: 50%; rgba(92, 179, 255, 1),
z-index: 1; rgba(8, 86, 155, 1)
color: #fff; );
display: flex; position: absolute;
align-items: center; border-radius: 50%;
justify-content: center; z-index: 1;
font-size: 14px; color: #fff;
padding: 20px; display: flex;
box-sizing: border-box; align-items: center;
white-space: wrap; justify-content: center;
text-align: center; font-size: 14px;
padding: 20px;
box-sizing: border-box;
white-space: wrap;
text-align: center;
} }
.popup > div:nth-of-type(1)::before { .popup > div:nth-of-type(1)::before {
position: absolute; position: absolute;
content: ''; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(52, 69, 94, 1); background-color: rgba(52, 69, 94, 1);
left: -10px; left: -10px;
top: -10px; top: -10px;
border-radius: 50%; border-radius: 50%;
} }
.popup > div:nth-of-type(1)::after { .popup > div:nth-of-type(1)::after {
position: absolute; position: absolute;
content: ''; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(52, 69, 94, 1); background-color: rgba(52, 69, 94, 1);
left: 10px; left: 10px;
top: 10px; top: 10px;
border-radius: 50%; border-radius: 50%;
} }
.popup.right > div:nth-of-type(1) > span { .popup.right > div:nth-of-type(1) > span {
background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1)); background: linear-gradient(
to bottom,
rgba(246, 133, 0, 1),
rgba(168, 91, 0, 1)
);
} }
.popup.right > div:nth-of-type(1)::before { .popup.right > div:nth-of-type(1)::before {
background: rgba(246, 133, 0, 0.3); background: rgba(246, 133, 0, 0.3);
} }
.right.popup > div:nth-of-type(1)::after { .right.popup > div:nth-of-type(1)::after {
background: rgba(246, 133, 0, 0.3); background: rgba(246, 133, 0, 0.3);
} }
.popup > span:nth-of-type(4) { .popup > span:nth-of-type(4) {
left: 62%; left: 62%;
top: 68%; top: 68%;
width: 42px; width: 42px;
height: 42px; height: 42px;
} }
.popup > span:nth-of-type(5) { .popup > span:nth-of-type(5) {
left: 18%; left: 18%;
top: 68%; top: 68%;
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.echarts-title { .echarts-title {
width: 211px; width: 211px;
height: 25px; height: 25px;
} }
.echarts-title img { .echarts-title img {
width: 100%; width: 100%;
} }
.echarts-title-repair { .echarts-title-repair {
padding: 3%; padding: 3%;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
} }
.echarts-title-content { .echarts-title-content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.echarts-title-top { .echarts-title-top {
background: url('../assets/contract-bg.png') no-repeat; background: url("../assets/contract-bg.png") no-repeat;
width: 208px; width: 208px;
height: 208px; height: 208px;
background-size: cover; background-size: cover;
} }
.echarts-title-repair-top { .echarts-title-repair-top {
width: 208px; width: 208px;
height: 208px; height: 208px;
} }
.echarts-title-repair-top2 { .echarts-title-repair-top2 {
height: 228px; height: 228px;
width: 100%; width: 100%;
} }
.echarts-title-repair-left { .echarts-title-repair-left {
margin-right: 3%; margin-right: 3%;
} }
.echarts-title-repair-list { .echarts-title-repair-list {
display: flex; display: flex;
margin-top: 13px; margin-top: 13px;
} }
.echarts-title-repair-list img { .echarts-title-repair-list img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 3px; margin-top: 3px;
} }
.echarts-title-repair-list-right { .echarts-title-repair-list-right {
margin-left: 13px; margin-left: 13px;
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;
} }
.echarts-title-repair-list-right-red { .echarts-title-repair-list-right-red {
color: rgba(255, 100, 100, 1); color: rgba(255, 100, 100, 1);
} }
.chart-desc { .chart-desc {
position: relative; position: relative;
margin-top: -15px; margin-top: -15px;
} }
.chart-desc img { .chart-desc img {
width: 165px; width: 165px;
height: 18px; height: 18px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
} }
.chart-desc-text { .chart-desc-text {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
margin-left: 8px; margin-left: 8px;
margin-top: 4px; margin-top: 4px;
} }
.chart-desc-value { .chart-desc-value {
margin-left: 30px; margin-left: 30px;
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
text-align: right; text-align: right;
} }
.chart-desc-unfinished { .chart-desc-unfinished {
margin-top: 10px; margin-top: 10px;
} }
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
} }
.chart-desc-daily-legend { .chart-desc-daily-legend {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: rgba(92, 179, 255, 0.302); background: rgba(92, 179, 255, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #5cb3ff; border: 2px solid #5cb3ff;
margin-top: 12px; margin-top: 12px;
margin-left: 20px; margin-left: 20px;
} }
.chart-desc-handle-legend { .chart-desc-handle-legend {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: rgba(255, 100, 100, 0.302); background: rgba(255, 100, 100, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #ff6464; border: 2px solid #ff6464;
margin-top: 12px; margin-top: 12px;
margin-left: 20px; margin-left: 20px;
} }
.will-finished { .will-finished {
background: rgba(237, 241, 243, 0.302); background: rgba(237, 241, 243, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #e9eff2; border: 2px solid #e9eff2;
margin-top: 12px; margin-top: 12px;
margin-left: 20px; margin-left: 20px;
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
.electricity-content { .electricity-content {
height: 236px; height: 236px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
margin-bottom: 36px; margin-bottom: 36px;
} }
.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;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
padding: 16px 0 0 24px; padding: 16px 0 0 24px;
} }
.chart-desc-icon { .chart-desc-icon {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: rgba(246, 133, 0, 0.302); background: rgba(246, 133, 0, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #f68500; border: 2px solid #f68500;
margin-top: 12px; margin-top: 12px;
margin-left: 20px; margin-left: 20px;
} }
.chart-desc-icon2 { .chart-desc-icon2 {
background: rgba(63, 241, 217, 0.302); background: rgba(63, 241, 217, 0.302);
border: 2px solid #3ff1d9; border: 2px solid #3ff1d9;
} }
.chart-desc-icon3 { .chart-desc-icon3 {
background: rgba(255, 100, 100, 0.302); background: rgba(255, 100, 100, 0.302);
border: 2px solid #ff6464; border: 2px solid #ff6464;
} }
.chart-desc-icon4 { .chart-desc-icon4 {
background: rgba(92, 179, 255, 0.302); background: rgba(92, 179, 255, 0.302);
border: 2px solid #5cb3ff; border: 2px solid #5cb3ff;
} }
.echarts-box1-right { .echarts-box1-right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 50px; padding: 50px;
margin-top: 20px; margin-top: 20px;
} }
.invest-wrapper-content { .invest-wrapper-content {
display: flex; display: flex;
height: 68px; height: 68px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.invest-wrapper-content-first { .invest-wrapper-content-first {
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;
} }
.invest-wrapper-left-bracket img { .invest-wrapper-left-bracket img {
width: 100%; width: 100%;
} }
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
width: 100%; width: 100%;
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #c8565b; color: #c8565b;
} }
.analysis-content { .analysis-content {
height: 380px; height: 380px;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
margin: 27px 0 37px; margin: 27px 0 37px;
}
.timePeriod {
margin-bottom: 19px;
}
.timePeriod-textBox {
width: 100%;
height: 28px;
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: 30px;
}
.timePeriod-textBox-text {
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 8px;
}
.echarts-timePeriod {
width: 100%;
height: 380px;
background: rgba(8, 16, 24, 0.27);
padding: 20px 20px 20px 0;
margin-bottom: 24px;
}
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
height: 200px;
width: calc(100% - 2.4vw);
margin-bottom: 24px;
padding: 16px 30px 0 30px;
}
.avgMonthlyBox-title {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 22px;
letter-spacing: 1px;
margin-bottom: 39px;
}
.avgMonthlyBox-content {
display: flex;
width: 100%;
}
.content-item {
width: 15%;
padding-top: 17px;
text-align: center;
}
.item-text1 {
font-size: 14px;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 22px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.item-text2 {
font-size: 24px;
font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
font-weight: 400;
color: #ffffff;
line-height: 27px;
margin-bottom: 10px;
}
.content-item-r {
width: 26%;
display: flex;
margin-left: 5%;
}
.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-red{
color: #FF6464;
} }
energy-report/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"
/>
<title>能耗报告</title>
<script src="https://cdn.bootcss.com/echarts/5.2.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="./index.css" />
</head>
<head> <body>
<meta charset="UTF-8"> <div class="energy-wrap">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <div class="header">成阿园区月度用电报告</div>
<title>能耗报告</title> <!-- 用电趋势 -->
<script src="https://cdn.bootcss.com/echarts/5.2.0/echarts.min.js"></script> <div class="chart-wrap">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <div class="title">
<link rel="stylesheet" href="./index.css"> <img src="./assets/title-arrow.png" alt="" />
</head> 用电趋势
<body>
<div class="energy-wrap">
<div class="header">
成阿园区月度用电报告
</div>
<!-- 用电趋势 -->
<div class="chart-wrap">
<div class="title">
<img src="./assets/title-arrow.png" alt="">
用电趋势
</div>
<div id="repair-require" class="echarts-box"></div>
</div>
<!-- 企业用电量排名TOP15 -->
<div class="top-15">
<div class="title">
<img src="./assets/title-arrow.png" alt="">
企业用电量排名TOP15
</div>
<div class="top-15-wrap">
<div class="items">
<span class="index">01</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>
<div class="items"> <div id="repair-require" class="echarts-box"></div>
<span class="index">02</span> </div>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p> <!-- 企业用电量排名TOP15 -->
<p class="process"><span style="width: 70%;"></span></p> <div class="top-15">
<p class="unit text-overflow">90000<span>MWh</span></p> <div class="title">
<img src="./assets/title-arrow.png" alt="" />
企业用电量排名TOP15
</div> </div>
<div class="items"> <div class="top-15-wrap">
<span class="index">03</span> <div class="items">
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p> <span class="index">01</span>
<p class="process"><span style="width: 70%;"></span></p> <p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="unit text-overflow">90000<span>MWh</span></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">02</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">03</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> </div>
</div> </div>
</div> <!-- 企业生产画像 -->
<!-- 企业生产画像 --> <div class="production-portrait">
<div class="production-portrait"> <div class="left popup">
<div class="left popup"> <span></span>
<span></span> <span></span>
<span></span> <span>白天8小时制</span>
<span>白天8小时制</span> <div><span>24小时工作制</span></div>
<div><span>24小时工作制</span></div> <span></span>
<span></span> <span>非规律生产</span>
<span>非规律生产</span> </div>
</div> <div class="right popup">
<div class="right popup"> <span></span>
<span></span> <span></span>
<span></span> <span>白天8小时制</span>
<span>白天8小时制</span> <div><span>24小时工作制</span></div>
<div><span>24小时工作制</span></div> <span></span>
<span></span> <span>非规律生产</span>
<span>非规律生产</span> </div>
</div> </div>
</div> <!-- 月度用电分析 -->
<!-- 月度用电分析 -->
<!-- 功率因数企业分布 --> <!-- 功率因数企业分布 -->
<div class="distribution"> <div class="distribution">
<div class="title"> <div class="title">
<img src="./assets/title-arrow.png" alt=""> <img src="./assets/title-arrow.png" alt="" />
功率因数企业分布 功率因数企业分布
</div> </div>
<div class="distribution-wrap"> <div class="distribution-wrap">
<div id="distribution-charts" class="echarts-box1"></div> <div id="distribution-charts" class="echarts-box1"></div>
<div class="distribution-right"></div> <div class="distribution-right"></div>
</div>
</div> </div>
</div>
<!-- 月度功率因数趋势 -->
<!-- 企业生产时段分析 - 尖峰平谷各时段生产状况 -->
<!-- 企业生产时段分析 - 尖峰平谷各时段集中生产 -->
<!-- 园区企业生产状态分析 --> <!-- 月度功率因数趋势 -->
<!--尖峰平谷各时段的企业用电量分析--> <!-- 分时段企业用电情况分析 -->
<div>尖峰平谷各时段的企业用电量分析</div> <div class="timePeriod">
<div class="flex analysis-content"> <div class="title">
<div id="repair-require8"></div> <img src="./assets/title-arrow.png" />
</div> 尖峰平谷各时段，进行生产的企业月度平均数
<!--用电结构--> </div>
<div class="flex electricity-content"> <div class="timePeriod-wrap">
<div class="echarts-box1"> <!-- 尖峰平谷各时段，进行生产的企业月度平均数 -->
<div class="electricity-content-title">用电结构</div> <div class="timePeriod-textBox">
<div class="echarts-title-content"> <span class="timePeriod-textBox-text">
<div class="echarts-title-top"> 尖峰平谷各时段，进行生产的企业月度平均数
<div id="repair-require9" class="echarts-title-repair-top"> </span>
</div>
</div> </div>
<div class="chart-desc"> <div id="timePeriod-barCharts-1" class="echarts-timePeriod"></div>
<div class="chart-desc-task"> <!-- 各时段生产企业 月度平均数(家) -->
<div class="chart-desc-icon"></div> <div class="avgMonthlyBox">
<div class="chart-desc-text">峰</div> <div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div>
<div class="chart-desc-value">29.61%</div> <div class="avgMonthlyBox-content">
<div class="chart-desc-value">29.61%</div> <img src="./assets/avgMonthlyIcon.svg" />
</div> <div class="content-item">
<div class="chart-desc-task chart-desc-unfinished"> <div class="item-text1">尖时</div>
<div class="chart-desc-icon chart-desc-icon2"></div> <div class="item-text2">205</div>
<div class="chart-desc-text">平</div> </div>
<div class="chart-desc-value">29.61%</div> <div class="content-item">
<div class="chart-desc-value">29.61%</div> <div class="item-text1">峰叫</div>
</div> <div class="item-text2">205</div>
<div class="chart-desc-task"> </div>
<div class="chart-desc-icon chart-desc-icon3"></div> <div class="content-item">
<div class="chart-desc-text">尖</div> <div class="item-text1">平叫</div>
<div class="chart-desc-value">2.61%</div> <div class="item-text2">205</div>
<div class="chart-desc-value">29.61%</div> </div>
</div> <div class="content-item">
<div class="chart-desc-task"> <div class="item-text1">谷叫</div>
<div class="chart-desc-icon chart-desc-icon4"></div> <div class="item-text2">205</div>
<div class="chart-desc-text">谷</div> </div>
<div class="chart-desc-value">29.61%</div> <div class="content-item-r">
<div class="chart-desc-value">29.61%</div> <img src="./assets/avgMonthlyLeft.svg" />
<div class="item-r-text">
可以看出大部分企业集中生产在<span class="item-r-text-red">10点~12点</span>时段比较集中
</div>
<img src="./assets/avgMonthlyRight.svg" />
</div>
</div> </div>
</div> </div>
</div> <!-- 尖峰平谷各时段，集中生产的企业月度平均数 -->
<!-- 各时段集中生产企业 月度平均数(家) -->
<div class="avgMonthlyBox">
</div> <div class="avgMonthlyBox-title">各时段集中生产企业 月度平均数(家)</div>
<div class="echarts-box1 echarts-box1-right"> <div class="avgMonthlyBox-content">
<div class="invest-wrapper-content"> <img src="./assets/avgMonthlyIcon.svg" />
<div class="invest-wrapper-left-bracket"> <div class="content-item">
<img src="../assets/bracket-left.png" /> <div class="item-text1">尖时</div>
</div> <div class="item-text2">205</div>
<div class="invest-wrapper-content-first"> </div>
<span class="invest-wrapper-content-first-text">可以看出尖、峰时段的用电量已经超过总用电量的</span> <div class="content-item">
<span class="invest-wrapper-content-customers">12%</span> <div class="item-text1">峰叫</div>
<span class="invest-wrapper-content-second-text">在电价上有一定的优化空间。</span> <div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">平叫</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">谷叫</div>
<div class="item-text2">205</div>
</div>
<div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg" />
<div class="item-r-text">
可以看出大部分企业集中生产在<span class="item-r-text-red">10点~12点</span>时段比较集中
</div>
<img src="./assets/avgMonthlyRight.svg" />
</div>
</div>
</div> </div>
<div class="invest-wrapper-right-bracket"> <!-- 尖峰平谷各时段的企业用电量分析 -->
<img src="../assets/bracket-right.png" /> <div class="timePeriod-textBox">
<span class="timePeriod-textBox-text">
尖峰平谷各时段的企业用电量分析
</span>
</div> </div>
<div id="timePeriod-barCharts-3" class="echarts-timePeriod"></div>
</div> </div>
</div> </div>
</div> <!-- 企业生产时段分析 - 尖峰平谷各时段集中生产 -->
<!--园区企业生产状态/企业生产工作制分析-->
<div class="flex"> <!-- 园区企业生产状态分析 -->
<div class="echarts-box1">
<div class="echarts-title"><img src="./assets/pic10.png"></div> <!--尖峰平谷各时段的企业用电量分析-->
<div class="echarts-title-repair echarts-title-repair-left">
<!--用电结构-->
<div class="flex electricity-content">
<div class="echarts-box1">
<div class="electricity-content-title">用电结构</div>
<div class="echarts-title-content"> <div class="echarts-title-content">
<div class="echarts-title-top"> <div class="echarts-title-top">
<div id="repair-require10" class="echarts-title-repair-top"> <div id="repair-require9" class="echarts-title-repair-top"></div>
</div>
</div> </div>
<div class="chart-desc"> <div class="chart-desc">
<div class="chart-desc-task"> <div class="chart-desc-task">
<div class="chart-desc-daily-legend"></div> <div class="chart-desc-icon"></div>
<div class="chart-desc-text">达产</div> <div class="chart-desc-text">峰</div>
<div class="chart-desc-value">18</div> <div class="chart-desc-value">29.61%</div>
<img src="../assets/desc-line.png" /> <div class="chart-desc-value">29.61%</div>
</div> </div>
<div class="chart-desc-task chart-desc-unfinished"> <div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div> <div class="chart-desc-icon chart-desc-icon2"></div>
<div class="chart-desc-text">超产</div> <div class="chart-desc-text">平</div>
<div class="chart-desc-unfinished-value">5</div> <div class="chart-desc-value">29.61%</div>
<img src="../assets/desc-line.png" /> <div class="chart-desc-value">29.61%</div>
</div>
<div class="chart-desc-task">
<div class="chart-desc-icon chart-desc-icon3"></div>
<div class="chart-desc-text">尖</div>
<div class="chart-desc-value">2.61%</div>
<div class="chart-desc-value">29.61%</div>
</div> </div>
<div class="chart-desc-task chart-desc-bottom"> <div class="chart-desc-task">
<div class="will-finished"></div> <div class="chart-desc-icon chart-desc-icon4"></div>
<div class="chart-desc-text">不景气</div> <div class="chart-desc-text">谷</div>
<div class="chart-desc-unfinished-value">7</div> <div class="chart-desc-value">29.61%</div>
<img src="../assets/desc-line.png" /> <div class="chart-desc-value">29.61%</div>
</div> </div>
</div> </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">880家</span>企业在<span
class="echarts-title-repair-list-right-red">2023年5月</span>已达到往期正常生产水平，<span
class="echarts-title-repair-list-right-red">占比61%</span></span></div>
</div> </div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> </div>
<div class="echarts-title-repair-list-right"><span>超产率：一共有<span <div class="echarts-box1 echarts-box1-right">
class="echarts-title-repair-list-right-red">234家</span>企业<span <div class="invest-wrapper-content">
class="echarts-title-repair-list-right-red">2023年5月</span>用电量较以往三个月的平均值高出15%，生产势头旺盛，<span <div class="invest-wrapper-left-bracket">
class="echarts-title-repair-list-right-red">占比32%</span></span></div> <img src="../assets/bracket-left.png" />
</div> </div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> <div class="invest-wrapper-content-first">
<div class="echarts-title-repair-list-right"><span>不景气率：一共有<span <span class="invest-wrapper-content-first-text"
class="echarts-title-repair-list-right-red">120家</span>企业<span >可以看出尖、峰时段的用电量已经超过总用电量的</span
class="echarts-title-repair-list-right-red">2023年5月</span>用电量较往前三个月的平均值减少15%，<span >
class="echarts-title-repair-list-right-red">占比6%</span>，需要重点关注其生产情况</span></div> <span class="invest-wrapper-content-customers">12%</span>
<span class="invest-wrapper-content-second-text"
>在电价上有一定的优化空间。</span
>
</div>
<div class="invest-wrapper-right-bracket">
<img src="../assets/bracket-right.png" />
</div>
</div> </div>
</div> </div>
</div> </div>
<!--园区企业生产状态/企业生产工作制分析-->
<div class="flex">
<div class="echarts-box1">
<div class="echarts-title"><img src="./assets/pic10.png" /></div>
<div class="echarts-title-repair echarts-title-repair-left">
<div class="echarts-title-content">
<div class="echarts-title-top">
<div
id="repair-require10"
class="echarts-title-repair-top"
></div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">达产</div>
<div class="chart-desc-value">18</div>
<img src="../assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">超产</div>
<div class="chart-desc-unfinished-value">5</div>
<img src="../assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-bottom">
<div class="will-finished"></div>
<div class="chart-desc-text">不景气</div>
<div class="chart-desc-unfinished-value">7</div>
<img src="../assets/desc-line.png" />
</div>
</div>
</div>
<div class="echarts-box1"> <div class="echarts-title-repair-list">
<div class="echarts-title"><img src="./assets/pic11.png"></div> <img src="./assets/icon1.png" />
<div class="echarts-title-repair"> <div class="echarts-title-repair-list-right">
<div id="repair-require11" class="echarts-title-repair-top2"></div> <span
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> >达产率：一共有<span
<div class="echarts-title-repair-list-right"><span>白天8小时工作制的企业一共有<span class="echarts-title-repair-list-right-red"
class="echarts-title-repair-list-right-red">112家，占比25%。</span>这类企业一共用电量是<span >880家</span
class="echarts-title-repair-list-right-red">894486KWh，占比34%。</span> </span></div> >企业在<span class="echarts-title-repair-list-right-red"
</div> >2023年5月</span
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> >已达到往期正常生产水平，<span
<div class="echarts-title-repair-list-right"><span>24小时不间断生产的企业一共有<span class="echarts-title-repair-list-right-red"
class="echarts-title-repair-list-right-red">356家，占比3.5%。</span>这类企业一共用电量是<span >占比61%</span
class="echarts-title-repair-list-right-red">578900KWh，占比11%。</span> </span></div> ></span
</div> >
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> </div>
<div class="echarts-title-repair-list-right"><span>非规律生产的企业一共有<span </div>
class="echarts-title-repair-list-right-red">45家，占比11%。</span>这类企业一共用电量是<span <div class="echarts-title-repair-list">
class="echarts-title-repair-list-right-red">905725KWh，占比54%。</span> </span></div> <img src="./assets/icon1.png" />
<div class="echarts-title-repair-list-right">
<span
>超产率：一共有<span
class="echarts-title-repair-list-right-red"
>234家</span
>企业<span class="echarts-title-repair-list-right-red"
>2023年5月</span
>用电量较以往三个月的平均值高出15%，生产势头旺盛，<span
class="echarts-title-repair-list-right-red"
>占比32%</span
></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"
>120家</span
>企业<span class="echarts-title-repair-list-right-red"
>2023年5月</span
>用电量较往前三个月的平均值减少15%，<span
class="echarts-title-repair-list-right-red"
>占比6%</span
>，需要重点关注其生产情况</span
>
</div>
</div>
</div> </div>
</div> </div>
<div class="echarts-box1">
<div class="echarts-title"><img src="./assets/pic11.png" /></div>
<div class="echarts-title-repair">
<div id="repair-require11" class="echarts-title-repair-top2"></div>
<div class="echarts-title-repair-list">
<img src="./assets/icon1.png" />
<div class="echarts-title-repair-list-right">
<span
>白天8小时工作制的企业一共有<span
class="echarts-title-repair-list-right-red"
>112家，占比25%。</span
>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red"
>894486KWh，占比34%。</span
>
</span>
</div>
</div>
<div class="echarts-title-repair-list">
<img src="./assets/icon1.png" />
<div class="echarts-title-repair-list-right">
<span
>24小时不间断生产的企业一共有<span
class="echarts-title-repair-list-right-red"
>356家，占比3.5%。</span
>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red"
>578900KWh，占比11%。</span
>
</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"
>45家，占比11%。</span
>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red"
>905725KWh，占比54%。</span
>
</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </body>
</body> <script>
<script> window.onload = function () {
window.onload = function () { var myChart8, myChart9, myChart10, myChart11;
var myChart8, myChart9, myChart10, myChart11; const myChart = {};
const myChart = {} function initEcharts(el, option) {
function initEcharts(el, option) { var ele = echarts.init(document.querySelector(el));
var ele = echarts.init(document.querySelector(el)); myChart[el] = ele;
myChart[el] = ele; option && ele.setOption({ ...option });
option && ele.setOption({ ...option })
}
const getOption = () => {
return {
} }
} const getOption = () => {
const getEcharts = () => { return {};
let option = { };
tooltip: { const getEcharts = () => {
trigger: 'axis', let option = {
axisPointer: { type: 'shadow' } tooltip: {
}, trigger: "axis",
legend: { axisPointer: { type: "shadow" },
show: true,
itemWidth: 14,
top: 0,
textStyle: {
color: "#fff"
}, },
}, legend: {
dataZoom: [//给x轴设置滚动条
{
type: 'slider',//slider表示有滑动块的，inside表示内置的
// startValue: 8,//可用于设置开始显示的柱子的长度
// endValue: 1,//可用于设置结束显示的柱子的长度
start: 80,//默认为0 可设置滚动条从在后进行展示
end: 100,//默认为100
show: true, show: true,
xAxisIndex: [0], itemWidth: 14,
handleSize: 0,//滑动条的 左右2个滑动条的大小 top: 0,
height: 8,//组件高度 textStyle: {
left: '10%', //左边的距离 color: "#fff",
right: '10%',//右边的距离
bottom: -2,//右边的距离
borderColor: "#F4F4F4",
fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
handleStyle: {
borderRadius: '20',
}, },
}, },
//下面这个属性是里面拖到 dataZoom: [
{ //给x轴设置滚动条
type: 'inside', {
show: true, type: "slider", //slider表示有滑动块的，inside表示内置的
xAxisIndex: [0], // startValue: 8,//可用于设置开始显示的柱子的长度
start: 0,//默认为1 // endValue: 1,//可用于设置结束显示的柱子的长度
end: 100,//默认为100 start: 80, //默认为0 可设置滚动条从在后进行展示
moveOnMouseWheel: false, end: 100, //默认为100
preventDefaultMouseMove: false,
},
],
xAxis: [
{
axisLine: {
show: true, show: true,
lineStyle: { xAxisIndex: [0],
width: 1, handleSize: 0, //滑动条的 左右2个滑动条的大小
color: 'rgba(8, 16, 24, 0.27)' height: 8, //组件高度
left: "10%", //左边的距离
right: "10%", //右边的距离
bottom: -2, //右边的距离
borderColor: "#F4F4F4",
fillerColor: "#E7E7E7",
backgroundColor: "#F4F4F4", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: "filter",
handleStyle: {
borderRadius: "20",
}, },
textStyle: {
color: '#fff',
fontSize: '10'
}
}, },
axisLabel: { //下面这个属性是里面拖到
textStyle: { {
color: 'rgba(255, 255, 255, 1)', type: "inside",
} show: true,
xAxisIndex: [0],
start: 0, //默认为1
end: 100, //默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
}, },
type: 'category', ],
data: ['2018年', '2019年', '2020年', '2021年', '2022年'], xAxis: [
}, {
{ axisLine: {
type: 'category', show: true,
show: false, lineStyle: {
data: ['2018年', '2019年', '2020年', '2021年', '2022年'] width: 1,
} color: "rgba(8, 16, 24, 0.27)",
], },
yAxis: [{ textStyle: {
name: '单位：MWh', color: "#fff",
alignWithLabel: true, fontSize: "10",
"position": "left", },
nameTextStyle: { },
color: '#fff', axisLabel: {
}, textStyle: {
type: 'value', color: "rgba(255, 255, 255, 1)",
splitLine: { },
show: true, },
lineStyle: { type: "category",
type: 'dashed',//线的类型 虚线0 data: ["2018年", "2019年", "2020年", "2021年", "2022年"],
opacity: 0.2//透明度
}, },
}, {
axisTick: { type: "category",
show: false show: false,
}, data: ["2018年", "2019年", "2020年", "2021年", "2022年"],
axisLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(8, 16, 24, 0.27)'
}, },
textStyle: { ],
color: '#fff', yAxis: [
fontSize: '10' {
} name: "单位：MWh",
alignWithLabel: true,
position: "left",
nameTextStyle: {
color: "#fff",
},
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed", //线的类型 虚线0
opacity: 0.2, //透明度
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: "rgba(8, 16, 24, 0.27)",
},
textStyle: {
color: "#fff",
fontSize: "10",
},
},
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
},
{
name: "同比%",
nameTextStyle: {
color: "#fff",
align: "left",
},
// nameLocation: 'end',
type: "value",
position: "right",
splitLine: { show: false },
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
},
],
grid: {
top: 30,
left: "1%",
right: "1%",
bottom: 20,
containLabel: true,
}, },
axisLabel: { series: [
textStyle: { {
color: 'rgba(255, 255, 255, 1)', name: "当年用电量",
} type: "bar",
barWidth: "20%",
barMaxWidth: "24",
yAxisIndex: 0,
data: [50, 110, 110, 210, 150],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(63, 241, 217, 0.3)" },
{ offset: 0, color: "rgba(63, 241, 217, 1)" },
]),
},
},
{
name: "去年用电量",
type: "bar",
yAxisIndex: 0,
barWidth: "20%",
barMaxWidth: "24",
data: [150, 90, 130, 80, 180],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(0, 221, 255, 0.3)" },
{ offset: 0, color: "rgba(0, 221, 255, 1)" },
]),
},
},
{
name: "同比",
type: "line",
data: [150, 90, 130, 80, 180],
symbol: "circle",
symbolSize: 8,
yAxisIndex: 1,
smooth: true,
itemStyle: {
normal: {
lineStyle: {
color: "rgba(255, 100, 100, 1)",
},
color: "rgba(255, 255, 255, 1)",
},
},
},
{
xAxisIndex: 1,
itemStyle: {
show: false,
color: "transparent",
opacity: 0, //透明度
},
showBackground: true,
data: [50, 110, 110, 210, 150], //这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
barWidth: "50%",
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("#repair-require", option);
};
getEcharts();
const getEcharts2 = () => {
var option = {
tooltip: {
//提示框组件
trigger: "axis",
tooltip: {
trigger: "axis",
axisPointer: {
//type: "shadow",
},
},
}, },
}, { grid: {
name: '同比%', left: "1%",
nameTextStyle: { right: "1%",
color: '#fff', bottom: "6%",
align: 'left', top: 30,
padding: "0 0 10 0",
containLabel: true,
}, },
// nameLocation: 'end', legend: {
type: 'value', show: true,
position: 'right', itemWidth: 14,
splitLine: { show: false }, top: 0,
axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', color: "#fff",
} },
}, },
} dataZoom: [
], //给x轴设置滚动条
grid: { {
top: 30, type: "slider", //slider表示有滑动块的，inside表示内置的
left: '1%', // startValue: 8,//可用于设置开始显示的柱子的长度
right: '1%', // endValue: 1,//可用于设置结束显示的柱子的长度
bottom: 20, start: 80, //默认为0 可设置滚动条从在后进行展示
containLabel: true, end: 100, //默认为100
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: "10%", //左边的距离
right: "10%", //右边的距离
bottom: -2, //右边的距离
borderColor: "#F4F4F4",
fillerColor: "#E7E7E7",
backgroundColor: "#F4F4F4", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: "filter",
handleStyle: {
borderRadius: "20",
},
},
//下面这个属性是里面拖到
{
type: "inside",
show: true,
xAxisIndex: [0],
start: 0, //默认为1
end: 100, //默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
},
],
xAxis: [
{
type: "category",
boundaryGap: true, //坐标轴两边留白
data: [
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"17:00",
"8:00",
],
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false,
},
},
],
yAxis: [
{
type: "value",
nameTextStyle: {
color: "#fff",
},
name: "企业数",
position: "left",
splitNumber: 5,
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ["#fff"],
opacity: 0.06,
},
},
},
{
type: "value",
nameTextStyle: {
color: "#fff",
},
name: "用电量",
position: "right",
splitNumber: 5,
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255, 1)",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ["#fff"],
opacity: 0.06,
},
},
},
],
series: [
{
name: "企业数",
yAxisIndex: 0,
type: "pictorialBar", //设置类型为象形柱状图
symbol: "roundRect", //图形类型，带圆角的矩形
symbolOffset: [-5, 0],
symbolMargin: "1", //图形垂直间隔
barWidth: "10%", //柱图宽度
barMaxWidth: "20%", //最大宽度
animationDelay: (dataIndex, params) => {
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(63, 241, 217, 0.20)",
},
{
offset: 1,
color: "#3FF1D9",
},
]),
},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [9, 5, 4, 2, 9, 5, 4, 2, 10000, 5],
animationEasing: "elasticOut", //动画效果
stack: "2",
},
{
name: "用电数",
yAxisIndex: 1,
type: "pictorialBar", //设置类型为象形柱状图
symbol: "roundRect", //图形类型，带圆角的矩形
barWidth: "10%", //柱图宽度
symbolOffset: [5, 0],
barMaxWidth: "20%", //最大宽度
symbolMargin: "1", //图形垂直间隔
animationDelay: (dataIndex, params) => {
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#7E4602",
},
{
offset: 1,
color: "#FF9615",
},
]),
},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [2.9, 5, 4.4, 2.7, 5.7, 9, 5, 4, 2, 4],
animationEasing: "elasticOut", //动画效果
stack: "1",
},
],
};
initEcharts("#distribution-charts", option);
};
getEcharts2();
//用电结构
var chartDom9 = document.getElementById("repair-require9");
myChart9 = echarts.init(chartDom9);
var option9;
option9 = {
tooltip: {
trigger: "item",
}, },
legend: false,
color: ["#F68500", "#3FF1D9", "#FF6464", "#00DDFF"],
series: [ series: [
{ {
name: '当年用电量', name: "",
type: 'bar', type: "pie",
barWidth: '20%', radius: ["40%", "60%"],
barMaxWidth: '24', hoverAnimation: false,
yAxisIndex: 0,
data: [50, 110, 110, 210, 150],
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ borderRadius: 10,
{ offset: 1, color: 'rgba(63, 241, 217, 0.3)' }, borderColor: "#202F41",
{ offset: 0, color: 'rgba(63, 241, 217, 1)' }, borderWidth: 3,
])
}, },
}, avoidLabelOverlap: false,
{ label: {
name: '去年用电量', show: false,
type: 'bar', position: "center",
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: '24',
data: [150, 90, 130, 80, 180],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: 'rgba(0, 221, 255, 0.3)' },
{ offset: 0, color: 'rgba(0, 221, 255, 1)' },
])
}, },
}, emphasis: {
{ label: {
name: '同比', show: true,
type: 'line', fontSize: 40,
data: [150, 90, 130, 80, 180], fontWeight: "bold",
symbol: 'circle', },
symbolSize: 8, },
yAxisIndex: 1, labelLine: {
smooth: true, show: false,
itemStyle: {
normal: {
lineStyle: {
color: 'rgba(255, 100, 100, 1)',
},
color: 'rgba(255, 255, 255, 1)',
}
}, },
data: [
{ value: 18, name: "峰" },
{ value: 5, name: "平" },
{ value: 7, name: "尖" },
{ value: 7, name: "谷" },
],
}, },
],
};
option9 && myChart9.setOption(option9);
//园区企业生产状态分析
var chartDom10 = document.getElementById("repair-require10");
myChart10 = echarts.init(chartDom10);
var option10;
option10 = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#5CB3FF", "#E86265", "#E9EFF2"],
series: [
{ {
xAxisIndex: 1, name: "",
type: "pie",
radius: ["40%", "60%"],
hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10,
borderColor: "#202F41",
borderWidth: 3,
},
avoidLabelOverlap: false,
label: {
show: false, show: false,
color: 'transparent', position: "center",
opacity: 0//透明度 },
}, emphasis: {
showBackground: true, label: {
data: [50, 110, 110, 210, 150],//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了 show: true,
barWidth: '50%', fontSize: 40,
backgroundStyle: { fontWeight: "bold",
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)' }, labelLine: {
])
},
z: 0,
tooltip: {
show: false, show: false,
trigger: 'axis',
type: 'none',
}, },
type: 'bar' data: [
} { value: 18, name: "达产" },
] { value: 5, name: "超产" },
{ value: 7, name: "不景气" },
],
},
],
}; };
initEcharts('#repair-require', option) option10 && myChart10.setOption(option10);
}
getEcharts();
const getEcharts2 = () => { //企业生产工作制分析
var option = { var chartDom11 = document.getElementById("repair-require11");
myChart11 = echarts.init(chartDom11);
var option11;
option11 = {
tooltip: { tooltip: {
//提示框组件 trigger: "axis",
trigger: 'axis', axisPointer: {
tooltip: { type: "cross",
trigger: "axis", crossStyle: {
axisPointer: { color: "#999",
//type: "shadow",
}, },
}, },
}, },
grid: {
left: '1%',
right: '1%',
bottom: '6%',
top: 30,
padding: '0 0 10 0',
containLabel: true,
},
legend: { legend: {
show: true, show: true,
itemWidth: 14,
top: 0,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
fontSize: 16,
}, },
itemHeight: 10,
itemWidth: 14,
}, },
dataZoom: [//给x轴设置滚动条
{
type: 'slider',//slider表示有滑动块的，inside表示内置的
// startValue: 8,//可用于设置开始显示的柱子的长度
// endValue: 1,//可用于设置结束显示的柱子的长度
start: 80,//默认为0 可设置滚动条从在后进行展示
end: 100,//默认为100
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: '10%', //左边的距离
right: '10%',//右边的距离
bottom: -2,//右边的距离
borderColor: "#F4F4F4",
fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
handleStyle: {
borderRadius: '20',
},
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100,//默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
},
],
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
boundaryGap: true, //坐标轴两边留白 data: ["非规律生产", "白天8小时工作制", "24小时工作制"],
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '17:00', '8:00'], axisPointer: {
axisLabel: { type: "shadow",
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
}, },
axisLine: { axisLabel: {
//坐标轴轴线相关设置 interval: 0,
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', fontSize: 14, //更改坐标轴文字大小
} color: "#fff",
}, padding: [0, 0, 0, 0],
splitLine: { },
//坐标轴在 grid 区域中的分隔线。
show: false,
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: "企业数：个",
nameTextStyle: { nameTextStyle: {
color: '#fff', color: "#fff",
fontSize: 16,
top: -10,
}, },
name: '企业数', min: 0,
position: 'left', max: 900,
splitNumber: 5, interval: 300,
axisLabel: { axisLabel: {
interval: 0,
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', fontSize: 14, //更改坐标轴文字大小
} color: "#fff",
}, padding: [0, 0, 0, 0],
axisLine: { },
show: false,
},
axisTick: {
show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ['#fff'], type: "dashed",
opacity: 0.06, color: "#354050",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
name: "用电量：KWh",
nameTextStyle: { nameTextStyle: {
color: '#fff', color: "#fff",
fontSize: 16,
}, },
name: '用电量', min: 0,
position: 'right', max: 900,
splitNumber: 5, interval: 300,
axisLabel: { axisLabel: {
interval: 0,
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 1)', fontSize: 14, //更改坐标轴文字大小
} color: "#fff",
}, padding: [0, 0, 0, 0],
axisLine: { },
show: false,
},
axisTick: {
show: false,
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: ['#fff'], type: "dashed",
opacity: 0.06, color: "#354050",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: '企业数', name: "企业数：个",
yAxisIndex: 0, type: "pictorialBar",
type: 'pictorialBar', //设置类型为象形柱状图 symbol: "rect",
symbol: 'roundRect', //图形类型，带圆角的矩形
symbolOffset: [-5, 0], data: [200, 400, 900],
symbolMargin: '1', //图形垂直间隔 symbolSize: ["55%", 10],
barWidth: '10%', //柱图宽度 symbolRepeat: true,
barMaxWidth: '20%', //最大宽度 symbolMargin: 2,
animationDelay: (dataIndex, params) => { barWidth: 40,
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ normal: {
{ color: {
offset: 0, type: "liner",
color: 'rgba(63, 241, 217, 0.20)', x: 1,
}, y: 0,
{ x2: 1,
offset: 1, y2: 1,
color: '#3FF1D9', colorStops: [
{
offset: 0,
color: "#FF9615", // 0% 处的颜色
},
{
offset: 1,
color: "#7E4602", // 100% 处的颜色
},
],
}, },
]) },
}, },
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [9, 5, 4, 2, 9, 5, 4, 2, 10000, 5],
animationEasing: 'elasticOut', //动画效果
stack: '2',
}, },
{ {
name: '用电数', name: "用电量：KWh",
type: "pictorialBar",
symbol: "rect",
barGap: "1%",
yAxisIndex: 1, yAxisIndex: 1,
type: 'pictorialBar', //设置类型为象形柱状图 data: [100, 300, 600],
symbol: 'roundRect', //图形类型，带圆角的矩形 symbolSize: ["55%", 10],
barWidth: '10%', //柱图宽度 symbolRepeat: true,
symbolOffset: [5, 0], symbolMargin: 2,
barMaxWidth: '20%', //最大宽度 barWidth: 40,
symbolMargin: '1', //图形垂直间隔
animationDelay: (dataIndex, params) => {
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ normal: {
{ color: {
offset: 0, type: "liner",
color: '#7E4602', x: 1,
}, y: 0,
{ x2: 1,
offset: 1, y2: 1,
color: '#FF9615', colorStops: [
{
offset: 0,
color: "#3FF1D9", // 0% 处的颜色
},
{
offset: 1,
color: "#0D332E", // 100% 处的颜色
},
],
}, },
]) },
}, },
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [2.9, 5, 4.4, 2.7, 5.7, 9, 5, 4, 2, 4],
animationEasing: 'elasticOut', //动画效果
stack: '1',
}, },
], ],
}; initEcharts('#distribution-charts', option) };
} option11 && myChart11.setOption(option11);
getEcharts2()
//用电结构
var chartDom9 = document.getElementById("repair-require9");
myChart9 = echarts.init(chartDom9)
var option9;
option9 = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#F68500", "#3FF1D9", "#FF6464", "#00DDFF"],
series: [
{ <!-- 分时段企业用电情况分析 -->
name: "", //尖峰平谷各时段，进行生产的企业月度平均数
type: "pie", const getBarEcharts = () => {
radius: ["40%", "60%"], let option = {
hoverAnimation: false, grid: {
itemStyle: { left: "3%",
borderRadius: 10, right: "1%",
borderColor: '#202F41', bottom: "3%",
borderWidth: 3, containLabel: true,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
}, },
emphasis: { xAxis: {
label: { type: "category",
show: true, data: [
fontSize: 40, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
fontWeight: "bold", 20, 21, 22, 23, 24,
],
axisLabel: {
interval: 0,
textStyle: {
fontSize: 12,
color: "#fff",
},
}, },
}, axisTick: {
labelLine: { show: false,
show: false, },
}, axisLine: {
data: [ show: false,
{ value: 18, name: "峰" },
{ value: 5, name: "平" },
{ value: 7, name: "尖" },
{ value: 7, name: "谷" },
],
},
],
};
option9 && myChart9.setOption(option9);
//园区企业生产状态分析
var chartDom10 = document.getElementById("repair-require10");
myChart10 = echarts.init(chartDom10)
var option10;
option10 = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#5CB3FF", "#E86265", "#E9EFF2"],
series: [
{
name: "",
type: "pie",
radius: ["40%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: '#202F41',
borderWidth: 3,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
}, },
}, },
labelLine: { yAxis: [
show: false, {
}, name: "企业数：个",
data: [ nameTextStyle: {
{ value: 18, name: "达产" }, color: "#fff",
{ value: 5, name: "超产" }, align: "center",
{ value: 7, name: "不景气" }, fontSize: 14,
},
type: "value",
axisLabel: {
textStyle: {
fontSize: 14,
color: "#fff",
fontWeight: 400,
},
},
},
], ],
}, tooltip: {
], trigger: "axis",
}; axisPointer: {
option10 && myChart10.setOption(option10); type: "shadow",
},
//企业生产工作制分析
var chartDom11 = document.getElementById("repair-require11");
myChart11 = echarts.init(chartDom11)
var option11;
option11 = {
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: ['非规律生产', '白天8小时工作制', '24小时工作制'],
axisPointer: {
type: 'shadow'
}, },
axisLabel: { legend: {
interval: 0, data: ["低谷时段", "平均时段", "高峰时段", "尖峰时段"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: { textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff", color: "#fff",
padding: [0, 0, 0, 0], },
},
}
}
],
yAxis: [
{
type: 'value',
name: '企业数：个',
nameTextStyle: {
color: "#fff",
fontSize: 16, top: -10,
}, },
min: 0, series: [
max: 900, {
interval: 300, name: "低谷时段",
axisLabel: { stack: "one",
interval: 0, data: [
textStyle: { 10,
fontSize: 14, //更改坐标轴文字大小 20,
color: "#fff", 10,
padding: [0, 0, 0, 0], 20,
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(0,221,255,0.2)` },
{ offset: 1, color: "#00DDFF" },
]),
},
barGap: "0%",
barWidth: 18,
},
{
name: "平均时段",
stack: "one",
data: [
"-",
"-",
"-",
"-",
13,
14,
16,
10,
21,
12,
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(63,241,217,0.2)` },
{ offset: 1, color: "#3FF1D9" },
]),
},
barGap: "0%",
barWidth: 18,
},
{
name: "高峰时段",
stack: "one",
data: [
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
24,
13,
12,
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(246,133,0,0.2)` },
{ offset: 1, color: "#F68500" },
]),
},
barGap: "0%",
barWidth: 18,
},
{
name: "尖峰时段",
stack: "one",
data: [
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
11,
12,
13,
11,
11,
11,
11,
11,
11,
11,
11,
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(255,100,100,0.2)` },
{ offset: 1, color: "#FF6464" },
]),
},
barGap: "0%",
barWidth: 18,
}, },
],
};
initEcharts("#timePeriod-barCharts-1", option);
};
getBarEcharts();
//尖峰平谷各时段的企业用电量分析
const getBarEcharts3 = () => {
let option = {
grid: {
left: "3%",
right: "1%",
bottom: "3%",
containLabel: true,
}, },
splitLine: { xAxis: {
show: true, type: "category",
lineStyle: { data: [
type: 'dashed', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
color: '#354050' 20, 21, 22, 23, 24,
} ],
} axisLabel: {
}, interval: 0,
{ textStyle: {
type: 'value', fontSize: 12,
name: '用电量：KWh', color: "#fff",
nameTextStyle: { },
color: "#fff", },
fontSize: 16 axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
name: "企业数：个",
nameTextStyle: {
color: "#fff",
align: "center",
fontSize: 14,
},
type: "value",
axisLabel: {
textStyle: {
fontSize: 14,
color: "#fff",
fontWeight: 400,
},
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
}, },
min: 0, legend: {
max: 900, data: ["低谷时段", "平均时段", "高峰时段", "尖峰时段"],
interval: 300, x: "right",
axisLabel: { y: "top",
interval: 0, itemWidth: 7,
itemHeight: 7,
textStyle: { textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff", color: "#fff",
padding: [0, 0, 0, 0],
}, },
}, },
splitLine: { series: [
show: false, {
lineStyle: { name: "低谷时段",
type: 'dashed', stack: "one",
color: '#354050' data: [
} 10,
} 20,
} 10,
], 20,
series: [ "-",
{ "-",
name: '企业数：个', "-",
type: 'pictorialBar', "-",
symbol: 'rect', "-",
"-",
data: [ "-",
200, 400, 900, "-",
], "-",
symbolSize: ['55%', 10], "-",
symbolRepeat: true, "-",
symbolMargin: 2, "-",
barWidth: 40, "-",
itemStyle: { "-",
normal: { "-",
color: { "-",
type: 'liner', "-",
x: 1, "-",
y: 0, "-",
x2: 1, "-",
y2: 1, ],
colorStops: [ type: "bar",
{ itemStyle: {
offset: 0, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: '#FF9615', // 0% 处的颜色 { offset: 0, color: `rgba(0,221,255,0.2)` },
}, { offset: 1, color: "#00DDFF" },
{ ]),
offset: 1,
color: '#7E4602', // 100% 处的颜色
},
],
}, },
barGap: "0%",
barWidth: 18,
}, },
}, {
name: "平均时段",
}, stack: "one",
{ data: [
name: '用电量：KWh', "-",
type: 'pictorialBar', "-",
symbol: 'rect', "-",
"-",
barGap: '1%', 13,
14,
yAxisIndex: 1, 16,
data: [ 10,
100, 300, 600 21,
], 12,
symbolSize: ['55%', 10], "-",
symbolRepeat: true, "-",
symbolMargin: 2, "-",
barWidth: 40, "-",
"-",
itemStyle: { "-",
normal: { "-",
color: { "-",
type: 'liner', "-",
x: 1, "-",
y: 0, "-",
x2: 1, "-",
y2: 1, "-",
colorStops: [ "-",
{ ],
offset: 0, type: "bar",
color: '#3FF1D9', // 0% 处的颜色 itemStyle: {
}, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ { offset: 0, color: `rgba(63,241,217,0.2)` },
offset: 1, { offset: 1, color: "#3FF1D9" },
color: '#0D332E', // 100% 处的颜色 ]),
},
],
}, },
barGap: "0%",
barWidth: 18,
}, },
}, {
name: "高峰时段",
}, stack: "one",
data: [
] "-",
}; "-",
option11 && myChart11.setOption(option11); "-",
window.onresize = function () { "-",
myChart8.resize(); "-",
myChart9.resize(); "-",
myChart10.resize(); "-",
myChart11.resize(); "-",
}; "-",
window.onresize = function () { "-",
Object.values(myChart).forEach(chart => chart.resize()) 24,
13,
12,
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(246,133,0,0.2)` },
{ offset: 1, color: "#F68500" },
]),
},
barGap: "0%",
barWidth: 18,
},
{
name: "尖峰时段",
stack: "one",
data: [
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
"-",
11,
12,
13,
11,
11,
11,
11,
11,
11,
11,
11,
],
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(255,100,100,0.2)` },
{ offset: 1, color: "#FF6464" },
]),
},
barGap: "0%",
barWidth: 18,
},
],
};
initEcharts("#timePeriod-barCharts-3", option);
};
getBarEcharts3();
window.onresize = function () {
myChart8.resize();
myChart9.resize();
myChart10.resize();
myChart11.resize();
};
window.onresize = function () {
Object.values(myChart).forEach((chart) => chart.resize());
};
}; };
</script>
} </html>
</script>
</html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论