Skip to content

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

echart 堆垛柱状图，淮安本部进度，地图title调整

parent 63dde208
Hide whitespace changes
Inline Side-by-side
Showing with 460 additions and 149 deletions
src/views/hzcxbb/szkb/index.vue
View file @ ed733825
...@@ -113,35 +113,27 @@ ...@@ -113,35 +113,27 @@
<i class="i4"></i> <i class="i4"></i>
<div class="full "> <div class="full ">
<span class="com-count-title"> <span class="com-count-title">
vue轮播表格 预算执行进度-淮安本部
</span> </span>
<div class="com-count-body"> <div class="com-count-body">
<!-- 标题--> <!-- 标题-->
<div class="lbbt"> <div class="lbbt">
<div class="flex1 text-center "> <div class="flex1 text-center ">
学校 项目类别
</div> </div>
<div class="flex1 text-center "> <div class="flex1 text-center ">
年纪 完成率
</div> </div>
<div class="flex1 text-center "> <div class="flex1 text-center ">
班级 排名
</div>
<div class="flex1 text-center ">
分数
</div>
<div class="flex1 text-center ">
androl
</div> </div>
</div> </div>
<vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;"> <vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;">
<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.title"></div> <div style="color: #fff ;" v-text="item.xmflname"></div>
<div style="color: #fff ;" v-text="item.title"></div> <div style="color: #fff ;" v-text="item.wcl"></div>
<div style="color: #fff ;" v-text="item.title"></div> <div style="color: #fff ;" v-text="item.pm"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
</div> </div>
</div> </div>
</vueSeamless> </vueSeamless>
...@@ -222,50 +214,8 @@ ...@@ -222,50 +214,8 @@
DialogTitle: '测试', DialogTitle: '测试',
DialogWidth: '40vw' DialogWidth: '40vw'
}, },
listData: [{ /* 淮安公司*/
data: 112, listData: [
title: '百度'
},
{
data: 112,
title: '谷歌'
},
{
data: 112,
title: '高德'
},
{
data: 112,
title: '医院'
},
{
data: 112,
title: '测试'
},
{
data: 112,
title: '呵呵'
},
{
data: 112,
title: '测速3'
},
{
data: 112,
title: '价格'
},
{
data: 112,
title: '苏州'
},
{
data: 112,
title: '测试1'
},
{
data: 112,
title: '测试2'
}
] ]
} }
}, },
...@@ -293,6 +243,17 @@ ...@@ -293,6 +243,17 @@
let habbList = records.filter(item => { let habbList = records.filter(item => {
return item.bmName == '淮安供电公司本部' return item.bmName == '淮安供电公司本部'
}) })
/* 展示数据查询*/
if(habbList.length>0){
let bmid=habbList[0].bmid
this.$post('hafms/yszxjdlog/queryRepDetail',{
bmid:bmid
}).then(res=>{
if(res.success){
this.listData=res.data.records||[]
}
})
}
let jhxList = records.filter(item => { let jhxList = records.filter(item => {
return item.bmName == '金湖县供电公司' return item.bmName == '金湖县供电公司'
}) })
...@@ -361,8 +322,21 @@ ...@@ -361,8 +322,21 @@
return true return true
} }
}) })
this.lg1 = this.initlg1(lxh1[0]) /* 开始构建参数*/
this.lg2 = this.initlg2(lxh2[0]) const LENGTH=6
/* 选取前LENGTH个展示*/
let showLxg1=lxh1.filter((item,index)=>{
if(index<LENGTH){
return true
}
})
let showLxg2=lxh2.filter((item,index)=>{
if(index<LENGTH){
return true
}
})
this.lg1 = this.initlg1(showLxg1)
this.lg2 = this.initlg2(showLxg2)
} }
} }
}) })
...@@ -388,8 +362,22 @@ ...@@ -388,8 +362,22 @@
return true return true
} }
}) })
this.lg3 = this.initlg3(lxh1[0])
this.lg4 = this.initlg4(lxh2[0]) const LENGTH=6
/* 选取前LENGTH个展示*/
let showLxg1=lxh1.filter((item,index)=>{
if(index<LENGTH){
return true
}
})
let showLxg2=lxh2.filter((item,index)=>{
if(index<LENGTH){
return true
}
})
this.lg3 = this.initlg3(showLxg1)
this.lg4 = this.initlg4(showLxg2)
} }
} }
}) })
...@@ -413,7 +401,8 @@ ...@@ -413,7 +401,8 @@
item.properties.apiData = habbList[0] item.properties.apiData = habbList[0]
item.properties.name = `淮安供电公司本部 item.properties.name = `淮安供电公司本部
完成率:${habbList[0].wcl};排名:${habbList[0].pm} ${habbList[0].pm}(排名)
${habbList[0].wcl}(完成率)
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -426,9 +415,10 @@ ...@@ -426,9 +415,10 @@
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].wcl};排名:${jhxList[0].pm} ${jhxList[0].pm}(排名)
${jhxList[0].wcl}(完成率)
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -442,7 +432,8 @@ ...@@ -442,7 +432,8 @@
item.properties.name = item.properties.name =
`盱眙县供电公司 `盱眙县供电公司
完成率:${xyxList[0].wcl};排名:${xyxList[0].pm} ${xyxList[0].pm}(排名)
${xyxList[0].wcl}(完成率)
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -455,7 +446,8 @@ ...@@ -455,7 +446,8 @@
item.properties.apiData = hzxList[0] item.properties.apiData = hzxList[0]
item.properties.name = `洪泽县供电公司 item.properties.name = `洪泽县供电公司
完成率:${hzxList[0].wcl};排名:${hzxList[0].pm} ${hzxList[0].pm}(排名)
${hzxList[0].wcl}(完成率)
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -468,7 +460,8 @@ ...@@ -468,7 +460,8 @@
item.properties.apiData = lsxList[0] item.properties.apiData = lsxList[0]
item.properties.name = `涟水县供电公司 item.properties.name = `涟水县供电公司
完成率:${lsxList[0].wcl};排名:${lsxList[0].pm} ${lsxList[0].pm}(排名)
${lsxList[0].wcl}(完成率)
` `
this.mapList.push({ this.mapList.push({
name: item.properties.name, name: item.properties.name,
...@@ -832,8 +825,27 @@ ...@@ -832,8 +825,27 @@
}, },
initlg1(apidata) { initlg1(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
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: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top:10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值']
},
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
...@@ -841,12 +853,8 @@ ...@@ -841,12 +853,8 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
data: [ type: 'category',
"预算目标值", data: XAXIS,
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
...@@ -855,6 +863,7 @@ ...@@ -855,6 +863,7 @@
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
interval: 0,
}, },
}, },
yAxis: { yAxis: {
...@@ -880,23 +889,86 @@ ...@@ -880,23 +889,86 @@
}, },
}, },
series: [{ series: [{
stack: '预算',
name:'年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data:apidata.map(item=>item.ndysmb)
},
{
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", type: "bar",
name:'发生值',
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: colorList[3], // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: false,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0], data:apidata.map(item=>item.fsz)
}, ], },
],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -904,8 +976,27 @@ ...@@ -904,8 +976,27 @@
}, },
initlg2(apidata) { initlg2(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
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: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top:10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值']
},
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
...@@ -913,12 +1004,8 @@ ...@@ -913,12 +1004,8 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
data: [ type: 'category',
"预算目标值", data: XAXIS,
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
...@@ -927,6 +1014,7 @@ ...@@ -927,6 +1014,7 @@
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
interval: 0,
}, },
}, },
yAxis: { yAxis: {
...@@ -952,32 +1040,115 @@ ...@@ -952,32 +1040,115 @@
}, },
}, },
series: [{ series: [{
stack: '预算',
name:'年度预算目标值',
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: colorList[0],
}, },
}, },
label: { label: {
show: true, show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data:apidata.map(item=>item.ndysmb)
},
{
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', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0], data:apidata.map(item=>item.fsz)
}, ], },
],
}; };
charts.setOption(option); charts.setOption(option);
return charts return charts
}, },
initlg3(apidata) { initlg3(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
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: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top:10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: ['年度预算目标值', '平衡目标值','累计分解值','发生值']
},
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
...@@ -985,12 +1156,8 @@ ...@@ -985,12 +1156,8 @@
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
data: [ type: 'category',
"预算目标值", data: XAXIS,
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
...@@ -999,6 +1166,7 @@ ...@@ -999,6 +1166,7 @@
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
interval: 0,
}, },
}, },
yAxis: { yAxis: {
...@@ -1024,100 +1192,243 @@ ...@@ -1024,100 +1192,243 @@
}, },
}, },
series: [{ series: [{
stack: '预算',
name:'年度预算目标值',
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: colorList[0],
}, },
}, },
label: { label: {
show: true, show: false,
position: 'top', // 在柱子顶部显示数字 position: 'top',
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0], data:apidata.map(item=>item.ndysmb)
}, ],
};
charts.setOption(option);
return charts
},
initlg4(apidata) {
const charts = this.$echarts.init(this.$refs["lg4"]);
var option = {
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
}, },
xAxis: { {
data: [ stack: '预算',
"预算目标值", name:'平衡目标值',
"平衡目标值", type: "bar",
"累计分解值", barWidth: 18,
"发生值", itemStyle: {
], normal: {
axisLine: { color: colorList[1],
lineStyle: {
color: "#0177d4",
}, },
}, },
axisLabel: { label: {
color: "#fff", show: false,
fontSize: 10, position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
}, },
data:apidata.map(item=>item.phmb)
}, },
yAxis: { {
name: "（万元）", stack: '预算',
nameTextStyle: { name:'累计分解值',
color: "#fff", type: "bar",
fontSize: 10, barWidth: 18,
}, itemStyle: {
axisLine: { normal: {
lineStyle: { color:colorList[2],
color: "#0177d4",
}, },
}, },
axisLabel: { label: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false, show: false,
lineStyle: { position: 'top',
color: "#0177d4", textStyle: {
color: "#fff",
fontSize: 10,
}, },
}, },
data:apidata.map(item=>item.ljfj)
}, },
series: [{ {
stack: '预算', // 设置堆叠的组名
type: "bar", type: "bar",
name:'发生值',
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: colorList[3], // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: false,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0], data:apidata.map(item=>item.fsz)
}, ], },
],
}; };
charts.setOption(option); charts.setOption(option);
return charts return charts
},
initlg4(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname)
const charts = this.$echarts.init(this.$refs["lg4"]);
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: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
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:apidata.map(item=>item.ndysmb)
},
{
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);
return charts
}, },
initSzkbmapCharts(params) { initSzkbmapCharts(params) {
const mapData = this.initHuanai(params); const mapData = this.initHuanai(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