| | |
| | | <div class="main_table"> |
| | | <div class="main_table_echart"> |
| | | <div class="title">本年隐患趋势</div> |
| | | <div id="echart3" v-if="yearList.length > 0"></div> |
| | | <div v-else style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> |
| | | <div id="echart3" v-show="yearList.length > 0"></div> |
| | | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="yearList.length === 0"> |
| | | <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | let datas = this.yearList.map(item => item.total) |
| | | |
| | | let option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | | right: '10%', |
| | |
| | | data: names |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | data: datas, |
| | | type: 'line' |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: '#207FF7' // 0% 处的颜色 |
| | | }, { |
| | | offset: 1, |
| | | color: 'rgba(255,255,255,.2)' // 100% 处的颜色 |
| | | }], |
| | | globalCoord: false // 缺省为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // 线条样式 |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#207FF7' // 0% 处的颜色 |
| | | }, { |
| | | offset: 1, color: '#207FF7' // 100% 处的颜色 |
| | | }] |
| | | }, |
| | | width: 2 // 线条粗细 |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 10, |
| | | itemStyle: { |
| | | borderWidth: 1, |
| | | borderColor: '#fff', |
| | | color: '#207FF7' |
| | | }, |
| | | smooth: false |
| | | } |
| | | ] |
| | | } |
| | |
| | | } |
| | | .list_head { |
| | | width: 100%; |
| | | height: 35px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #ececec; |
| | | background-color: #F7F7F7; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | margin-top: 15px; |
| | | .list_head_item { |
| | | flex: 1; |
| | |
| | | justify-content: center; |
| | | font-size: 13px; |
| | | color: #222222; |
| | | border-right: 1px solid #DFE2E8; |
| | | } |
| | | } |
| | | .table_box { |
| | | width: 100%; |
| | | border-bottom: 1px solid #DFE2E8; |
| | | .list_content { |
| | | width: 100%; |
| | | height: 35px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | .list_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | justify-content: center; |
| | | font-size: 13px; |
| | | color: #222222; |
| | | border-right: 1px solid #DFE2E8; |
| | | } |
| | | } |
| | | } |