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