tianq
3 years ago
5 changed files with 456 additions and 172 deletions
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<div class="m-zyqd"> |
|||
<el-row :gutter="16"> |
|||
<el-col :span="12"> |
|||
<div class="kuangkuang"> |
|||
<h3>公共服务数量</h3> |
|||
<h2>256</h2> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="kuangkuang"> |
|||
<h3>指派服务数量</h3> |
|||
<h2>2545</h2> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="pie-main" style="height: 300px;"><screen-echarts-frame class="" @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index'; |
|||
import { pieOption } from './fwBarOption.js'; |
|||
import { requestPostBi } from '@/js/dai/request-bipass'; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: [ |
|||
'人资源', |
|||
'物资源', |
|||
'场所资源' |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: '人资源', |
|||
info: {} |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
} |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
// const { type, name } = item; |
|||
// this.$router.push({ |
|||
// path: '/dataBoard/renfang/resi-analyze', |
|||
// query: { |
|||
// org_id: this.orgId, |
|||
// type, |
|||
// type_category: this.currentTab, |
|||
// type_name: name |
|||
// } |
|||
// }); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
let url = 'house_trend'; |
|||
|
|||
this.$refs.pieChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId |
|||
} |
|||
}, |
|||
{ |
|||
// mockId: 60041615, |
|||
} |
|||
); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { currentTab, info } = this; |
|||
|
|||
|
|||
data = JSON.parse(JSON.stringify(data).replace(/count/g, 'value')); |
|||
console.log('data', data); |
|||
this.pieData = data; |
|||
|
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,130 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption () { |
|||
|
|||
return { |
|||
title: { |
|||
text: '单位（户）', |
|||
left: 5, |
|||
textStyle: { |
|||
|
|||
fontSize: 14, |
|||
color: " rgba(255,255,255,0.65)", |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
// legend: {},
|
|||
grid: { |
|||
top:40, |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: 19, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max : 1000, |
|||
splitNumber : 5, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle:{ |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
|
|||
{ |
|||
name: '自住房屋', |
|||
type: 'bar', |
|||
stack: 'Ad', |
|||
barWidth:12, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#6FDEFF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '出租房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#1A95FF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '闲置房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#FFAA00' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
|
|||
|
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
title: { |
|||
text: "0", |
|||
top: 45, |
|||
left: "center", |
|||
textStyle: { |
|||
width: "100%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
fontWeight: 400, |
|||
}, |
|||
itemGap: 5, |
|||
// subtext: "总数",
|
|||
// subtextStyle: {
|
|||
// fontSize: 20,
|
|||
// color: "#fff",
|
|||
// fontWeight: 400,
|
|||
// },
|
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
// legend: {
|
|||
// top: 350,
|
|||
// bottom: 0,
|
|||
// itemWidth: 20,
|
|||
// itemHeight: 10,
|
|||
// textStyle: {
|
|||
// color: '#D2E7FF',
|
|||
// fontSize: 16,
|
|||
// lineHeight: 20,
|
|||
// },
|
|||
|
|||
// },
|
|||
series: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// },
|
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: (list) => { |
|||
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
|
|||
var colorList = [ |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#6FDEFF' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#FFAA00' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#1A95FF' |
|||
}, |
|||
|
|||
] |
|||
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
|
|||
offset: 0, |
|||
color: colorList[list.dataIndex]['colorStart'] |
|||
}, { |
|||
offset: 1, |
|||
color: colorList[list.dataIndex]['colorEnd'] |
|||
}]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data: [ |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
Loading…
Reference in new issue