Skip to content

R
report-html-template
Commit 8163651c by 陈曦冉
Options

合并分支 'feature/branch_yx' 到 'main' 

echarts 添加滚动条

查看合并请求 !3
parents b597c1d9 0ad9a18f
正在显示 包含 109 行增加 和 47 行删除
energy-report/index.css
...@@ -882,6 +882,7 @@ body { ...@@ -882,6 +882,7 @@ body {
} }
.chart-desc-task-centerPro-list{ .chart-desc-task-centerPro-list{
width: 50%; width: 50%;
align-items: center;
} }
.chart-centerPro-text { .chart-centerPro-text {
font-size: 18px; font-size: 18px;
...@@ -1039,6 +1040,11 @@ body { ...@@ -1039,6 +1040,11 @@ body {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.content-item {
width: 15%;
padding-top: 17px;
text-align: center;
}
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
...@@ -1047,13 +1053,13 @@ body { ...@@ -1047,13 +1053,13 @@ body {
flex-direction: column; flex-direction: column;
/*width: 100%;*/ /*width: 100%;*/
} }
.content-item {
width: 15%;
text-align: center;
}
} }
.content-item {
width: 15%;
padding-top: 17px;
text-align: center;
}
.item-text1 { .item-text1 {
font-size: 14px; font-size: 14px;
...@@ -1074,6 +1080,30 @@ body { ...@@ -1074,6 +1080,30 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
@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: 120px;
height: 95px;
}
}
.content-item-m { .content-item-m {
display: flex; display: flex;
flex: 1; flex: 1;
...@@ -1108,6 +1138,7 @@ body { ...@@ -1108,6 +1138,7 @@ body {
} }
.item-r-text { .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;
...@@ -1127,10 +1158,12 @@ body { ...@@ -1127,10 +1158,12 @@ body {
} }
.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 {
...@@ -1164,10 +1197,6 @@ body { ...@@ -1164,10 +1197,6 @@ body {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
} }
.echarts-title-content{
display: flex;
flex-direction: column;
}
.echarts-title-top1{ .echarts-title-top1{
margin-left: 0; margin-left: 0;
} }
...@@ -1189,8 +1218,9 @@ body { ...@@ -1189,8 +1218,9 @@ body {
.chart-desc-text-left{ .chart-desc-text-left{
width: 75%; width: 75%;
} }
}@media screen and (max-width: 768px) { }
@media screen and (max-width: 768px) {
.energy-wrap .header { .energy-wrap .header {
height: 8vh; height: 8vh;
} }
} }
\ No newline at end of file
energy-report/index.html
...@@ -255,23 +255,25 @@ ...@@ -255,23 +255,25 @@
<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">
<div class="content-item-m"> <img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
<div class="content-item"> <div class="content-item-m">
<div class="item-text1">尖时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">尖时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">峰时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">峰时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">平时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">平时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">谷时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div> </div>
</div> </div>
<div class="content-item-r"> <div class="content-item-r">
...@@ -293,7 +295,7 @@ ...@@ -293,7 +295,7 @@
</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>
...@@ -334,23 +336,25 @@ ...@@ -334,23 +336,25 @@
各时段集中生产企业 月度平均数(家) 各时段集中生产企业 月度平均数(家)
</div> </div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <div class="content-left">
<div class="content-item-m"> <img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
<div class="content-item"> <div class="content-item-m">
<div class="item-text1">尖时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">尖时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">峰时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">峰时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">平时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">平时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">谷时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div> </div>
</div> </div>
<div class="content-item-r"> <div class="content-item-r">
...@@ -577,6 +581,30 @@ ...@@ -577,6 +581,30 @@
option && ele.setOption({...option}) option && ele.setOption({...option})
} }
let windowWidth = window.screen.width;
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 = {
...@@ -1981,6 +2009,7 @@ ...@@ -1981,6 +2009,7 @@
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#timePeriod-barCharts-1", option); initEcharts("#timePeriod-barCharts-1", option);
}; };
...@@ -2057,6 +2086,7 @@ ...@@ -2057,6 +2086,7 @@
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#timePeriod-barCharts-3", option); initEcharts("#timePeriod-barCharts-3", option);
}; };
...@@ -2133,6 +2163,7 @@ ...@@ -2133,6 +2163,7 @@
barWidth: 18, barWidth: 18,
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts("#repair-require6", option); initEcharts("#repair-require6", option);
}; };
...@@ -2359,6 +2390,7 @@ ...@@ -2359,6 +2390,7 @@
type: "bar", type: "bar",
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts('#month-power', option) initEcharts('#month-power', option)
} }
...@@ -2473,6 +2505,7 @@ ...@@ -2473,6 +2505,7 @@
}, },
}, },
], ],
dataZoom: getEchartsDataZoom(),
}; };
initEcharts('#month-trend', option) initEcharts('#month-trend', option)
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论