13176889840
4 years ago
7 changed files with 1258 additions and 178 deletions
@ -0,0 +1,184 @@ |
|||||
|
@import '../../c/config'; |
||||
|
@import '../../c/function'; |
||||
|
@import './c/common'; |
||||
|
|
||||
|
.title { |
||||
|
padding: 10px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
.customer_cascader { |
||||
|
margin-left: 10px; |
||||
|
width: 280px; |
||||
|
} |
||||
|
|
||||
|
.customer_select { |
||||
|
margin-left: 10px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
> span { |
||||
|
width: auto; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
line-height: 34px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-cpt-resi { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
// flex-wrap: wrap; |
||||
|
// justify-content: center; |
||||
|
height: calc(100vh - 170px); |
||||
|
|
||||
|
.g-l { |
||||
|
flex-shrink: 0; |
||||
|
width: 700px; |
||||
|
height: calc(100vh - 230px); |
||||
|
|
||||
|
.l_top { |
||||
|
height: 385px; |
||||
|
display: flex; |
||||
|
.g-count { |
||||
|
width: 100px; |
||||
|
} |
||||
|
.g-pie { |
||||
|
} |
||||
|
} |
||||
|
.l_bottom { |
||||
|
height: calc(100vh - 230px - 385px); |
||||
|
margin-top: 20px; |
||||
|
> span { |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
.echart-line { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-r { |
||||
|
text-align: center; |
||||
|
margin: 40px 19px 20px; |
||||
|
width: calc(100vw - 60px - 800px); |
||||
|
height: calc(100vh - 160px - 20px); |
||||
|
} |
||||
|
} |
||||
|
.g-count { |
||||
|
margin-top: 104px; |
||||
|
margin-left: 52px; |
||||
|
.t_count { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
opacity: 0.76; |
||||
|
} |
||||
|
.c_count { |
||||
|
font-size: 48px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
.t_yestoday { |
||||
|
margin-top: 59px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
opacity: 0.76; |
||||
|
> span { |
||||
|
margin-left: 18px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #f42800; |
||||
|
} |
||||
|
} |
||||
|
.t_today { |
||||
|
margin-top: 12px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
opacity: 0.76; |
||||
|
> span { |
||||
|
margin-left: 18px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #3edd7f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-r { |
||||
|
.tb { |
||||
|
position: relative; |
||||
|
height: calc(100vh - 220px); |
||||
|
overflow-y: auto; |
||||
|
@include scrollBar; |
||||
|
|
||||
|
.m-pagination { |
||||
|
position: absolute; |
||||
|
box-sizing: border-box; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
|
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
|
background: #0266d1; |
||||
|
color: #000d3f; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .el-pager li { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-prev { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-next { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.echart-wr { |
||||
|
margin-left: 30px; |
||||
|
// margin-top: 100px; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
.echart-org { |
||||
|
width: 100%; |
||||
|
height: 90%; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,477 @@ |
|||||
|
<template> |
||||
|
<cpt-card> |
||||
|
<div class="title"> |
||||
|
<img src="@/assets/img/shuju/title-tip.png" /> |
||||
|
<span>项目处理分析</span> |
||||
|
<el-cascader class="customer_cascader" |
||||
|
ref="myCascader" |
||||
|
v-model="agencyIdArray" |
||||
|
:key="iscascaderShow" |
||||
|
:options="casOptions" |
||||
|
:props="optionProps" |
||||
|
@change="handleChangeAgency" |
||||
|
clearable></el-cascader> |
||||
|
|
||||
|
<div class="customer_select"> |
||||
|
|
||||
|
<el-select v-model="status" |
||||
|
:popper-append-to-body="false" |
||||
|
placeholder="请选择"> |
||||
|
<el-option v-for="(item,index) in stateArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
@click.native="handleChangeState(index)"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="g-cpt-resi"> |
||||
|
<div class="g-l"> |
||||
|
<div class="l_top"> |
||||
|
<div class="g-count"> |
||||
|
<div class="t_count">项目总数</div> |
||||
|
<div class="c_count">{{projectTotal}}</div> |
||||
|
<div class="t_yestoday">昨日 |
||||
|
<span class="c_yestoday">{{dateIncr}}</span> |
||||
|
</div> |
||||
|
<div class="t_today">上月 |
||||
|
<span class="c_today">{{monthIncr}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="g-pie"> |
||||
|
<screen-echarts-frame class="echart-wr" |
||||
|
@myChartMethod="pieInitOk" |
||||
|
ref="pieChart"></screen-echarts-frame> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="l_bottom"> |
||||
|
<span>近12月新增项目数折线图</span> |
||||
|
<screen-echarts-frame class="echart-line" |
||||
|
@myChartMethod="lineInitOk" |
||||
|
ref="lineChart"></screen-echarts-frame> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="g-r"> |
||||
|
<div class="m-tb"> |
||||
|
|
||||
|
<div class="tb"> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</cpt-card> |
||||
|
</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"; |
||||
|
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame"; |
||||
|
|
||||
|
import { pieOption } from './processPieOption.js' |
||||
|
import { lineOption } from './processLineOption.js' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: "HomeMap", |
||||
|
data () { |
||||
|
return { |
||||
|
showNoData: false, |
||||
|
timer: null, |
||||
|
|
||||
|
projectTotal: 0, |
||||
|
dateIncr: 0, |
||||
|
monthIncr: 0, |
||||
|
|
||||
|
lineChart: '', |
||||
|
lineOption: {}, |
||||
|
lineInitState: false, |
||||
|
lineColorArray: [], |
||||
|
lineData: [820, 932, 901, 934, 1290, 1330, 1320], |
||||
|
|
||||
|
pieChart: '', |
||||
|
pieOption: {}, |
||||
|
pieInitState: false, |
||||
|
pieTotal: 0, |
||||
|
colorArray: [], |
||||
|
pieData: [ |
||||
|
{ value: 1048, name: '未结案', color: '#FAC126', selected: true }, |
||||
|
{ value: 735, name: '已结案', color: '#3DDA83' }, |
||||
|
|
||||
|
], |
||||
|
//voting 已转项目：shift_project 已关闭：closed，全部：all |
||||
|
stateArray: [ |
||||
|
{ |
||||
|
label: '全部', |
||||
|
value: 'all' |
||||
|
}, |
||||
|
{ |
||||
|
label: '表决中', |
||||
|
value: 'voting' |
||||
|
}, |
||||
|
{ |
||||
|
label: '已转项目', |
||||
|
value: 'shift_project' |
||||
|
}, |
||||
|
{ |
||||
|
label: '已关闭', |
||||
|
value: 'closed' |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
status: 'all', |
||||
|
agencyId: '', |
||||
|
|
||||
|
casOptions: [], |
||||
|
agencyIdArray: [], |
||||
|
customerList: [], |
||||
|
iscascaderShow: 0, |
||||
|
|
||||
|
optionProps: { |
||||
|
multiple: false, |
||||
|
value: 'agencyId', |
||||
|
label: 'agencyName', |
||||
|
children: 'subAgencyList', |
||||
|
checkStrictly: true |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
// mixins: [animate] |
||||
|
beforeDestroy () { |
||||
|
this.timer && clearInterval(this.timer) |
||||
|
}, |
||||
|
|
||||
|
async mounted () { |
||||
|
this.userId = this.uid; |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async getApiData () { |
||||
|
await this.getAgencylist()//获取组织级别 |
||||
|
await this.getProjectTotal() |
||||
|
await this.getLine() |
||||
|
// await this.getTable(); |
||||
|
}, |
||||
|
|
||||
|
async getAgencylist () { |
||||
|
const url = '/gov/org/customeragency/agencylist' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' |
||||
|
|
||||
|
const params = { |
||||
|
customerId: '613cc61a6b8ce4c70d21bd413dac72cc' |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
++this.iscascaderShow |
||||
|
this.casOptions = [] |
||||
|
this.agencyIdArray.length = [] |
||||
|
|
||||
|
if (data) { |
||||
|
this.casOptions.push(data) |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//加载项目 |
||||
|
async getProjectTotal () { |
||||
|
// const url = "/data/aggregator/project/projecttotal"; |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal"; |
||||
|
let params = { |
||||
|
agencyId: '', |
||||
|
dateId: '', |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.projectTotal = data.projectTotal |
||||
|
this.dateIncr = data.dateIncr |
||||
|
this.monthIncr = data.monthIncr |
||||
|
|
||||
|
this.pieData = [ |
||||
|
{ |
||||
|
name: "未结案", |
||||
|
value: data.pendingTotal, |
||||
|
selected: true, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
name: "已结案", |
||||
|
value: data.pendingTotal |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
this.getPie() |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
pieInitOk () { |
||||
|
console.log('pie准备好了') |
||||
|
this.pieInitState = true |
||||
|
|
||||
|
}, |
||||
|
lineInitOk () { |
||||
|
console.log('pie准备好了') |
||||
|
this.lineInitState = true |
||||
|
|
||||
|
}, |
||||
|
getLine () { |
||||
|
if (this.lineInitState) { |
||||
|
this.getLineChart() |
||||
|
} else { |
||||
|
setTimeout(() => { |
||||
|
this.getLine() |
||||
|
}, 500) |
||||
|
} |
||||
|
}, |
||||
|
// 获取折线图 |
||||
|
async getLineChart () { |
||||
|
this.$refs.lineChart.clear() |
||||
|
|
||||
|
const _that = this |
||||
|
// this.$refs.pieChart.showLoading() |
||||
|
// const url ="/gov/issue/issue/resibuzz-leftpiechart"; |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart"; |
||||
|
let params = { |
||||
|
agencyId: this.agencyId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
// 获取pieChart配置 |
||||
|
this.lineOption = lineOption() |
||||
|
if (data && data.length > 0) { |
||||
|
// this.lineData = data |
||||
|
|
||||
|
} else { |
||||
|
this.lineData = [0] |
||||
|
} |
||||
|
|
||||
|
debugger |
||||
|
this.$refs.lineChart.setOption(this.lineOption) |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
getPie () { |
||||
|
if (this.pieInitState) { |
||||
|
this.getPieChart() |
||||
|
} else { |
||||
|
setTimeout(() => { |
||||
|
this.getPie() |
||||
|
}, 500) |
||||
|
} |
||||
|
}, |
||||
|
// 获取饼状图 |
||||
|
async getPieChart () { |
||||
|
this.$refs.pieChart.clear() |
||||
|
this.pieTotal = 0 |
||||
|
const _that = this |
||||
|
// this.$refs.pieChart.showLoading() |
||||
|
|
||||
|
// 获取pieChart配置 |
||||
|
this.pieOption = pieOption() |
||||
|
|
||||
|
this.pieData.forEach(item => { |
||||
|
this.pieTotal = this.pieTotal + item.value |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
|
||||
|
this.pieOption.title.text = this.pieTotal |
||||
|
|
||||
|
this.clickPie(0) |
||||
|
|
||||
|
let fun = function (params) { |
||||
|
_that.clickPie(params.dataIndex) |
||||
|
} |
||||
|
this.$refs.pieChart.handleClick(fun) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
clickPie (seriesIndex) { |
||||
|
this.pieData.forEach((element, index) => { |
||||
|
if (index === seriesIndex) { |
||||
|
element.label = { |
||||
|
show: true, |
||||
|
|
||||
|
}; |
||||
|
element.labelLine = { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
opacity: 1, |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
} else { |
||||
|
element.label = { |
||||
|
show: false, |
||||
|
|
||||
|
}; |
||||
|
element.labelLine = { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
opacity: 0, |
||||
|
color: 'rgba(255,255,255,0)' |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
|
this.pieOption.series[1].data = this.pieData |
||||
|
// this.$refs.pieChart.hideLoading() |
||||
|
this.$refs.pieChart.setOption(this.pieOption) |
||||
|
}, |
||||
|
|
||||
|
handleChangeState (index) { |
||||
|
// this.getTable() |
||||
|
}, |
||||
|
|
||||
|
handleChangeAgency (value) { |
||||
|
console.log(value) |
||||
|
this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label |
||||
|
this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '' |
||||
|
console.log(this.agencyIdArray) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
toUserInfo (uid) { |
||||
|
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` }); |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
uid: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
// default: "8ada68cb6f1e4b9a8333348a39ef3aee", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
|
||||
|
components: { |
||||
|
cptCard, |
||||
|
cptTb, |
||||
|
screenEchartsFrame, |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
uid (id) { |
||||
|
this.userId = id; |
||||
|
}, |
||||
|
userId () { |
||||
|
this.getApiData(); |
||||
|
window.scrollTo(0, 0); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/processAnalyze.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
|
||||
|
<style lang=scss > |
||||
|
.customer_select { |
||||
|
/* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */ |
||||
|
/deep/ input::-webkit-input-placeholder { |
||||
|
color: #fff; |
||||
|
} |
||||
|
/deep/ input::-moz-input-placeholder { |
||||
|
color: #fff; |
||||
|
} |
||||
|
/deep/ input::-ms-input-placeholder { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 修改的是el-input的样式 */ |
||||
|
/* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */ |
||||
|
/* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */ |
||||
|
/deep/ .el-select, |
||||
|
/deep/ .el-input, |
||||
|
/deep/ .el-input__inner { |
||||
|
background-color: #08164d00; |
||||
|
color: #fff; |
||||
|
border: 0px; |
||||
|
border-radius: 0px; |
||||
|
text-align: left; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
/* el-input聚焦的时候 外层的border会有一个样式 */ |
||||
|
/deep/ .el-select .el-input.is-focus .el-input__inner { |
||||
|
border: 0px; |
||||
|
} |
||||
|
|
||||
|
/* 修改的是el-input上下的小图标的颜色 */ |
||||
|
/deep/ .el-select .el-input .el-select__caret::before { |
||||
|
color: #fff; |
||||
|
content: ""; |
||||
|
background: url("../../../../assets/img/xiala.png") center center no-repeat; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
|
||||
|
/* 修改总体选项的样式 最外层 */ |
||||
|
/deep/ .el-select-dropdown { |
||||
|
background-color: #08164d; |
||||
|
margin: 0px; |
||||
|
border: 0px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
|
|
||||
|
/* 修改选项整体的样式 */ |
||||
|
/deep/ .el-select-dropdown__list { |
||||
|
padding: 6px 0 20px 0; |
||||
|
} |
||||
|
/* 修改单个的选项的样式 */ |
||||
|
/deep/ .el-select-dropdown__item { |
||||
|
background-color: transparent; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* item选项的hover样式 */ |
||||
|
/deep/ .el-select-dropdown__item.hover, |
||||
|
/deep/ .el-select-dropdown__item:hover { |
||||
|
color: #409eff; |
||||
|
} |
||||
|
|
||||
|
/* 修改的是下拉框选项内容上方的尖角 */ |
||||
|
/deep/ .el-popper .popper__arrow, |
||||
|
.el-popper .popper__arrow::after { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
|
||||
|
export function lineOption () { |
||||
|
|
||||
|
return { |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
||||
|
type: 'line', |
||||
|
areaStyle: {} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,160 @@ |
|||||
|
|
||||
|
export function pieOption () { |
||||
|
const center= ['50%', '200px'] |
||||
|
return { |
||||
|
title: { |
||||
|
text: '0', |
||||
|
top: 170, |
||||
|
left: 'center', |
||||
|
textStyle: { |
||||
|
width: '100%', |
||||
|
fontSize: 32, |
||||
|
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: [ |
||||
|
// 外侧圆环
|
||||
|
{ |
||||
|
type: 'pie', |
||||
|
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
||||
|
startAngle: 0, |
||||
|
hoverAnimation: false, |
||||
|
// tooltip: {
|
||||
|
// },
|
||||
|
center: center, |
||||
|
radius: ['58%', '58.3%'], |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
data: [{ |
||||
|
value: 360, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
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: ['35%', '48%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
// top: top + '%',
|
||||
|
// height: '80%',
|
||||
|
selectedMode: 'single', |
||||
|
left: 'center', |
||||
|
width: 400, |
||||
|
label: { |
||||
|
position: 'outer', |
||||
|
// alignTo: 'edge',
|
||||
|
formatter: '{a|{c}}\n\n{name|{b}}', |
||||
|
// minMargin: 100,
|
||||
|
// edgeDistance: 0,
|
||||
|
// lineHeight: 20,
|
||||
|
color: '#fff', |
||||
|
fontSize: 12, |
||||
|
distanceToLabelLine: -60, |
||||
|
rich: { |
||||
|
a: { |
||||
|
fontSize: '30px', |
||||
|
color: ' #00F5FE', |
||||
|
|
||||
|
}, |
||||
|
b: { |
||||
|
lineHeight: 0, |
||||
|
fontSize: '20px', |
||||
|
color: ' #FFFFFF' |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
smooth: 0.2, |
||||
|
length: 30, |
||||
|
length2: 90 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color:function(params) { |
||||
|
//自定义颜色
|
||||
|
var colorList = [ '#FAC126', '#3DDA83']; |
||||
|
return colorList[params.dataIndex] |
||||
|
} |
||||
|
}, |
||||
|
data: [], |
||||
|
|
||||
|
}, |
||||
|
// 中间圆环
|
||||
|
{ |
||||
|
type: 'pie', |
||||
|
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
||||
|
startAngle: 0, |
||||
|
hoverAnimation: false, |
||||
|
center: center, |
||||
|
// tooltip: {
|
||||
|
// },
|
||||
|
radius: ['0%', '25%'], |
||||
|
label: { |
||||
|
|
||||
|
show: false |
||||
|
|
||||
|
}, |
||||
|
labelLine: { |
||||
|
|
||||
|
show: false |
||||
|
|
||||
|
}, |
||||
|
data: [{ |
||||
|
value: 360, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: 'rgba(8, 37, 134, 1)', |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue