elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev-0420' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-0420

shibei_master
13176889840 3 years ago
parent
51695ced84 b2d039a090
commit
3656f7c397
9 changed files with 1352 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/shuju/logo1.png
  2. 344
      src/assets/scss/modules/visual/houseStatic.scss
  3. 5
      src/router/index.js
  4. 3
      src/views/modules/base/community/buildTable.vue
  5. 3
      src/views/modules/visual/basicinfo/basicInfoCommunity.vue
  6. 633
      src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
  7. 180
      src/views/modules/visual/basicinfo/houseStatic/options.js
  8. 182
      src/views/modules/visual/basicinfo/houseStatic/userOptions.js
  9. 4
      src/views/modules/visual/communityGovern/typeAnalyze.vue

BIN
src/assets/img/shuju/logo1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 B

344
src/assets/scss/modules/visual/houseStatic.scss
View File

@ -0,0 +1,344 @@
.warning-box{
padding: 0 21px 20px 24px
}
.no-data{
margin-top:50px;
display:flex;
justify-content: center;
}
.card-title {
display: flex;
align-items: center;
cursor: pointer;
.title-icon {
display: block;
width: 46px;
height: 34px;
box-sizing: border-box;
margin-right: 6px;
}
::v-deep .el-dropdown {
font-size: 18px;
color: #fff;
font-weight: 800;
}
.title-time {
display: flex;
align-items: center;
box-sizing: border-box;
margin-left: 30px;
font-size: 14px;
color: #fff;
.title-time-label {
margin-right: 10px;
}
::v-deep .el-date-editor--month {
width: 100px;
.el-input__inner {
width: 100px;
height: 24px;
box-sizing: border-box;
padding: 0;
font-size: 14px;
color: #fff;
line-height: 24px;
text-align: center;
background: #06186d;
border: 1px solid #1a64cc;
border-radius: 2px;
}
.el-input__prefix {
display: none;
}
.el-input__suffix {
right: 0;
.el-input__icon {
line-height: 24px;
}
}
}
}
.title-label {
font-size: 20px;
font-weight: 800;
::v-deep .el-input {
width: 180px;
.el-input__inner {
font-size: 18px;
// font-weight: 800;
color: #fff;
background: #06186d;
border: 1px solid #1a64cc;
}
.el-icon-arrow-down::before {
content: "\e790";
}
}
}
}
.card-left-title {
margin-top: 20px;
position: relative;
padding-left: 40px;
font-size: 16px;
font-weight: 500;
color: #fff;
}
.card-left-title::after {
content: "";
position: absolute;
top: 5%;
left: 20px;
width: 12px;
height: 12px;
box-sizing: border-box;
background: #2865fa;
border-radius: 50%;
}
.card-echart {
min-height: 500px;
display: flex;
margin-top: 10px;
height: 100%;
.card-left {
position: relative;
flex-grow:0;
flex-shrink:0;
width:50%;
height: 100%;
.div-chart{
display: flex;
width: 100%;
.echart-wr{
flex-shrink: 0;
height: 420px;
width: 70%;
}
.div-tip{
flex-shrink: 0;
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
margin-left:20px;
margin-top: -23px;
display: flex;
justify-content: center;
.legend_item {
margin-top: 30px;
.item_name {
margin-left: 5px;
font-size: 10px;
font-family: PingFang SC;
font-weight: 500;
color: #eff0f1;
}
> img {
margin-top: -10px;
width: 80px;
height: 10px;
}
}
}
.div-tip2{
flex-shrink: 0;
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
margin-left:20px;
margin-top: -23px;
display: flex;
justify-content: center;
.cz-tip{
display: flex;
justify-content: flex-start;
margin-top: 30px;
.cz-tip-dot {
margin-top:2px;
width: 20px;
height: 10px;
background: #1B51FF;
border-radius: 4px;
}
>span{
margin-left:10px;
}
}
.ld-tip{
display: flex;
justify-content: flex-start;
margin-top: 30px;
.ld-tip-dot{
margin-top:2px;
width: 20px;
height: 10px;
background: #00E5ED;
border-radius: 4px;
}
>span{
margin-left:10px;
}
}
}
}
.pie-table{
margin-top:0px;
display: flex;
justify-content: center;
align-items:center;
}
.loading-status{
width: 100%;
display: flex;
justify-content: center;
margin-top: 200px;
}
}
}
.card-table{
margin:37px 70px 0;
.table_item{
padding:31px 60px 36px 30px;
.item_name{
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
>img{
width:25px;
height:14px;
padding-right: 10px;
}
}
.item_name:hover{
cursor: pointer;
}
.item_data{
margin-top:31px;
display: flex;
justify-content: space-between;
}
.item_left{
align-items: center;
display: flex;
justify-content: space-around;
flex-grow:0;
flex-shrink:0;
}
.item_right{
align-items: center;
display: flex;
justify-content: space-around;
flex-grow:0;
flex-shrink:0;
// margin-left:250px;
}
}
.item_dark{
background: #082586;
opacity: 0.85;
}
}
.pie-table-total{
margin-left:40px;
.pie-table-total-count{
min-width: 98px;
text-align: center;
font-size: 40px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.zz{
font-size: 35px;
font-family: PingFang SC;
font-weight: bold;
color: #FAC126;
}
.cz{
font-size: 35px;
font-family: PingFang SC;
font-weight: bold;
color: #45D97F;
}
.xz{
font-size: 35px;
font-family: PingFang SC;
font-weight: bold;
color: #2865FA;
}
.colorwhite{
font-size: 35px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
}
.pie-table-title{
margin-top:7px;
text-align: center;
font-size:10px;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
min-width:62px;
}
.table-table-title{
margin-top:2px;
}
}
.pie-table-line{
margin-left:40px;
height:30px;
width:1px;
background-color: #1797FF;
opacity: 0.5;
}
.table-table-line{
}

5
src/router/index.js
View File

@ -239,6 +239,11 @@ router.beforeEach((to, from, next) => {
name: "人员类别分析",
id: "5fwaefwaefawef5",
},
{
url: "/visual/basicinfo/houseStatic/houseStatic",
name: "人房概览统计",
id: "5fwaefwaefawef6",
},
],
},
{

3
src/views/modules/base/community/buildTable.vue
View File

@ -92,6 +92,9 @@
<el-table-column prop="totalFloorNum"
label="层数">
</el-table-column>
<el-table-column prop="realTotalHouseNum"
label="实际录入总数">
</el-table-column>
<el-table-column prop="totalHouseNum"
label="总户数">
</el-table-column>

3
src/views/modules/visual/basicinfo/basicInfoCommunity.vue
View File

@ -184,6 +184,8 @@ export default {
if (this.selBuildingId) {
await this.loadRoom()
} else {
this.roomArray = []
}
},
@ -250,6 +252,7 @@ export default {
//点击用户
handleClickUser (userId) {
this.handleCloseAllUser()
this.$emit('toSubAgency', 'people', userId, "")
},
//获取右侧infolist数据

633
src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
View File

@ -0,0 +1,633 @@
<template>
<div class="warning-box">
<!-- 组织路由 -->
<div class="div_top">
<div class="router_line"></div>
<div class="div_router">
<span class="router_parents"
v-for="(item,index) in runAgencyArray"
@click="handleClickAgency(index)"
:key="index">{{item.orgName}}<span class="arrow">></span></span>
<span class="router_child">{{orgName}}</span>
</div>
</div>
<cpt-card>
<div class="card-title">
<img class="title-icon"
src="@/assets/img/shuju/title-tip.png" />
<div class="title-label">
人房概览统计
</div>
</div>
<div class="card-left-title">本级人房概览数据统计</div>
<div class="card-echart">
<div class="card-left">
<div v-if="!dataLoading"
class="div-chart">
<screen-echarts-frame class="echart-wr"
@myChartMethod="housePieInitOk"
ref="housePieChart"></screen-echarts-frame>
<div class="div-tip">
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
v-for="(item,index) in legendArray"
:key="index">
<div class="item_name">{{item.name}}</div>
<img :src="item.url" />
</div>
</div>
</div>
<div v-if="!dataLoading"
class="pie-table">
<div class="pie-table-total">
<div class="pie-table-total-count">{{houseData.houseTotal}}</div>
<div class="pie-table-title">房屋总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
<div class="pie-table-title">自住房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
<div class="pie-table-title">出租房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
<div class="pie-table-title">闲置房屋数</div>
</div>
</div>
<div class="loading-status"
v-if="dataLoading">
<screen-loading>加载中</screen-loading>
</div>
</div>
<div class="card-left">
<div v-if="!dataLoading"
class="div-chart">
<screen-echarts-frame class="echart-wr"
@myChartMethod="userPieInitOk"
ref="userPieChart"></screen-echarts-frame>
<div class="div-tip2">
<div class="cz-tip">
<div class="cz-tip-dot"></div>
<span>常住人口数</span>
</div>
<div class="ld-tip">
<div class="ld-tip-dot"></div>
<span>流动人口数</span>
</div>
</div>
</div>
<div v-if="!dataLoading"
class="pie-table">
<div class="pie-table-total">
<div class="pie-table-total-count">{{userData.userTotal}}</div>
<div class="pie-table-title">居民总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
<div class="pie-table-title">常住人口数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
<div class="pie-table-title">流动人口数</div>
</div>
</div>
<div class="loading-status"
v-if="dataLoading">
<screen-loading>加载中</screen-loading>
</div>
</div>
</div>
<div class="card-left-title">下级人房概览数据统计</div>
<div v-if="subList.length>0"
class="card-table">
<div v-for="(item,index) in subList"
:key="index"
:class="['table_item',index%2 === 0?'item_dark':'']">
<div class="item_name"
@click="handleToSubAgency(item)">
<img src="@/assets/img/shuju/logo1.png" />
<span>{{item.orgName}}</span>
</div>
<div class="item_data">
<div class="item_left">
<div class="pie-table-total">
<div class="pie-table-total-count">{{item.houseTotal}}</div>
<div class="pie-table-title">房屋总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite">{{item.zzHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">自住房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite">{{item.czHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">出租房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite">{{item.xzHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">闲置房屋数</div>
</div>
</div>
<div class="item_right">
<div class="pie-table-total">
<div class="pie-table-total-count">{{item.userTotal}}</div>
<div class="pie-table-title">居民总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite">{{item.czUserTotal}}</div>
<div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div>
<div class="pie-table-title table-table-title">常住人口数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite">{{item.ldUserTotal}}</div>
<div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div>
<div class="pie-table-title table-table-title">流动人口数</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="subList.length===0"
class="no-data">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
</div>
</cpt-card>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import screenEchartsFrame from "../../components/screen-echarts-frame";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import { housePieOption } from './options'
import { userPieOption } from './userOptions'
import * as echarts from 'echarts';
export default {
name: "warning-box",
components: {
cptCard,
screenTable,
screenEchartsFrame,
ScreenLoading
},
data () {
return {
dataLoading: true,
orgId: '',
orgType: '',
orgName: this.$store.state.user.agencyName,
// orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称
housePieChartS: null,
housePieChart: '',
housePieOption: {},
housePieInitState: false,
houseData: {
orgId: '',//组织、网格、小区Id
orgType: '',//组织、网格、小区类型 agency grid village
houseTotal: 198000,//房屋总数
zzHouseTotal: 2000,//房屋自住总数
zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的）
czHouseTotal: 30,//房屋出租总数
czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的）
xzHouseTotal: 200,//房屋闲置总数
xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的）
},
houseColorArray: ['#FAC126', '#3DDA83', '#2865FA'],
housePieData: [],
legendArray: [
{
name: '自住房屋数',
url: require('../../../../../assets/img/shuju/measure/huang@2x.png')
},
{
name: '出租房屋数',
url: require('../../../../../assets/img/shuju/measure/lv@2x.png')
},
{
name: '闲置房屋数',
url: require('../../../../../assets/img/shuju/measure/lan@2x.png')
}
],
userPieChartS: null,
userPieChart: '',
userPieOption: {},
userPieInitState: false,
userData: {
orgId: '',//组织、网格、小区Id
orgType: '',//组织、网格、小区类型 agency grid village
userTotal: 198000,//居民总数
czUserTotal: 2000,//常住居民总数
czUserRatio: '90%',//常住居民总数占比
ldUserTotal: 30,//流动居民总数
ldUserRatio: '5%',//流动居民总数占比
},
userColorArray: ['#1B51FF', '#00E5ED'],
userPieData: [],
subList: [],
//下钻层级记录
runNum: 0,
runAgencyArray: [],
selUserId: '',
center: [],
zoom: null,
parentPolygon: [],
};
},
async mounted () {
this.dataLoading = true
await this.getApiData()
this.dataLoading = false
},
methods: {
async getApiData () {
await this.getHousechart()
await this.getUserchart()
await this.getSubuserhouselist()
this.getHousePie()
this.getUserPie()
},
housePieInitOk (dom) {
console.log('pie准备好了', dom)
this.housePieChartS = dom
this.housePieInitState = true
},
userPieInitOk (dom) {
console.log('pie准备好了', dom)
this.userPieChartS = dom
this.userPieInitState = true
},
async getHousechart (node, resolve) {
if (this.$refs.housePieChart) {
this.$refs.housePieChart.showLoading()
}
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
const url = '/gov/org/house/housechart'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.houseData = data
if (this.$refs.housePieChart) {
this.$refs.housePieChart.hideLoading()
}
} else {
this.houseData = {}
this.$message.error(msg);
}
},
getHousePie () {
if (this.housePieInitState) {
this.assignHousePieChart()
} else {
setTimeout(() => {
this.getHousePie()
}, 500)
}
},
assignHousePieChart () {
if (this.houseData) {
this.$refs.housePieChart.setNoData(false)
this.$refs.housePieChart.clear()
this.housePieData = []
const _that = this
// 获取pieChart配置
this.housePieOption = housePieOption(this.housePieChartS)
// let maxValue = this.housePieData[0].total
// let maxIndex = 0
let obj1 = {
name: '自住房屋数',
value: this.houseData.zzHouseRatio,
selected: true
}
let obj2 = {
name: '出租房屋数',
value: this.houseData.czHouseRatio
}
let obj3 = {
name: '闲置房屋数',
value: this.houseData.xzHouseRatio
}
this.housePieData.push(obj1)
this.housePieData.push(obj2)
this.housePieData.push(obj3)
this.housePieOption.title.text = this.houseData.houseTotal
this.housePieOption.series[1].itemStyle = {
color: function (params) {
return _that.houseColorArray[params.dataIndex]
}
}
let fun = function (params) {
_that.clickHousePie(params.dataIndex)
}
this.$refs.housePieChart.handleClick(fun)
this.clickHousePie(0)
} else {
this.$refs.housePieChart.setNoData(true)
}
},
async getUserchart (node, resolve) {
if (this.$refs.userPieChart) {
this.$refs.userPieChart.showLoading()
}
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
const url = '/epmetuser/icresiuser/userchart'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.userData = data
if (this.$refs.userPieChart) {
this.$refs.userPieChart.hideLoading()
}
} else {
this.userData = {}
this.$message.error(msg);
}
},
getUserPie () {
if (this.userPieInitState) {
this.assignUserPieChart()
} else {
setTimeout(() => {
this.getUserPie()
}, 500)
}
},
assignUserPieChart () {
if (this.userData) {
this.$refs.userPieChart.setNoData(false)
this.$refs.userPieChart.clear()
this.userPieData = []
const _that = this
// 获取pieChart配置
this.userPieOption = userPieOption(this.userPieChartS)
// let maxValue = this.userPieData[0].total
// let maxIndex = 0
let obj1 = {
name: '常住人口数',
value: this.userData.czUserRatio,
selected: true
}
let obj2 = {
name: '流动人口树',
value: this.userData.ldUserRatio
}
this.userPieData.push(obj1)
this.userPieData.push(obj2)
this.userPieOption.title.text = this.userData.userTotal
this.userPieOption.series[1].itemStyle = {
color: function (params) {
return _that.userColorArray[params.dataIndex]
}
}
let fun = function (params) {
_that.clickUserPie(params.dataIndex)
}
this.$refs.userPieChart.handleClick(fun)
this.clickUserPie(0)
} else {
this.$refs.userPieChart.setNoData(true)
}
},
async getSubuserhouselist (node, resolve) {
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
const url = '/gov/org/house/subuserhouselist'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.subList = data
} else {
}
},
async clickHousePie (seriesIndex) {
this.housePieData.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zhilma')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.housePieOption.series[1].data = this.housePieData
// this.$refs.housePieChart.hideLoading()
this.$refs.housePieChart.setOption(this.housePieOption)
},
async clickUserPie (seriesIndex) {
this.userPieData.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zhilma')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.userPieOption.series[1].data = this.userPieData
// this.$refs.userPieChart.hideLoading()
this.$refs.userPieChart.setOption(this.userPieOption)
// this.getTable()
},
handleToSubAgency (item) {
this.toSubAgency(item)
this.getApiData()
},
//下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区） people 点击详情
async toSubAgency (item) {
this.runNum++
let obj = {
orgId: this.orgId,
orgType: this.orgType,
orgName: this.orgName,
}
this.runAgencyArray.push(obj)
this.orgId = item.orgId
this.orgType = item.orgType
this.orgName = item.orgName
},
//返回所选组织
handleClickAgency (index) {
const cutNum = this.runAgencyArray.length - index//要减去的长度
this.runNum = this.runNum - cutNum
let orgData = this.runAgencyArray[index]
for (let i = 0; i < cutNum; i++) {
this.runAgencyArray.pop()
}
this.orgId = orgData.id
this.orgType = orgData.orgType
this.orgName = orgData.orgName
this.getApiData()
},
},
};
</script>
<style
lang="scss"
src="@/assets/scss/modules/visual/warning.scss"
scoped
></style>
<style
lang="scss"
src="@/assets/scss/modules/visual/basicInfoMain.scss"
scoped
></style>
<style
lang="scss"
src="@/assets/scss/modules/visual/houseStatic.scss"
scoped
></style>

