Skip to content

G
gavel-hafms-vue
Commit f73e0bf1 authored by 李苏's avatar 李苏 💬
Browse files
Options

加弹框以及调整

parent 79816d2b
Show whitespace changes
Inline Side-by-side
Showing with 951 additions and 72 deletions
src/views/hzcxbb/szkb/index.vue
View file @ f73e0bf1
<template> <template>
<!-- -->
<div v-loading='isLoading' element-loading-text="数据载入中..." id="szkb"> <div v-loading='isLoading' element-loading-text="数据载入中..." id="szkb">
<!-- <Dialog :app='dialog' v-if="dialog.showDialog" /> --> <!-- <Dialog :app='dialog' v-if="dialog.showDialog" /> -->
<Yszx :app='dialog' v-if="dialog.showDialog" /> <Yszx :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='Yszx'" />
<R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R1'" />
<R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R2'" />
<!-- 弹框区域--> <!-- 弹框区域-->
<div class="title"> <div class="title">
大数据展示平台 大数据展示平台
</div> </div>
...@@ -14,9 +18,9 @@ ...@@ -14,9 +18,9 @@
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full" style="height: 50%;"> <div class="full" style="height: 100%;">
<span class="com-count-title"> <span class="com-count-title">
{{lqndylName1}} {{'业务预算总体执行情况(按单位)'}}
</span> </span>
<div v-echartResize="()=>{ <div v-echartResize="()=>{
if(lg1){ if(lg1){
...@@ -27,7 +31,7 @@ ...@@ -27,7 +31,7 @@
</div> </div>
</div> </div>
<div class="full" style="height: 50%;"> <!-- <div class="full" style="height: 50%;">
<span class="com-count-title"> <span class="com-count-title">
{{lqndylName2}} {{lqndylName2}}
</span> </span>
...@@ -38,7 +42,7 @@ ...@@ -38,7 +42,7 @@
}" ref="lg2" class="com-count-body"> }" ref="lg2" class="com-count-body">
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -52,13 +56,13 @@ ...@@ -52,13 +56,13 @@
<i class="i4"></i> <i class="i4"></i>
<!-- 排行数据--> <!-- 排行数据-->
<div style="color: #61d2f7;float: left;font-size: .9vw;margin-top: 2vh;margin-left: 2vh;"> <div style="color: #61d2f7;float: left;font-size: .9vw;margin-top: 2vh;margin-left: 2vh;">
总体排名:1 <pre>
<br> 总体排名: 1
资本排名:2 资本排名: 2
<br> 成本排名
成本项目:2 -成本项目:2
<br> -标准成本:2
标准成本:2 </pre>
</div> </div>
<div class="full" ref="szkbmap" v-echartResize="()=>{ <div class="full" ref="szkbmap" v-echartResize="()=>{
szkbmapCharts.resize() szkbmapCharts.resize()
...@@ -69,14 +73,14 @@ ...@@ -69,14 +73,14 @@
</div> </div>
<div class="third"> <div class="third">
<div class="itemmain boxall itembg "> <div @click="openR1" style="cursor: pointer;" class="itemmain boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full" style="height: 50%;"> <div class="full" style="height: 100%;">
<span class="com-count-title"> <span class="com-count-title">
{{lhName1}} {{'资本性预算执行情况(按单位)'}}
</span> </span>
<div v-echartResize="()=>{ <div v-echartResize="()=>{
if(lg3){ if(lg3){
...@@ -86,7 +90,7 @@ ...@@ -86,7 +90,7 @@
</div> </div>
</div> </div>
<div class="full" style="height: 50%;"> <!-- <div class="full" style="height: 50%;">
<span class="com-count-title"> <span class="com-count-title">
{{lhName2}} {{lhName2}}
</span> </span>
...@@ -97,7 +101,7 @@ ...@@ -97,7 +101,7 @@
}" ref="lg4" class="com-count-body"> }" ref="lg4" class="com-count-body">
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -111,11 +115,9 @@ ...@@ -111,11 +115,9 @@
<i class="i4"></i> <i class="i4"></i>
<div class="full itembg "> <div class="full itembg ">
<!-- 轮播图--> <!-- 轮播图-->
<el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full" <div class="full">
:autoplay="true">
<el-carousel-item style="height: 45vh;">
<span class="com-count-title"> <span class="com-count-title">
预算执行分析-标准成本(单位) 稽核问题展示
</span> </span>
<div ref="slt" v-echartResize="()=>{ <div ref="slt" v-echartResize="()=>{
if(slt1){ if(slt1){
...@@ -124,20 +126,7 @@ ...@@ -124,20 +126,7 @@
}" class="com-count-body"> }" class="com-count-body">
</div> </div>
</el-carousel-item>
<el-carousel-item style="height: 45vh;">
<span class="com-count-title">
预算执行分析-标准成本(科目)
</span>
<div ref="slt2" v-echartResize="()=>{
if(slt2){
slt2.resize()
}
}" class="com-count-body">
</div> </div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
...@@ -195,16 +184,14 @@ ...@@ -195,16 +184,14 @@
</div> </div>
</div> </div>
<div class="third"> <div class="third">
<div class="itemmainb boxall itembg "> <div @click="openR2" style="cursor: pointer;" class="itemmainb boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full" <div class="full">
:autoplay="true">
<el-carousel-item style="height: 45vh;">
<span class="com-count-title"> <span class="com-count-title">
预算执行分析-成本性项目(单位) 成本性预算执行情况(按单位)
</span> </span>
<div ref="slt3" v-echartResize="()=>{ <div ref="slt3" v-echartResize="()=>{
if(slt3){ if(slt3){
...@@ -213,20 +200,7 @@ ...@@ -213,20 +200,7 @@
}" class="com-count-body"> }" class="com-count-body">
</div> </div>
</el-carousel-item>
<el-carousel-item style="height: 45vh;">
<span class="com-count-title">
预算执行分析-成本性项目(专业)
</span>
<div ref="slt4" v-echartResize="()=>{
if(slt4){
slt4.resize()
}
}" class="com-count-body">
</div> </div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
</div> </div>
...@@ -237,6 +211,8 @@ ...@@ -237,6 +211,8 @@
import huaian from "common/src/assets/mapJson/huaian.json" import huaian from "common/src/assets/mapJson/huaian.json"
import Dialog from "./dialog.vue" import Dialog from "./dialog.vue"
import Yszx from './yszx.vue' import Yszx from './yszx.vue'
import R1 from './r1.vue'
import R2 from './r2.vue'
import { import {
doQuery, doQuery,
doDelete, doDelete,
...@@ -253,7 +229,9 @@ ...@@ -253,7 +229,9 @@
components: { components: {
vueSeamless, vueSeamless,
Dialog, Dialog,
Yszx Yszx,
R1,
R2
}, },
mounted() { mounted() {
this.mounted() this.mounted()
...@@ -289,6 +267,7 @@ ...@@ -289,6 +267,7 @@
/* 加载蒙层*/ /* 加载蒙层*/
isLoading: true, isLoading: true,
dialog: { dialog: {
DialogName:null,
showDialog: false, showDialog: false,
DialogTitle: '测试', DialogTitle: '测试',
DialogWidth: '40vw' DialogWidth: '40vw'
...@@ -298,6 +277,16 @@ ...@@ -298,6 +277,16 @@
} }
}, },
methods: { methods: {
openR1(){
this.dialog.DialogTitle ='资本性预算执行情况'
this.dialog.DialogName='R1'
this.dialog.showDialog = true
},
openR2(){
this.dialog.DialogTitle ='成本性预算执行情况'
this.dialog.DialogName='R2'
this.dialog.showDialog = true
},
mounted() { mounted() {
/*初始化*/ /*初始化*/
/* 地图后端数据*/ /* 地图后端数据*/
...@@ -333,6 +322,9 @@ ...@@ -333,6 +322,9 @@
let lsxList = records.filter(item => { let lsxList = records.filter(item => {
return item.bmName == '涟水县供电公司' return item.bmName == '涟水县供电公司'
}) })
let hyList = records.filter(item => {
return item.bmName == '淮阴区供电公司'
})
/* 滚动表格数据*/ /* 滚动表格数据*/
this.$post('hafms/yszxjdlog/queryRepDetail', {}).then(res => { this.$post('hafms/yszxjdlog/queryRepDetail', {}).then(res => {
if (res.success) { if (res.success) {
...@@ -347,20 +339,24 @@ ...@@ -347,20 +339,24 @@
fullScreen(document.getElementById("szkb")); fullScreen(document.getElementById("szkb"));
}, false); }, false);
/* 初始化地图*/ /* 初始化地图*/
debugger
this.szkbmapCharts = this.initSzkbmapCharts({ this.szkbmapCharts = this.initSzkbmapCharts({
habbList: habbList, habbList: habbList,
jhxList: jhxList, jhxList: jhxList,
xyxList: xyxList, xyxList: xyxList,
hzxList: hzxList, hzxList: hzxList,
lsxList: lsxList lsxList: lsxList,
hyList:hyList
}) })
this.szkbmapCharts.on("click", (params) => { this.szkbmapCharts.on("click", (params) => {
console.log(params)
if (params.data) { if (params.data) {
//获取到定义的数据 //获取到定义的数据
let info = params.data.data let info = params.data.data
/* 弹框传参查询*/ /* 弹框传参查询*/
this.dialog.bmid = info.bmid this.dialog.bmid = info.bmid
this.dialog.DialogTitle = info.bmName this.dialog.DialogTitle = info.bmName
this.dialog.DialogName='Yszx'
this.dialog.showDialog = true this.dialog.showDialog = true
} }
}); });
...@@ -374,7 +370,7 @@ ...@@ -374,7 +370,7 @@
this.initslt() this.initslt()
this.initslt2() this.initslt2()
this.initslt3() this.initslt3()
this.initslt4() // this.initslt4()
}, },
initLqnd() { initLqnd() {
...@@ -418,7 +414,7 @@ ...@@ -418,7 +414,7 @@
} }
}) })
this.lg1 = this.initlg1(showLxg1) this.lg1 = this.initlg1(showLxg1)
this.lg2 = this.initlg2(showLxg2) // this.lg2 = this.initlg2(showLxg2)
} }
} }
}) })
...@@ -465,7 +461,7 @@ ...@@ -465,7 +461,7 @@
}) })
this.lg3 = this.initlg3(showLxg1) this.lg3 = this.initlg3(showLxg1)
this.lg4 = this.initlg4(showLxg2) // this.lg4 = this.initlg4(showLxg2)
} }
} }
}) })
...@@ -478,7 +474,8 @@ ...@@ -478,7 +474,8 @@
jhxList, jhxList,
xyxList, xyxList,
hzxList, hzxList,
lsxList lsxList,
hyList
}) { }) {
this.mapList = [] this.mapList = []
let huaian1 = _.cloneDeep(huaian) let huaian1 = _.cloneDeep(huaian)
...@@ -561,7 +558,24 @@ ...@@ -561,7 +558,24 @@
data: item.properties.apiData data: item.properties.apiData
}) })
} }
} else { }
/* 未加*/
else if (item.properties.name == '淮阴区') {
item.properties.name = '淮阴区供电公司'
if (lsxList.length != 0) {
item.properties.apiData = lsxList[0]
item.properties.name = `淮阴区供电公司
${hyList?0:hyList[0].pm}
${hyList?0:hyList[0].wcl}%
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
}else {
item.properties.name = '' item.properties.name = ''
} }
}) })
...@@ -2013,6 +2027,7 @@ ...@@ -2013,6 +2027,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
#szkb { #szkb {
.com-count-title { .com-count-title {
transform: translateY(10px); transform: translateY(10px);
font-size: 1vw; font-size: 1vw;
......
src/views/hzcxbb/szkb/r1.vue 0 → 100644
View file @ f73e0bf1
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
<!-- 下拉框切换-->
<div class="xlk">
<el-select :popper-append-to-body='false' v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!-- 图表框-->
<div class="full">
<div v-show="value=='1'" ref="v1" v-echartResize="()=>{
if(v1){
v1.resize()
}
}" class="full">1 </div>
<div v-show="value=='2'" ref="v2" v-echartResize="()=>{
if(v2){
v2.resize()
}
}" class="full">2 </div>
</div>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(() => {
this.v1= this.initv1()
this.v2= this.initv2()
})
},
data() {
return {
v1:null,
v2:null,
options: [{
value: '1',
label: '单位'
}, {
value: '2',
label: '项目类型'
}],
value: '1'
}
},
methods: {
initv1(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v1"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
initv2(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v2"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
}
}
</script>
<style scoped>
.xlk {
width: 100px;
position: absolute;
right: 60px;
top: 10px;
}
/deep/.el-dialog {
background: url(./static/bg.png);
background-size: 100% 100%;
opacity: 1;
}
/deep/.el-dialog__title {
color: #fff;
}
.search-span {
color: #fff !important;
}
.min_full {
border: 0px solid !important;
}
.search {
border: 0px solid !important;
}
/deep/.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table tr {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table {
background-color: rgba(0, 0, 0, .2) !important;
}
/deep/ .el-popper{
z-index: 9999!important;
}
</style>
src/views/hzcxbb/szkb/r2.vue 0 → 100644
View file @ f73e0bf1
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
<!-- 下拉框切换-->
<div class="xlk">
<el-select :popper-append-to-body='false' v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!-- 图表框-->
<div class="full">
<div v-show="value=='1'" ref="v1" v-echartResize="()=>{
if(v1){
v1.resize()
}
}" class="full">1 </div>
<div v-show="value=='2'" ref="v2" v-echartResize="()=>{
if(v2){
v2.resize()
}
}" class="full">2 </div>
</div>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(() => {
this.v1= this.initv1()
this.v2= this.initv2()
})
},
data() {
return {
v1:null,
v2:null,
options: [{
value: '1',
label: '单位'
}, {
value: '2',
label: '项目类型'
}],
value: '1'
}
},
methods: {
initv1(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v1"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
initv2(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v2"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
}
}
</script>
<style scoped>
.xlk {
width: 100px;
position: absolute;
right: 60px;
top: 10px;
}
/deep/.el-dialog {
background: url(./static/bg.png);
background-size: 100% 100%;
opacity: 1;
}
/deep/.el-dialog__title {
color: #fff;
}
.search-span {
color: #fff !important;
}
.min_full {
border: 0px solid !important;
}
.search {
border: 0px solid !important;
}
/deep/.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table tr {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table {
background-color: rgba(0, 0, 0, .2) !important;
}
/deep/ .el-popper{
z-index: 9999!important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment