shaojiahao
/
ShangHai-YuAn
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[修正] 全屏echarts 显示问题修正

master
陈鹏飞 4 years ago
parent
f6a59691e6
commit
06e4626ddc
3 changed files with 16 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/statistic-analysis/home/home.component.html
  2. 14
      src/app/statistic-analysis/home/home.component.ts
  3. 105
      src/assets/css/newStyle.css

4
src/app/statistic-analysis/home/home.component.html
Unescape View File

@ -2,7 +2,7 @@
<div class="main-top"> <div class="main-top">
<!-- 左侧 --> <!-- 左侧 -->
<div class="main-left"> <div class="main-left">
<div class="panel panel04" style="flex: 100%; max-height: 400px;"> <div class="panel panel04" style="flex: 100%;">
<div class="panel-hd"> <div class="panel-hd">
<a href="javascript:;" class="panel-more"><svg width="18" height="12" xmlns="http://www.w3.org/2000/svg"><g fill="#93FCFF" fill-rule="evenodd" opacity=".6"><path d="M0 0h18v2H0zM0 5h18v2H0zM0 10h18v2H0z"/></g></svg></a> <a href="javascript:;" class="panel-more"><svg width="18" height="12" xmlns="http://www.w3.org/2000/svg"><g fill="#93FCFF" fill-rule="evenodd" opacity=".6"><path d="M0 0h18v2H0zM0 5h18v2H0zM0 10h18v2H0z"/></g></svg></a>
</div> </div>
@ -99,7 +99,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-wrap mt" style="flex: 100%; max-height: 400px;"> <div class="box-wrap mt" style="flex: 100%;">
<div class="panel-bd"> <div class="panel-bd">
<div id="chartZdgzqy" class="chart-item" style="height: 100%;"></div> <div id="chartZdgzqy" class="chart-item" style="height: 100%;"></div>
</div> </div>

14
src/app/statistic-analysis/home/home.component.ts
Unescape View File