180
src/views/modules/visual/basicinfo/houseStatic/options.js
View File

@ -0,0 +1,180 @@
export function housePieOption (_charts) {
const center= ['50%', '200px']
return {
title: {
text: '0',
top: 170,
left: 'center',
textStyle: {
width: '100%',
fontSize: 30,
color: '#FFFFFF',
fontWeight: 400
},
itemGap: 5,
subtext: '房屋总数',
subtextStyle: {
fontSize: 20,
color: '#fff',
fontWeight: 400
}
},
tooltip: {
show: false
},
// legend: {
// top: 500,
// bottom: 0,
// itemWidth: 20,
// itemHeight: 10,
// textStyle: {
// color: '#D2E7FF',
// fontSize: 16,
// lineHeight: 20,
// },
// },
series: [
// 外侧圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
// tooltip: {
// },
center: center,
radius: ['61%', '61.3%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
color: 'rgba(40, 101, 250, 0)',
width:0,
borderColor: 'rgba(40, 101, 250, 0.5)',
borderWidth: 1,
borderType: 'dotted'
}
}
]
},
// 突出的
{
hoverAnimation: false,
// name: 'Access From',
type: 'pie',
center: center,
radius: ['40%', '54%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
selectedMode: 'single',
left: 'center',
width: 480,
label: {
// show: false,
position: 'outside',
alignTo: 'edge',
// formatter: '{a|{c}}\n\n{name|{b}}',
formatter: '{name|{b}}\n{r|}\n{a|{c}%}',
minMargin: 5,
edgeDistance: 1,
lineHeight: 15,
color: '#fff',
fontSize: 10,
// distanceToLabelLine: -60,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 20,
color: '#fff',
padding: [16, 0, 6, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
labelLine: {
show: false,
smooth: 0.2,
length: 50,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
if (points) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
}
return {
labelLinePoints: points
};
},
itemStyle: {
// color:function(params) {
// //自定义颜色
// var colorList = [
// '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
// ];
// return colorList[params.dataIndex]
// }
},
data: [],
},
// 中间圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
center: center,
// tooltip: {
// },
radius: ['0%', '27%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
normal: {
color: 'rgba(8, 37, 134, 1)',
}
}
}
]
},
]
}
}

