From a509e48bf7336b6007e1eee7e81a6612a0fb006c Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期日, 24 四月 2022 14:42:44 +0800
Subject: [PATCH] 细节
---
src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 236 insertions(+), 33 deletions(-)
diff --git a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
index e6c1751..e25f860 100644
--- a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
+++ b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
@@ -4,84 +4,112 @@
<h1>鍏ㄥ競灞呮皯浜哄潎鍙敮閰嶆敹鍏ユ儏鍐�</h1>
<el-table
:data="tableData"
- style="width: 100%">
+ style="width: 100%" :cell-style="updataCellStyle">
<el-table-column
prop="year"
- label="骞翠唤">
+ label="骞翠唤" min-width="80"
+ fied="left"
+ >
</el-table-column>
<el-table-column
label="鍥芥皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
prop="shouru"
- label="鏀跺叆锛堝厓锛�"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
>
</el-table-column>
<el-table-column
prop="quanshengpaiwei"
label="鍏ㄧ渷鎺掑悕"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="zengzhang"
label="澧為暱"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="quanshengpaiwei1"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
</el-table-column>
<el-table-column label="鍩庨晣灞呮皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
prop="shouru1"
- label="鏀跺叆锛堝厓锛�"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="quanshengpaiwei2"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="zengzhang1"
label="澧為暱"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="quanshengpaiwei3"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
</el-table-column>
<el-table-column label="鍐滄潙灞呮皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
prop="shouru2"
- label="鏀跺叆锛堝厓锛�"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="quashengpaiwei4"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
prop="zengzhang2"
label="澧為暱 "
+ min-width="80"
>
</el-table-column>
<el-table-column
prop="quanshengpaiwei5"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
>
</el-table-column>
</el-table-column>
</el-table>
</div>
+ <div class="OtherB-PeopleJunShouRu__echart">
+
+ </div>
</div>
</template>
<script>
+import nowSize from '../../../../libs/nowSize'
+
export default {
name: "OtherB_PerpleJunShouRu",
data() {
@@ -100,21 +128,186 @@
quashengpaiwei4: 3,
zengzhang2: '4.4%',
quanshengpaiwei5: 6
- }, {
- year: 2020,
- shouru: 30955,
- quanshengpaiwei: 3,
- zengzhang: '5.5%',
- quanshengpaiwei1: 9,
- shouru1: 40243,
- quanshengpaiwei2: 3,
- zengzhang1: '4.4%',
- quanshengpaiwei3: 6,
- shouru2: 40243,
- quashengpaiwei4: 3,
- zengzhang2: '4.4%',
- quanshengpaiwei5: 6
- }]
+ },
+ {
+ year: 2020,
+ shouru: 30955,
+ quanshengpaiwei: 3,
+ zengzhang: '5.5%',
+ quanshengpaiwei1: 9,
+ shouru1: 40243,
+ quanshengpaiwei2: 3,
+ zengzhang1: '4.4%',
+ quanshengpaiwei3: 6,
+ shouru2: 40243,
+ quashengpaiwei4: 3,
+ zengzhang2: '4.4%',
+ quanshengpaiwei5: 6
+ }],
+ option: {
+ color: ['#FF5151', '#51FF5D', '#FFD151'],
+ title: {
+ text: '鍘嗗勾鍏ㄥ競灞呮皯浜哄潎鍙敮閰嶆敹鍏ュ垎鏋愬浘',
+ left: 'center',
+ top: '5%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(30)
+ }
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ right: '5%',
+ top: 'center',
+ orient: 'vertical',
+ itemWidth: nowSize(30),
+ itemHeight: nowSize(4),
+ itemGap: nowSize(80),
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(24),
+ }
+ },
+ grid: {
+ left: '10%',
+ right: '20%',
+ bottom: '0%',
+ containLabel: true
+ },
+ xAxis: {
+ name: '鍗曚綅锛氬勾',
+ nameTextStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(24)
+ },
+ nameGap: nowSize(92),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇��
+ type: 'category',
+ boundaryGap: false,// 鍧愭爣杞翠袱绔暀鐧�
+ data: ['2017骞�', '2018骞�', '2019骞�', '2020骞�', '2021骞�'],
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: nowSize(24)
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#999999',
+ width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀
+ type: 'solid'
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ name: '鍗曚綅锛氬勾',
+ nameTextStyle: {
+ color: '#FFFFFF',
+ fontSize: nowSize(24)
+ },
+ nameGap: nowSize(30),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇��
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: nowSize(24)
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#999999',
+ width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀
+ type: "solid"
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '灞呮皯浜哄潎鍙敮閰嶆敹鍏�',
+ type: 'line',
+ smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐�
+ // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 3, //鎶樼嚎瀹藉害
+ }
+ }
+ },
+ emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡
+ borderColor: 'rgba(0,196,132,0.2)',
+ borderWidth: 100
+ },
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230]
+ },
+ {
+ name: '鍩庨晣灞呮皯',
+ type: 'line',
+ smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐�
+ // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 3, //鎶樼嚎瀹藉害
+ }
+ }
+ },
+ emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡
+ borderColor: 'rgba(0,196,132,0.2)',
+ borderWidth: 100
+ },
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 330]
+ },
+ {
+ name: '鍐滄潙灞呮皯',
+ type: 'line',
+ smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐�
+ // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 3, //鎶樼嚎瀹藉害
+ }
+ }
+ },
+ emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡
+ borderColor: 'rgba(0,196,132,0.2)',
+ borderWidth: 100
+ },
+ stack: 'Total',
+ data: [150, 232, 201, 154, 190, 330]
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ this.Init_echarts()
+ },
+ methods: {
+ Init_echarts() {
+ const option = this.option
+ const myChart = this.$echarts.init(document.querySelector('.OtherB-PeopleJunShouRu__echart'));
+ option && myChart.setOption(this.option)
+ },
+ // 缁欏崟鐙崟鍏冩牸娣诲姞鏍峰紡
+ updataCellStyle({rowIndex, columnIndex}) {
+ if (rowIndex ===0 && columnIndex === 0) {
+ return {background:'#51D2FF'}
+ }else if(rowIndex===1 && columnIndex ===0){
+ return {background:'#51D2FF'}
+ }
}
}
}
@@ -124,11 +317,9 @@
@import "../../../../assets/css/base";
.OtherB-PeopleJunShouRu__table {
- width: 100%;
- height: calc(100% - 0.078125rem /* 20/256 */
- );
- margin-top: 0.078125rem /* 20/256 */
-;
+ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+ background: transparent;
+ }
.el-table th.el-table__cell {
background-color: $color-blue;
@@ -137,8 +328,7 @@
}
.el-table tr {
- height: 0.3125rem /* 80/256 */
- ;
+ height: 0.3125rem; /* 80/256 */
}
.el-table tr:nth-child(odd) {
@@ -165,24 +355,30 @@
font-size: $fontSize-28;
color: $color-darkGrey;
font-weight: 300;
- line-height: 1;
+ line-height: 0.390625rem;
white-space: pre-line;
+ text-align: center;
}
.el-table--border th.el-table__cell, .el-table__fixed-right-patch {
- border-bottom: 1Px solid $color-grey; /*no*/
+ border-bottom: 1px solid $color-grey; /*no*/
}
.el-table thead.is-group th.el-table__cell {
background-color: $color-blue;
}
+ .el-table .el-table__cell {
+ padding: 0;
+ }
+
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
- border-bottom: 1Px solid $color-grey; /*no*/
+ border-bottom: 1px solid $color-grey; /*no*/
}
.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
- border-right: 1Px solid $color-grey; /*no*/
+ border-right: 1px solid $color-grey; /*no*/
+ height: 0.46875rem; //琛ㄦ牸姝ｆ枃琛岄珮搴�
}
}
</style>
@@ -191,10 +387,11 @@
.OtherB_PerpleJunShouRu__wrap {
width: 100%;
- height: calc(100% - 0.078125rem /* 20/256 */
- );
+ //height: calc(100% - 0.078125rem /* 20/256 */
+ //);
.OtherB-PeopleJunShouRu__table {
+ width: 100%;
margin-top: 0.078125rem /* 20/256 */
;
@@ -205,5 +402,11 @@
line-height: 2;
}
}
+
+ .OtherB-PeopleJunShouRu__echart {
+ width: 8.75rem;
+ height: 2.75rem;
+ margin-top: 120px;
+ }
}
</style>
--
Gitblit v1.9.1