@ -44,9 +44,17 @@ export class HomeComponent implements OnInit {
//更新echarts视图 //更新echarts视图
updateEcharts(){ updateEcharts(){
this.planState.resize() this.planState.clear()
this.chartDwsjcj.resize() this.planState.dispose()
this.chartZdgzqy.resize() this.chartDwsjcj.clear()
this.chartDwsjcj.dispose()
this.chartZdgzqy.clear()
this.chartZdgzqy.dispose()
this.unitType()
this.unitData()
this.keyUnit()
// this.mapInit() //初始化地图
} }
threePlan(){ threePlan(){

105
src/assets/css/newStyle.css
Unescape View File

@ -17,7 +17,7 @@ label { font-weight: 400; }
fieldset, img { border: 0; } fieldset, img { border: 0; }
html, body { color: #fff; background: #000D12; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; height: 100%; } /* html, body { color: #fff; background: #000D12; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; height: 100%; } */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@ -398,7 +398,7 @@ iframe { display: block; }
.count-number span { display: block; } .count-number span { display: block; }
.count-number .is-active span { animation: numMove .3s forwards; } .count-number .is-active span { animation: numMove .3s forwards; }
@keyframes numMove { 100% { transform: translateY(-100%); } }
.total-box { display: flex; flex-direction: column; justify-content: space-between; } .total-box { display: flex; flex-direction: column; justify-content: space-between; }
.total-box .total-item { display: flex; padding: 3px 0; text-align: center;color: #fff; } .total-box .total-item { display: flex; padding: 3px 0; text-align: center;color: #fff; }
.total-box .total-item > div { height: 36px; line-height: 36px; font-size: 16px; flex: 1; background-color: rgba(88, 206, 208, 0.16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } .total-box .total-item > div { height: 36px; line-height: 36px; font-size: 16px; flex: 1; background-color: rgba(88, 206, 208, 0.16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }
@ -429,105 +429,6 @@ iframe { display: block; }
.login-item.login-btn { background-image: url(../images/loginbtn-bg.png); width: 100%; text-align: center; letter-spacing: 10px; text-indent: 10px; font-size: 20px; padding: 0; font-weight: 500; } .login-item.login-btn { background-image: url(../images/loginbtn-bg.png); width: 100%; text-align: center; letter-spacing: 10px; text-indent: 10px; font-size: 20px; padding: 0; font-weight: 500; }
.login-item.login-btn .login-txt { width: 700px; margin: 0 auto; display: block; padding-top: 32px; height: 100%; transition: .3s color; } .login-item.login-btn .login-txt { width: 700px; margin: 0 auto; display: block; padding-top: 32px; height: 100%; transition: .3s color; }
@media all and (max-width: 1100px) { .header { height: 0px; }
.header:before { top: 86px; }
.page-top { padding-top: 98px; padding-right: 35%; }
.page-top .num-item { margin-right: 10px; padding-top: 20px; }
.common-list { background-image: none; }
.logo { margin-top: 10px; font-size: 30px; }
.notice-box { margin-top: 0; }
.page-side { padding-top: 0; padding-bottom: 10px; }
.page-side .num-list { padding-top: 0; }
.page-left { padding-left: 10px; }
.page-right { padding-right: 10px; }
.main { padding-left: 10px; padding-right: 10px; }
.main .panel .panel-bd, .main .box-wrap .panel-bd { padding: 10px; }
.main .main-center { padding-left: 10px; padding-right: 10px; }
.main .main-top { margin-top: 10px; }
.main .count-number li { font-size: 30px; padding: 0; }
.main .number-area .number-tit { font-size: 18px; }
.box-wrap .panel-bd { padding-top: 0; }
.box-wrap .panel-hd { padding-bottom: 0; padding-top: 0; }
.box-wrap .panel-hd .panel-tit { padding-top: 10px; }
.progress-list .progress-item { height: 36px; line-height: 28px; }
.progress-list .progress { line-height: 28px; height: 28px; }
.progress-list .progress:before { height: 28px; }
.progress-list .progress-num { line-height: 26px; }
.progress-list .progress-bar { height: 22px; }
.progress-list .progress-bar .progress-bar-inner { height: 22px; } }
@media all and (max-width: 1440px) { .page-top { padding-left: 10px; }
.page-top .num-item { background-size: 100% 100%; padding-bottom: 0; display: flex; flex-direction: column; justify-content: baseline; }
.page-top .num-item .num-text { font-size: 32px; line-height: 46px; }
.page-top .num-item .num-text .unit { font-size: 26px; } }
@media all and (min-width: 1630px) { .main-bottom { margin-top: 30px; } }
@media all and (max-width: 1630px) { .panel .panel-bd, .panel .panel-hd, .box-wrap .panel-bd, .box-wrap .panel-hd { padding-left: 10px; padding-right: 10px; } }
/* @media all and (max-height: 620px) { .page-top { padding-top: 105px; } } */
@media all and (min-height: 768px) { .main-bottom { flex: 1.2; } }
@media all and (min-height: 820px) { .box-wrap.mt { margin-top: 30px; }
.main-bottom { margin-top: 30px; } }
@media all and (max-height: 768px) { .page01 .page-left { top: 190px; }
.num-item .num-text { font-size: 32px; }
.num-item .num-text .unit { font-size: 26px; }
.logo { font-size: 30px; }
.notice-box { margin-top: 0; }
.panel .panel-bd { padding: 10px; } }
@keyframes fadeIn { from { opacity: 0; }
to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeOut { from { opacity: 1; }
to { opacity: 0; } }
@keyframes fadeOutDown { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDownBig { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutUp { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUpBig { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutLeft { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeftBig { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutRight { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRightBig { from { opacity: 1; }
to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } }
@keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
50% { opacity: 1; } }
@keyframes zoomOut { from { opacity: 1; }
50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
to { opacity: 0; } }
@keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; }
to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } }
@keyframes up-small { 0% { transform: translate3d(0, 30px, 0); opacity: 0.3; }
100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes animate-positive { 0% { width: 0%; } }
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes rotate-everse { 100% { transform: rotate(-360deg); } }
@keyframes scale-spring { 0% { opacity: 0.5; -ms-transform: scale(0.5); transform: scale(0.5); }
80% { opacity: 0.8; -ms-transform: scale(1.1); transform: scale(1.1); }
100% { opacity: 1; -ms-transform: scale(1); transform: scale(1); } }
@keyframes light-move { 0% { transform: translate(0); } }
/*
z-index:
*/
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

Write Preview
Loading…
Cancel
Save