Skip to content

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

调整

parent ed733825
Hide whitespace changes
Inline Side-by-side
Showing with 637 additions and 624 deletions
src/views/hzcxbb/szkb/index.vue
View file @ 79f1385f
...@@ -100,8 +100,8 @@ ...@@ -100,8 +100,8 @@
<span class="com-count-title"> <span class="com-count-title">
示例图例 示例图例
</span> </span>
<div ref="slt" class="com-count-body"> <div ref="slt" class="com-count-body">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -121,6 +121,16 @@ ...@@ -121,6 +121,16 @@
<div class="flex1 text-center "> <div class="flex1 text-center ">
项目类别 项目类别
</div> </div>
<div class="flex1 text-center ">
省完成率
</div>
<div class="flex1 text-center ">
公司完成率
</div>
<div class="flex1 text-center ">
单位完成率
</div>
<div class="flex1 text-center "> <div class="flex1 text-center ">
完成率 完成率
</div> </div>
...@@ -132,6 +142,9 @@ ...@@ -132,6 +142,9 @@
<div class="full lbtit"> <div class="full lbtit">
<div style="line-height: 25px;display: flex;" v-for="item in listData"> <div style="line-height: 25px;display: flex;" v-for="item in listData">
<div style="color: #fff ;" v-text="item.xmflname"></div> <div style="color: #fff ;" v-text="item.xmflname"></div>
<div style="color: #fff ;" v-text="item.spjwcl"></div>
<div style="color: #fff ;" v-text="item.gdgswcl"></div>
<div style="color: #fff ;" v-text="item.zsdwwcl"></div>
<div style="color: #fff ;" v-text="item.wcl"></div> <div style="color: #fff ;" v-text="item.wcl"></div>
<div style="color: #fff ;" v-text="item.pm"></div> <div style="color: #fff ;" v-text="item.pm"></div>
</div> </div>
...@@ -186,12 +199,12 @@ ...@@ -186,12 +199,12 @@
Yszx Yszx
}, },
mounted() { mounted() {
this.mounted() this.mounted()
/* 刷新频率*/ /* 刷新频率*/
const DELAY=1000*60*30 const DELAY = 1000 * 60 * 30
this.DELAYNUM=setInterval(()=>{ this.DELAYNUM = setInterval(() => {
this.mounted() this.mounted()
},DELAY) }, DELAY)
}, },
destroyed() { destroyed() {
clearInterval(this.DELAYNUM) clearInterval(this.DELAYNUM)
...@@ -199,7 +212,7 @@ ...@@ -199,7 +212,7 @@
data() { data() {
return { return {
/* 定时器id*/ /* 定时器id*/
DELAYNUM:null, DELAYNUM: null,
/* 两区农电预算一览 */ /* 两区农电预算一览 */
lqndylName1: '', lqndylName1: '',
lqndylName2: '', lqndylName2: '',
...@@ -215,12 +228,11 @@ ...@@ -215,12 +228,11 @@
DialogWidth: '40vw' DialogWidth: '40vw'
}, },
/* 淮安公司*/ /* 淮安公司*/
listData: [ listData: []
]
} }
}, },
methods: { methods: {
mounted(){ mounted() {
/*初始化*/ /*初始化*/
/* 地图后端数据*/ /* 地图后端数据*/
doQueryRepDetail({ doQueryRepDetail({
...@@ -244,13 +256,13 @@ ...@@ -244,13 +256,13 @@
return item.bmName == '淮安供电公司本部' return item.bmName == '淮安供电公司本部'
}) })
/* 展示数据查询*/ /* 展示数据查询*/
if(habbList.length>0){ if (habbList.length > 0) {
let bmid=habbList[0].bmid let bmid = habbList[0].bmid
this.$post('hafms/yszxjdlog/queryRepDetail',{ this.$post('hafms/yszxjdlog/queryRepDetail', {
bmid:bmid bmid: bmid
}).then(res=>{ }).then(res => {
if(res.success){ if (res.success) {
this.listData=res.data.records||[] this.listData = res.data.records || []
} }
}) })
} }
...@@ -292,7 +304,7 @@ ...@@ -292,7 +304,7 @@
} }
}); });
}) })
this.isLoading = false this.isLoading = false
} }
}) })
...@@ -303,7 +315,7 @@ ...@@ -303,7 +315,7 @@
}, },
initLqnd() { initLqnd() {
this.$post('hafms/yszhcxlog/queryRepDetail', { this.$post('hafms/yszhcxlog/queryRepDetail', {
lx: 'A' lx: 'A'
}).then(res => { }).then(res => {
if (res.success && res.data.records) { if (res.success && res.data.records) {
const { const {
...@@ -323,18 +335,18 @@ ...@@ -323,18 +335,18 @@
} }
}) })
/* 开始构建参数*/ /* 开始构建参数*/
const LENGTH=6 const LENGTH = 6
/* 选取前LENGTH个展示*/ /* 选取前LENGTH个展示*/
let showLxg1=lxh1.filter((item,index)=>{ let showLxg1 = lxh1.filter((item, index) => {
if(index<LENGTH){ if (index < LENGTH) {
return true
}
})
let showLxg2 = lxh2.filter((item, index) => {
if (index < LENGTH) {
return true return true
} }
}) })
let showLxg2=lxh2.filter((item,index)=>{
if(index<LENGTH){
return true
}
})
this.lg1 = this.initlg1(showLxg1) this.lg1 = this.initlg1(showLxg1)
this.lg2 = this.initlg2(showLxg2) this.lg2 = this.initlg2(showLxg2)
} }
...@@ -343,7 +355,7 @@ ...@@ -343,7 +355,7 @@
}, },
initLqnd2() { initLqnd2() {
this.$post('hafms/yszhcxlog/queryRepDetail', { this.$post('hafms/yszhcxlog/queryRepDetail', {
lx: 'B' lx: 'B'
}).then(res => { }).then(res => {
if (res.success && res.data.records) { if (res.success && res.data.records) {
const { const {
...@@ -363,18 +375,18 @@ ...@@ -363,18 +375,18 @@
} }
}) })
const LENGTH=6 const LENGTH = 6
/* 选取前LENGTH个展示*/ /* 选取前LENGTH个展示*/
let showLxg1=lxh1.filter((item,index)=>{ let showLxg1 = lxh1.filter((item, index) => {
if(index<LENGTH){ if (index < LENGTH) {
return true return true
} }
}) })
let showLxg2=lxh2.filter((item,index)=>{ let showLxg2 = lxh2.filter((item, index) => {
if(index<LENGTH){ if (index < LENGTH) {
return true return true
} }
}) })
this.lg3 = this.initlg3(showLxg1) this.lg3 = this.initlg3(showLxg1)
this.lg4 = this.initlg4(showLxg2) this.lg4 = this.initlg4(showLxg2)
...@@ -401,8 +413,8 @@ ...@@ -401,8 +413,8 @@
item.properties.apiData = habbList[0] item.properties.apiData = habbList[0]
item.properties.name = `淮安供电公司本部 item.properties.name = `淮安供电公司本部
${habbList[0].pm}(排名) ${habbList[0].pm}
${habbList[0].wcl}(完成率) ${habbList[0].wcl}%
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -415,10 +427,11 @@ ...@@ -415,10 +427,11 @@
if (jhxList.length != 0) { if (jhxList.length != 0) {
item.properties.apiData = jhxList[0] item.properties.apiData = jhxList[0]
item.properties.name = item.properties.name =
`金湖县供电公司 `金湖县供电公司
${jhxList[0].pm}(排名) ${jhxList[0].pm}
${jhxList[0].wcl}(完成率)
${jhxList[0].wcl}%
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -432,8 +445,9 @@ ...@@ -432,8 +445,9 @@
item.properties.name = item.properties.name =
`盱眙县供电公司 `盱眙县供电公司
${xyxList[0].pm}(排名) ${xyxList[0].pm}
${xyxList[0].wcl}(完成率)
${xyxList[0].wcl}%
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -446,8 +460,9 @@ ...@@ -446,8 +460,9 @@
item.properties.apiData = hzxList[0] item.properties.apiData = hzxList[0]
item.properties.name = `洪泽县供电公司 item.properties.name = `洪泽县供电公司
${hzxList[0].pm}(排名) ${hzxList[0].pm}
${hzxList[0].wcl}(完成率)
${hzxList[0].wcl}%
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -460,8 +475,9 @@ ...@@ -460,8 +475,9 @@
item.properties.apiData = lsxList[0] item.properties.apiData = lsxList[0]
item.properties.name = `涟水县供电公司 item.properties.name = `涟水县供电公司
${lsxList[0].pm}(排名) ${lsxList[0].pm}
${lsxList[0].wcl}(完成率)
${lsxList[0].wcl}%
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -478,240 +494,237 @@ ...@@ -478,240 +494,237 @@
initslt() { initslt() {
const charts = this.$echarts.init(this.$refs["slt"]); const charts = this.$echarts.init(this.$refs["slt"]);
var num = 77.8 var num = 77.8
var color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [ var color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
{ offset: 0,
offset: 0, color: 'rgb(255,46,46)', // 0% 处的颜色
color: 'rgb(255,46,46)', // 0% 处的颜色 },
}, {
{ offset: 1,
offset: 1, color: 'rgb(255,100,46)', // 100% 处的颜色
color: 'rgb(255,100,46)', // 100% 处的颜色 },
},
]); ]);
let data1 = { let data1 = {
name:'', name: '',
value:num value: num
} }
let n = num; let n = num;
let progress = (n * 0.01).toFixed(2); let progress = (n * 0.01).toFixed(2);
var colorSet = [ var colorSet = [
[progress, color], [progress, color],
[1, 'rgba(0, 97, 226, 0.25)'], [1, 'rgba(0, 97, 226, 0.25)'],
]; ];
let sizeC1 = 'rgb(255,215,37)'; let sizeC1 = 'rgb(255,215,37)';
let fontSize = 23; let fontSize = 23;
var rich = { var rich = {
white: { white: {
height: 30, height: 30,
fontSize: fontSize * 0.6, fontSize: fontSize * 0.6,
color: 'rgba(255,255,255,0.5)', color: 'rgba(255,255,255,0.5)',
}, },
bule: { bule: {
fontSize: fontSize * 2, fontSize: fontSize * 2,
color: sizeC1, color: sizeC1,
}, },
radius: { radius: {
height: 35, height: 35,
fontSize: 23, fontSize: 23,
color: sizeC1, color: sizeC1,
textAlign: 'center', textAlign: 'center',
}, },
size: { size: {
height: 400, height: 400,
}, },
}; };
var option = { var option = {
title: [ title: [{
{ text: '处理率',
text: '处理率', x: 'center',
x: 'center', top: '32%',
top: '32%', textStyle: {
textStyle: { color: '#fff',
color: '#fff', fontSize: 14,
fontSize: 14, fontWeight: '100',
fontWeight: '100', },
}, },
{
text: num + '%',
x: 'center',
top: '50%',
textStyle: {
fontSize: 13,
color: '#00f0ff',
foontWeight: '500',
},
},
],
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [{
type: 'gauge',
center: ['50%', '60%'],
radius: '110%',
startAngle: '210',
endAngle: '-30',
pointer: {
show: false,
},
data: data1,
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: 10,
// shadowBlur: 15,
// shadowColor: '#fff',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
}, },
{ },
text: num + '%', axisTick: {
x: 'center', show: false,
top: '50%', },
textStyle: { splitLine: {
fontSize: 13, show: false,
color: '#00f0ff', length: 12,
foontWeight: '500', lineStyle: {
}, color: '#00377a',
width: 2,
type: 'solid',
}, },
], },
tooltip: { axisLabel: {
formatter: '{a} <br/>{b} : {c}%', show: false,
}, },
series: [ },
{ // 左边刻度线
type: 'gauge', {
center: ['50%', '60%'], type: 'gauge',
radius: '110%', center: ['50%', '60%'],
startAngle: '210', radius: '120%',
endAngle: '-30', startAngle: '210',
pointer: { endAngle: '-30',
show: false, min: 0,
}, zlevel: 10,
data: data1, max: 100,
title: { splitNumber: 12,
show: false, // 展示当前进度
}, progress: {
axisLine: { show: false,
show: true, },
lineStyle: { // 仪表盘指针
color: colorSet, pointer: {
width: 10, show: false,
// shadowBlur: 15, },
// shadowColor: '#fff', // 仪表盘轴线相关配置
shadowOffsetX: 0, axisLine: {
shadowOffsetY: 0, show: false,
opacity: 1, lineStyle: {
}, color: [
}, [1, 'transparent']
axisTick: { ],
show: false, width: 20,
},
splitLine: {
show: false,
length: 12,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid',
},
},
axisLabel: {
show: false,
},
}, },
// 左边刻度线 },
{ // 刻度样式
type: 'gauge', axisTick: {
center: ['50%', '60%'], show: false,
radius: '120%', },
startAngle: '210', // 分隔线样式
endAngle: '-30', splitLine: {
min: 0, show: false,
zlevel: 10, },
max: 100, // 刻度标签
splitNumber: 12, axisLabel: {
// 展示当前进度 show: true,
progress: { distance: -24,
show: false, formatter: function(value) {
}, if (value === 0) {
// 仪表盘指针 return '{white|' + value + '}';
pointer: { }
show: false, return '';
},
// 仪表盘轴线相关配置
axisLine: {
show: false,
lineStyle: {
color: [[1, 'transparent']],
width: 20,
},
},
// 刻度样式
axisTick: {
show: false,
},
// 分隔线样式
splitLine: {
show: false,
},
// 刻度标签
axisLabel: {
show: true,
distance: -24,
formatter: function (value) {
if (value === 0) {
return '{white|' + value + '}';
}
return '';
},
rich: rich,
},
// 表盘中指针的固定点
anchor: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 20,
},
],
}, },
// // 又边刻度线 rich: rich,
{ },
type: 'gauge', // 表盘中指针的固定点
center: ['50%', '60%'], anchor: {
radius: '120%', show: false,
startAngle: '210', },
endAngle: '-30', detail: {
min: 0, show: false,
zlevel: 10, },
max: 100, data: [{
splitNumber: 12, value: 20,
// 展示当前进度 }, ],
progress: { },
show: false, // // 又边刻度线
}, {
// 仪表盘指针 type: 'gauge',
pointer: { center: ['50%', '60%'],
show: false, radius: '120%',
}, startAngle: '210',
// 仪表盘轴线相关配置 endAngle: '-30',
axisLine: { min: 0,
show: false, zlevel: 10,
lineStyle: { max: 100,
color: [[1, 'transparent']], splitNumber: 12,
width: 20, // 展示当前进度
}, progress: {
}, show: false,
// 刻度样式 },
axisTick: { // 仪表盘指针
show: false, pointer: {
}, show: false,
// 分隔线样式 },
splitLine: { // 仪表盘轴线相关配置
show: false, axisLine: {
}, show: false,
// 刻度标签 lineStyle: {
axisLabel: { color: [
show: true, [1, 'transparent']
distance: -30, ],
formatter: function (value) { width: 20,
if (value === 100) {
return '{white|' + value + '}';
}
return '';
},
rich: rich,
color: 'rgba(255,255,255,.85)',
fontSize: 12,
},
// 表盘中指针的固定点
anchor: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 0,
},
],
}, },
], },
// 刻度样式
axisTick: {
show: false,
},
// 分隔线样式
splitLine: {
show: false,
},
// 刻度标签
axisLabel: {
show: true,
distance: -30,
formatter: function(value) {
if (value === 100) {
return '{white|' + value + '}';
}
return '';
},
rich: rich,
color: 'rgba(255,255,255,.85)',
fontSize: 12,
},
// 表盘中指针的固定点
anchor: {
show: false,
},
detail: {
show: false,
},
data: [{
value: 0,
}, ],
},
],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -825,26 +838,26 @@ ...@@ -825,26 +838,26 @@
}, },
initlg1(apidata) { initlg1(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb'] let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname) let XAXIS = apidata.map(item => item.fyname)
const charts = this.$echarts.init(this.$refs["lg1"]); const charts = this.$echarts.init(this.$refs["lg1"]);
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
},
}, },
},
legend: { legend: {
right: 10, right: 10,
top:10, top: 10,
textStyle: { textStyle: {
color: '#61d2f7' color: '#61d2f7'
}, },
left: 'center', left: 'center',
itemWidth: 9, itemWidth: 9,
itemHeight: 9, itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值'] data: ['年度预算目标值', '平衡目标值', '累计分解值', '发生值']
}, },
grid: { grid: {
left: '10%', left: '10%',
...@@ -853,7 +866,7 @@ ...@@ -853,7 +866,7 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: XAXIS, data: XAXIS,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -889,86 +902,86 @@ ...@@ -889,86 +902,86 @@
}, },
}, },
series: [{ series: [{
stack: '预算', stack: '预算',
name:'年度预算目标值', name: '年度预算目标值',
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: colorList[0], color: colorList[0],
},
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ndysmb)
}, },
data:apidata.map(item=>item.ndysmb) {
}, stack: '预算',
{ name: '平衡目标值',
stack: '预算', type: "bar",
name:'平衡目标值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[1],
normal: { },
color: colorList[1],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.phmb)
}, },
data:apidata.map(item=>item.phmb) {
}, stack: '预算',
{ name: '累计分解值',
stack: '预算', type: "bar",
name:'累计分解值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[2],
normal: { },
color:colorList[2],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ljfj)
}, },
data:apidata.map(item=>item.ljfj) {
}, stack: '预算', // 设置堆叠的组名
{ type: "bar",
stack: '预算', // 设置堆叠的组名 name: '发生值',
type: "bar", barWidth: 18,
name:'发生值', itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[3], // 设置柱状图的颜色
normal: { },
color: colorList[3], // 设置柱状图的颜色
}, },
}, label: {
label: { show: false,
show: false, position: 'top', // 在柱子顶部显示数字
position: 'top', // 在柱子顶部显示数字 textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.fsz)
}, },
data:apidata.map(item=>item.fsz) ],
},
],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -976,26 +989,26 @@ ...@@ -976,26 +989,26 @@
}, },
initlg2(apidata) { initlg2(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb'] let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname) let XAXIS = apidata.map(item => item.fyname)
const charts = this.$echarts.init(this.$refs["lg2"]); const charts = this.$echarts.init(this.$refs["lg2"]);
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
},
}, },
},
legend: { legend: {
right: 10, right: 10,
top:10, top: 10,
textStyle: { textStyle: {
color: '#61d2f7' color: '#61d2f7'
}, },
left: 'center', left: 'center',
itemWidth: 9, itemWidth: 9,
itemHeight: 9, itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值'] data: ['年度预算目标值', '平衡目标值', '累计分解值', '发生值']
}, },
grid: { grid: {
left: '10%', left: '10%',
...@@ -1004,7 +1017,7 @@ ...@@ -1004,7 +1017,7 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: XAXIS, data: XAXIS,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -1040,86 +1053,86 @@ ...@@ -1040,86 +1053,86 @@
}, },
}, },
series: [{ series: [{
stack: '预算', stack: '预算',
name:'年度预算目标值', name: '年度预算目标值',
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: colorList[0], color: colorList[0],
},
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ndysmb)
}, },
data:apidata.map(item=>item.ndysmb) {
}, stack: '预算',
{ name: '平衡目标值',
stack: '预算', type: "bar",
name:'平衡目标值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[1],
normal: { },
color: colorList[1],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.phmb)
}, },
data:apidata.map(item=>item.phmb) {
}, stack: '预算',
{ name: '累计分解值',
stack: '预算', type: "bar",
name:'累计分解值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[2],
normal: { },
color:colorList[2],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ljfj)
}, },
data:apidata.map(item=>item.ljfj) {
}, stack: '预算', // 设置堆叠的组名
{ type: "bar",
stack: '预算', // 设置堆叠的组名 name: '发生值',
type: "bar", barWidth: 18,
name:'发生值', itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[3], // 设置柱状图的颜色
normal: { },
color: colorList[3], // 设置柱状图的颜色
}, },
}, label: {
label: { show: false,
show: false, position: 'top', // 在柱子顶部显示数字
position: 'top', // 在柱子顶部显示数字 textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.fsz)
}, },
data:apidata.map(item=>item.fsz) ],
},
],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -1128,26 +1141,26 @@ ...@@ -1128,26 +1141,26 @@
}, },
initlg3(apidata) { initlg3(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb'] let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname) let XAXIS = apidata.map(item => item.fyname)
const charts = this.$echarts.init(this.$refs["lg3"]); const charts = this.$echarts.init(this.$refs["lg3"]);
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
},
}, },
},
legend: { legend: {
right: 10, right: 10,
top:10, top: 10,
textStyle: { textStyle: {
color: '#61d2f7' color: '#61d2f7'
}, },
left: 'center', left: 'center',
itemWidth: 9, itemWidth: 9,
itemHeight: 9, itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值'] data: ['年度预算目标值', '平衡目标值', '累计分解值', '发生值']
}, },
grid: { grid: {
left: '10%', left: '10%',
...@@ -1156,7 +1169,7 @@ ...@@ -1156,7 +1169,7 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: XAXIS, data: XAXIS,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -1192,86 +1205,86 @@ ...@@ -1192,86 +1205,86 @@
}, },
}, },
series: [{ series: [{
stack: '预算', stack: '预算',
name:'年度预算目标值', name: '年度预算目标值',
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: colorList[0], color: colorList[0],
},
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ndysmb)
}, },
data:apidata.map(item=>item.ndysmb) {
}, stack: '预算',
{ name: '平衡目标值',
stack: '预算', type: "bar",
name:'平衡目标值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[1],
normal: { },
color: colorList[1],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.phmb)
}, },
data:apidata.map(item=>item.phmb) {
}, stack: '预算',
{ name: '累计分解值',
stack: '预算', type: "bar",
name:'累计分解值', barWidth: 18,
type: "bar", itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[2],
normal: { },
color:colorList[2],
}, },
}, label: {
label: { show: false,
show: false, position: 'top',
position: 'top', textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.ljfj)
}, },
data:apidata.map(item=>item.ljfj) {
}, stack: '预算', // 设置堆叠的组名
{ type: "bar",
stack: '预算', // 设置堆叠的组名 name: '发生值',
type: "bar", barWidth: 18,
name:'发生值', itemStyle: {
barWidth: 18, normal: {
itemStyle: { color: colorList[3], // 设置柱状图的颜色
normal: { },
color: colorList[3], // 设置柱状图的颜色
}, },
}, label: {
label: { show: false,
show: false, position: 'top', // 在柱子顶部显示数字
position: 'top', // 在柱子顶部显示数字 textStyle: {
textStyle: { color: "#fff",
color: "#fff", fontSize: 10,
fontSize: 10, },
}, },
data: apidata.map(item => item.fsz)
}, },
data:apidata.map(item=>item.fsz) ],
},
],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -1280,154 +1293,154 @@ ...@@ -1280,154 +1293,154 @@
}, },
initlg4(apidata) { initlg4(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb'] let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname) let XAXIS = apidata.map(item => item.fyname)
const charts = this.$echarts.init(this.$refs["lg4"]); const charts = this.$echarts.init(this.$refs["lg4"]);
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
}, },
legend: { legend: {
right: 10, right: 10,
top:10, top: 10,
textStyle: { textStyle: {
color: '#61d2f7' color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值']
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
}, },
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '平衡目标值', '累计分解值', '发生值']
}, },
axisLabel: { grid: {
color: "#fff", left: '10%',
fontSize: 10, top: '23%',
}, right: '10%',
splitLine: { bottom: '15%',
show: false,
lineStyle: {
color: "#0177d4",
},
}, },
}, xAxis: {
series: [{ type: 'category',
stack: '预算', data: XAXIS,
name:'年度预算目标值', axisLine: {
type: "bar", lineStyle: {
barWidth: 18, color: "#0177d4",
itemStyle: { },
normal: {
color: colorList[0],
}, },
}, axisLabel: {
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
interval: 0,
}, },
}, },
data:apidata.map(item=>item.ndysmb) yAxis: {
}, name: "（万元）",
{ nameTextStyle: {
stack: '预算',
name:'平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, axisLine: {
data:apidata.map(item=>item.phmb) lineStyle: {
}, color: "#0177d4",
{ },
stack: '预算',
name:'累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color:colorList[2],
}, },
}, axisLabel: {
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, splitLine: {
data:apidata.map(item=>item.ljfj) show: false,
}, lineStyle: {
{ color: "#0177d4",
stack: '预算', // 设置堆叠的组名 },
type: "bar",
name:'发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
}, },
}, },
label: { series: [{
show: false, stack: '预算',
position: 'top', // 在柱子顶部显示数字 name: '年度预算目标值',
textStyle: { type: "bar",
color: "#fff", barWidth: 18,
fontSize: 10, itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.ndysmb)
}, },
}, {
data:apidata.map(item=>item.fsz) stack: '预算',
}, name: '平衡目标值',
], type: "bar",
}; barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.phmb)
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.ljfj)
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: apidata.map(item => item.fsz)
},
],
};
charts.setOption(option); charts.setOption(option);
return charts return charts
}, },
initSzkbmapCharts(params) { initSzkbmapCharts(params) {
......
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