182
src/views/modules/visual/basicinfo/houseStatic/userOptions.js
View File

@ -0,0 +1,182 @@
export function userPieOption (_charts) {
const center= ['50%', '200px']
return {
title: {
text: '0',
top: 170,
left: 'center',
textStyle: {
width: '100%',
fontSize: 30,
color: '#FFFFFF',
fontWeight: 400
},
itemGap: 5,
subtext: '房屋总数',
subtextStyle: {
fontSize: 20,
color: '#fff',
fontWeight: 400
}
},
tooltip: {
show: false
},
// legend: {
// orient: 'vertical',
// right: 0,
// top: 200,
// bottom: 20,
// itemWidth: 20,
// itemHeight: 10,
// textStyle: {
// color: '#D2E7FF',
// fontSize: 16,
// lineHeight: 20,
// },
// },
series: [
// 外侧圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
// tooltip: {
// },
center: center,
radius: ['61%', '61.3%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
color: 'rgba(40, 101, 250, 0)',
width:0,
borderColor: 'rgba(40, 101, 250, 0.5)',
borderWidth: 1,
borderType: 'dotted'
}
}
]
},
// 突出的
{
hoverAnimation: false,
// name: 'Access From',
type: 'pie',
center: center,
radius: ['40%', '54%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
selectedMode: 'single',
left: 'center',
width: 480,
label: {
// show: false,
position: 'outside',
alignTo: 'edge',
// formatter: '{a|{c}}\n\n{name|{b}}',
formatter: '{name|{b}}\n{r|}\n{a|{c}%}',
minMargin: 5,
edgeDistance: 1,
lineHeight: 15,
color: '#fff',
fontSize: 10,
// distanceToLabelLine: -60,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 20,
color: '#fff',
padding: [16, 0, 6, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
labelLine: {
show: false,
smooth: 0.2,
length: 50,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
if (points) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
}
return {
labelLinePoints: points
};
},
itemStyle: {
// color:function(params) {
// //自定义颜色
// var colorList = [
// '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
// ];
// return colorList[params.dataIndex]
// }
},
data: [],
},
// 中间圆环
{
type: 'pie',
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
startAngle: 0,
hoverAnimation: false,
center: center,
// tooltip: {
// },
radius: ['0%', '27%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 360,
itemStyle: {
normal: {
color: 'rgba(8, 37, 134, 1)',
}
}
}
]
},
]
}
}

4
src/views/modules/visual/communityGovern/typeAnalyze.vue
View File

@ -76,7 +76,7 @@
</template>
<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
@ -84,7 +84,7 @@ import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts
import projectInfo from "./cpt/project-info";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import { pieOption } from './typePieOption.js'
import nextTick from 'dai-js/tools/nextTick'
export default {
name: "HomeMap",

Write Preview
Loading…
Cancel
Save