You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
10 KiB
281 lines
10 KiB
<template>
|
|
<div class="BJinsannianzijin">
|
|
<div class="echart_boxs">
|
|
<div class="echart_boxs_top">
|
|
<div class="echart_boxs_title">【服务业专项资金】</div>
|
|
<!-- <div class="echart_boxs_btn">
|
|
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
|
|
</div> -->
|
|
</div>
|
|
<div class="echart_boxs_middle">
|
|
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
|
|
<div class="BJinsannianzijinchart-right">
|
|
<div class="yushuan">
|
|
<span>资金预算</span>
|
|
<div class="number-box">{{ obj.fundBudget }} <span class="number-unit-box">万元</span></div>
|
|
</div>
|
|
<div class="yushuan">
|
|
<span>追加预算</span>
|
|
<div class="bottom_number number-box">{{ obj.additionBudget }} <span class="number-unit-box">万元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart_boxs_bottom">拨付资金 <span>{{ obj.appropriationFund }}</span>万元 (执行率 <span>{{ obj.implementationRate }}</span>% )</div>
|
|
</div>
|
|
<div class="echart_boxs echart_boxs_right">
|
|
<div class="echart_boxs_top">
|
|
<div class="echart_boxs_title">【总部专项资金】</div>
|
|
<!-- <div class="echart_boxs_btn">
|
|
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
|
|
</div> -->
|
|
</div>
|
|
<div class="echart_boxs_middle">
|
|
<div class="zongbuzhuanxing-box" id="zongbuzhuanxing-box"></div>
|
|
<div class="BJinsannianzijinchart-right">
|
|
<div class="yushuan">
|
|
<span>资金预算</span>
|
|
<div class="number-box">{{ objTwo.fundBudget }} <span class="number-unit-box">万元</span></div>
|
|
</div>
|
|
<div class="yushuan">
|
|
<span>追加预算</span>
|
|
<div class="bottom_number number-box">{{ objTwo.additionBudget }} <span class="number-unit-box">万元</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart_boxs_bottom">拨付资金 <span>{{ objTwo.appropriationFund }}</span>万元 (执行率 <span>{{ objTwo.implementationRate }}</span>% )</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
// import resize from './mixins/resize'
|
|
import { threeYearsFund } from "@/api/jin_ji_hu/zijinbiao"
|
|
const animationDuration = 6000
|
|
|
|
export default {
|
|
// mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '50%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px'
|
|
}
|
|
},
|
|
data() {
|
|
let date = new Date();
|
|
const currentYear = date.getFullYear();
|
|
return {
|
|
chart: null,
|
|
chartTwo:null,
|
|
changeFuwuyeYear: currentYear,
|
|
fuwuyeYear:[
|
|
{
|
|
year: currentYear - 1,
|
|
},{
|
|
year: currentYear - 2,
|
|
},{
|
|
year: currentYear - 3,
|
|
},
|
|
],
|
|
obj:{},
|
|
objTwo:{}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart(this.changeFuwuyeYear)
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
// if (!this.chart) {
|
|
// return
|
|
// }
|
|
// this.chart.dispose()
|
|
// this.chart = null
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
},
|
|
methods: {
|
|
cancalDebounce(){
|
|
// console.log("11111");
|
|
window.onresize = this.chart.resize();
|
|
window.onresize = this.chartTwo.resize();
|
|
},
|
|
initChart(Year) {
|
|
this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
|
|
this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
|
|
let option = {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
splitNumber: 3,
|
|
radius: 70,
|
|
center: ["45%", "95%"],
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
min: 0,
|
|
max: 100,
|
|
pointer: {
|
|
show: true,
|
|
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
|
|
width: 20,
|
|
length: "80%",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[0.6, '#00AEFF'], // 第一个颜色
|
|
[0.63, '#F5F8FA'],
|
|
[1, '#FFA42B '] // 第二个颜色
|
|
],
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
color: "#666",
|
|
fontSize: 16,
|
|
formatter: function (value) {
|
|
return value.toFixed(0);
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
length: "28%",
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: 61.5,
|
|
name: '决策层国际化导向'
|
|
}
|
|
],
|
|
}
|
|
]
|
|
};
|
|
let optionTwo = {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
splitNumber: 3,
|
|
radius: 70,
|
|
center: ["45%", "95%"],
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
min: 0,
|
|
max: 100,
|
|
pointer: {
|
|
show: true,
|
|
icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
|
|
width: 20,
|
|
length: "80%",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[0.6, '#00AEFF'], // 第一个颜色
|
|
[0.63, '#F5F8FA'],
|
|
[1, '#FFA42B '] // 第二个颜色
|
|
],
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
color: "#666",
|
|
fontSize: 16,
|
|
formatter: function (value) {
|
|
return value.toFixed(0);
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
length: "28%",
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: 61.5,
|
|
name: '决策层国际化导向'
|
|
}
|
|
],
|
|
}
|
|
]
|
|
};
|
|
threeYearsFund(Year).then(res=>{
|
|
res.data.map(item=>{
|
|
if(item.serviceType == "1") {
|
|
this.obj = item;
|
|
option.series[0].data[0].value = item.implementationRate
|
|
// 资金预算 fundBudget 追加预算 additionBudget
|
|
if(item.fundBudget <= 0) {
|
|
let color = [ [0, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
|
option.series[0].axisLine.lineStyle.color = color
|
|
} else if(item.additionBudget <= 0) {
|
|
let color = [ [1, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
|
option.series[0].axisLine.lineStyle.color = color
|
|
} else {
|
|
let count = item.fundBudget + item.additionBudget;
|
|
const percentage = (item.fundBudget / count);
|
|
let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
|
|
option.series[0].axisLine.lineStyle.color = color;
|
|
}
|
|
} else {
|
|
this.objTwo = item;
|
|
optionTwo.series[0].data[0].value = item.implementationRate
|
|
if(item.fundBudget <= 0) {
|
|
let color = [ [0, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
|
optionTwo.series[0].axisLine.lineStyle.color = color
|
|
} else if(item.additionBudget <= 0) {
|
|
let color = [ [1, '#00AEFF'], [1, '#FFA42B ']] // 第二个颜色
|
|
optionTwo.series[0].axisLine.lineStyle.color = color
|
|
} else {
|
|
let count = item.fundBudget + item.additionBudget;
|
|
const percentage = (item.fundBudget / count);
|
|
let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
|
|
optionTwo.series[0].axisLine.lineStyle.color = color;
|
|
}
|
|
}
|
|
})
|
|
this.chart.setOption(option)
|
|
this.chartTwo.setOption(optionTwo)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|