From b262be766fd1dbcb936d9dda5b5e802de4d27e59 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期四, 28 四月 2022 11:24:40 +0800
Subject: [PATCH] 其他业务
---
src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue | 318 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 258 insertions(+), 60 deletions(-)
diff --git a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
index e6c1751..597b6d1 100644
--- a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
+++ b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
@@ -4,117 +4,305 @@
<h1>鍏ㄥ競灞呮皯浜哄潎鍙敮閰嶆敹鍏ユ儏鍐�</h1>
<el-table
:data="tableData"
- style="width: 100%">
+ style="width: 100%" :cell-style="updataCellStyle">
<el-table-column
- prop="year"
- label="骞翠唤">
+ prop="jyear"
+ label="骞翠唤" min-width="80"
+ fied="left"
+ >
</el-table-column>
<el-table-column
label="鍥芥皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
- prop="shouru"
- label="鏀跺叆锛堝厓锛�"
+ prop="jincome"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
>
</el-table-column>
<el-table-column
- prop="quanshengpaiwei"
+ prop="jprovinceRank"
label="鍏ㄧ渷鎺掑悕"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="zengzhang"
+ prop="jincrease"
label="澧為暱"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="quanshengpaiwei1"
+ prop="jincreaseRank"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
</el-table-column>
<el-table-column label="鍩庨晣灞呮皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
- prop="shouru1"
- label="鏀跺叆锛堝厓锛�"
+ prop="cincome"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="quanshengpaiwei2"
+ prop="cprovinceRank"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="zengzhang1"
+ prop="cincrease"
label="澧為暱"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="quanshengpaiwei3"
+ prop="cincreaseRank"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
</el-table-column>
<el-table-column label="鍐滄潙灞呮皯浜哄潎鍙敮閰嶆敹鍏�">
<el-table-column
- prop="shouru2"
- label="鏀跺叆锛堝厓锛�"
+ prop="nincome"
+ label="鏀跺叆(鍏�)"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="quashengpaiwei4"
+ prop="nprovinceRank"
label="鍏ㄧ渷鎺掍綅"
+ min-width="80"
+
>
</el-table-column>
<el-table-column
- prop="zengzhang2"
+ prop="nincrease"
label="澧為暱 "
+ min-width="80"
>
</el-table-column>
<el-table-column
- prop="quanshengpaiwei5"
+ prop="nincreaseRank"
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'
+import {getIncomeTable, getIncomeLine} from '@/api/otherBusiness'
+
export default {
name: "OtherB_PerpleJunShouRu",
data() {
return {
- tableData: [{
- 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
- }]
+ tableData: [
+ // {
+ // 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
+ // }
+ ],
+ echartsSeries: {}
+ }
+ },
+ mounted() {
+ this.Init_echarts()
+ this.getIncomeTable()
+ this.getIncomeLine()
+ },
+ methods: {
+ // 31. 鏌ヨ灞呮皯浜哄潎鍙敮閰嶆敹鍏ヨ〃鏍兼暟鎹帴鍙�
+ getIncomeTable() {
+ getIncomeTable().then(res => {
+ if (res.code === 1000) {
+ this.tableData = res.list
+ }
+ })
+ },
+ // 32. 鏌ヨ灞呮皯鍙敮閰嶆敹鍏ュ垎鏋愬浘鏁版嵁鎺ュ彛
+ getIncomeLine() {
+ getIncomeLine().then(res => {
+ console.log(res);
+ if(res.code===1000){
+ this.echartsSeries = res.obj
+ this.Init_echarts()
+ }
+ })
+ },
+ Init_echarts() {
+ const 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: this.echartsSeries.years,
+ 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',
+ data: this.echartsSeries.jumin
+ },
+ {
+ name: '鍩庨晣灞呮皯',
+ type: 'line',
+ data: this.echartsSeries.chengzhen
+ },
+ // smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐�
+ // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず
+ // itemStyle: {
+ // normal: {
+ // lineStyle: {
+ // width: 3, //鎶樼嚎瀹藉害
+ // }
+ // }
+ // },
+ // emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡
+ // borderColor: 'rgba(0,196,132,0.2)',
+ // borderWidth: 100
+ // },
+ // stack: 'Total',
+ {
+ name: '鍐滄潙灞呮皯',
+ type: 'line',
+ data: this.echartsSeries.nongcun
+ }
+ ]
+ }
+ const myChart = this.$echarts.init(document.querySelector('.OtherB-PeopleJunShouRu__echart'));
+ option && myChart.setOption(option)
+ },
+ // 缁欏崟鐙崟鍏冩牸娣诲姞鏍峰紡
+ updataCellStyle({rowIndex, columnIndex}) {
+ if (rowIndex === 0 && columnIndex === 0) {
+ return {background: '#51D2FF'}
+ } else if (rowIndex === 1 && columnIndex === 0) {
+ return {background: '#51D2FF'}
+ }
}
}
}
@@ -124,11 +312,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 +323,7 @@
}
.el-table tr {
- height: 0.3125rem /* 80/256 */
- ;
+ height: 0.3125rem; /* 80/256 */
}
.el-table tr:nth-child(odd) {
@@ -165,24 +350,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 +382,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 +397,11 @@
line-height: 2;
}
}
+
+ .OtherB-PeopleJunShouRu__echart {
+ width: 8.75rem;
+ height: 2.75rem;
+ margin-top: 120px;
+ }
}
</style>
--
Gitblit v1.9.1