Skip to content

R
report-html-template
Commit 0ad9a18f by 杨翔
Options

echarts 添加滚动条

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