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 @@
<i class="i4"></i>
<div class="full ">
<span class="com-count-title">
vue轮播表格
预算执行进度-淮安本部
</span>
<div class="com-count-body">
<!-- 标题-->
<div class="lbbt">
<div class="flex1 text-center ">
学校
项目类别
</div>
<div class="flex1 text-center ">
年纪
完成率
</div>
<div class="flex1 text-center ">
班级
</div>
<div class="flex1 text-center ">
分数
</div>
<div class="flex1 text-center ">
androl
排名
</div>
</div>
<vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;">
<div class="full lbtit">
<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.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<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.wcl"></div>
<div style="color: #fff ;" v-text="item.pm"></div>
</div>
</div>
</vueSeamless>
......@@ -222,50 +214,8 @@
DialogTitle: '测试',
DialogWidth: '40vw'
},
listData: [{
data: 112,
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'
}
/* 淮安公司*/
listData: [
]
}
},
......@@ -293,6 +243,17 @@
let habbList = records.filter(item => {
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 => {
return item.bmName == '金湖县供电公司'
})
......@@ -361,8 +322,21 @@
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 @@
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 @@
item.properties.apiData = habbList[0]
item.properties.name = `淮安供电公司本部
完成率:${habbList[0].wcl};排名:${habbList[0].pm}
${habbList[0].pm}(排名)
${habbList[0].wcl}(完成率)
`
this.mapList.push({
name: item.properties.name,
......@@ -426,9 +415,10 @@
if (jhxList.length != 0) {
item.properties.apiData = jhxList[0]
item.properties.name =
`金湖县供电公司
`金湖县供电公司
完成率:${jhxList[0].wcl};排名:${jhxList[0].pm}
${jhxList[0].pm}(排名)
${jhxList[0].wcl}(完成率)
`
this.mapList.push({
name: item.properties.name,
......@@ -442,7 +432,8 @@
item.properties.name =
`盱眙县供电公司
完成率:${xyxList[0].wcl};排名:${xyxList[0].pm}
${xyxList[0].pm}(排名)
${xyxList[0].wcl}(完成率)
`
this.mapList.push({
name: item.properties.name,
......@@ -455,7 +446,8 @@
item.properties.apiData = hzxList[0]
item.properties.name = `洪泽县供电公司
完成率:${hzxList[0].wcl};排名:${hzxList[0].pm}
${hzxList[0].pm}(排名)
${hzxList[0].wcl}(完成率)
`
this.mapList.push({
name: item.properties.name,
......@@ -468,7 +460,8 @@
item.properties.apiData = lsxList[0]
item.properties.name = `涟水县供电公司
完成率:${lsxList[0].wcl};排名:${lsxList[0].pm}
${lsxList[0].pm}(排名)
${lsxList[0].wcl}(完成率)
`
this.mapList.push({
name: item.properties.name,
......@@ -832,8 +825,27 @@
},
initlg1(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname)
const charts = this.$echarts.init(this.$refs["lg1"]);
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%',
......@@ -841,12 +853,8 @@
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
......@@ -855,6 +863,7 @@
axisLabel: {
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
......@@ -880,23 +889,86 @@
},
},
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: "#00aaff", // 设置柱状图的颜色
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: true,
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ],
data:apidata.map(item=>item.fsz)
},
],
};
charts.setOption(option);
......@@ -904,8 +976,27 @@
},
initlg2(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname)
const charts = this.$echarts.init(this.$refs["lg2"]);
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%',
......@@ -913,12 +1004,8 @@
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
......@@ -927,6 +1014,7 @@
axisLabel: {
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
......@@ -952,32 +1040,115 @@
},
},
series: [{
stack: '预算',
name:'年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
color: colorList[0],
},
},
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', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ],
data:apidata.map(item=>item.fsz)
},
],
};
charts.setOption(option);
return charts
},
initlg3(apidata) {
let colorList=['#f18c6e', '#d5f69b','#22f2e5','#2ca4fb']
let XAXIS=apidata.map(item=>item.fyname)
const charts = this.$echarts.init(this.$refs["lg3"]);
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%',
......@@ -985,12 +1156,8 @@
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
type: 'category',
data: XAXIS,
axisLine: {
lineStyle: {
color: "#0177d4",
......@@ -999,6 +1166,7 @@
axisLabel: {
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
......@@ -1024,100 +1192,243 @@
},
},
series: [{
stack: '预算',
name:'年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
color: colorList[0],
},
},
label: {
show: true,
position: 'top', // 在柱子顶部显示数字
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ],
};
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%',
data:apidata.map(item=>item.ndysmb)
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: {
lineStyle: {
color: "#0177d4",
{
stack: '预算',
name:'平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data:apidata.map(item=>item.phmb)
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
{
stack: '预算',
name:'累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color:colorList[2],
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
label: {
show: false,
lineStyle: {
color: "#0177d4",
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data:apidata.map(item=>item.ljfj)
},
series: [{
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name:'发生值',
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: true,
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ],
data:apidata.map(item=>item.fsz)
},
],
};
charts.setOption(option);
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) {
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