From 195665843d5c19f6ff28c33c07c71ffd889fbd70 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 12 Apr 2023 15:56:05 +0800
Subject: [PATCH] 首页饼图滚动
---
src/views/home/components/leftContainer.vue | 75 +++++++++++++++++++++++--------------
1 files changed, 47 insertions(+), 28 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index a8dbeb4..47ecb45 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -8,7 +8,8 @@
</div>
</div>
<el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+ element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
+ style="height: calc(100% - 17.6%);">
<div class="sub-tab" v-show="peopletype == 0">
<div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
<div class="tab-title-small">户籍人口:</div>
@@ -28,10 +29,14 @@
</div>
</div>
- <div id="PersonEcharts" class="echarts-box">
+ <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
+
+ <div id="PersonEcharts" :style="{ height: personEchartsHeight }">
+
+ </div>
+
</div>
</el-main>
-
<div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
</div>
@@ -41,10 +46,10 @@
<defs>
<path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
- c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
- c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
- c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
- c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
+ c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
+ c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
+ c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
+ c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
fill="transparent" />
<radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
@@ -54,10 +59,10 @@
<circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
<animateMotion dur="8s"
path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
- c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
- c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
- c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
- c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
+ c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
+ c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
+ c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
+ c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
rotate="auto" repeatCount="indefinite" />
</circle>
</mask>
@@ -182,6 +187,7 @@
// 记录当前选中派出所的ID
policeStaionID: '',
peopleLoading: false,
+ personEchartsHeight: '100%'
}
},
@@ -326,6 +332,8 @@
this.disposeEchart()
if (type == 0) {
+ this.personEchartsHeight = '100%'
+
if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
this.getPoliceStationInfo()
@@ -336,8 +344,6 @@
}
} else if (type == 1) {
-
-
this.initkeyPersonEcharts()
}
},
@@ -898,10 +904,8 @@
async initkeyPersonEcharts () {
this.disposeEchart()
- var chartDom = document.getElementById('PersonEcharts')
- keyPersonmyChart = this.$echarts.init(chartDom)
-
let personInfo = await this.getPersonInfo()
+
keyPeopleDataLength = personInfo.length
if (this.userInfo.dept_id == '1596020515064381442') {
personInfo = [
@@ -912,16 +916,30 @@
{ count: 1, name: '欠薪讨债群体', value: 1 }]
}
- keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
+ const high = this.$refs.REFPERSONECHARTS.offsetHeight
- this.clickkeyPersonChart()
- if (personInfo.length > 1) {
- this.keyPeopleEchartsCarousel()
+ if (personInfo.length * (high / 7) > high) {
+ this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
} else {
- clearInterval(timer)
- keyPersonmyChart.off("mouseover")
- keyPersonmyChart.off("mouseout")
+ this.personEchartsHeight = '100%'
}
+
+ this.$nextTick(() => {
+ var chartDom = document.getElementById('PersonEcharts')
+ keyPersonmyChart = this.$echarts.init(chartDom)
+ keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
+
+ this.clickkeyPersonChart()
+ if (personInfo.length > 1) {
+ this.keyPeopleEchartsCarousel()
+ } else {
+ clearInterval(timer)
+ keyPersonmyChart.off("mouseover")
+ keyPersonmyChart.off("mouseout")
+ }
+ })
+
+
setTimeout(() => {
this.personEchartsLoading = false
}, 500)
@@ -992,15 +1010,15 @@
confine: true
},
legend: {
- type: 'scroll',
orient: 'vertical',
top: 'middle',
- left: '45%',
+ right: '5%',
y: '1%',
itemGap: 15,
textStyle: {
color: '#fff'
},
+ align: 'left',
formatter: function (name) {
let data = dataArr
let tarValue
@@ -1015,10 +1033,11 @@
},
series: [
{
- name: '',
+ top: 140,
+ left: 90,
type: 'pie',
- radius: ['30%', '60%'],
- center: ['22%', '55%'],
+ radius: [30, 60],
+ center: [0, 0],
avoidLabelOverlap: false,
label: {
show: false,
--
Gitblit v1.9.3