From c899e0d5ebc846d3e214f9b66bad63f15ee0e0c3 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期三, 13 四月 2022 17:41:17 +0800
Subject: [PATCH] 其他业务
---
src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue | 202 +++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 180 insertions(+), 22 deletions(-)
diff --git a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
index 89f86a2..3840265 100644
--- a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
+++ b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue
@@ -85,6 +85,8 @@
</template>
<script>
+import nowSize from '../../../../libs/nowSize'
+
export default {
name: "OtherB_PerpleJunShouRu",
data() {
@@ -103,21 +105,178 @@
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: 4, //鎶樼嚎瀹藉害
+ }
+ }
+ },
+ 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)
}
}
}
@@ -142,7 +301,6 @@
.el-table tr {
height: 0.3125rem; /* 80/256 */
-
}
.el-table tr:nth-child(odd) {
@@ -192,7 +350,7 @@
.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*/
- height:0.46875rem;//琛ㄦ牸姝ｆ枃琛岄珮搴�
+ height: 0.46875rem; //琛ㄦ牸姝ｆ枃琛岄珮搴�
}
}
</style>
@@ -215,11 +373,11 @@
line-height: 2;
}
}
- .OtherB-PeopleJunShouRu__echart{
- width:8.75rem;
- height:2.75rem;
- background: blue;
- margin-top:120px;
+
+ .OtherB-PeopleJunShouRu__echart {
+ width: 8.75rem;
+ height: 2.75rem;
+ margin-top: 120px;
}
}
</style>
--
Gitblit v1.9.1