Commit fb94a121 authored by danfuman's avatar danfuman

修改

parent 3abe1cf1
......@@ -710,7 +710,7 @@ export default {
},
getBigBidPage(){
let params={}
bigBidPage(this.queryParams3).then(res=>{
bigBidPage(this.queryParams2).then(res=>{
console.log(res)
if(res.code == 200){
this.zbList=res.rows;
......
<template>
<div class="regionalEconomy">
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton">
<div v-if="state && !isSkeleton">
<div class="content content1">
<div class="common-title">经济数据</div>
<div class="content-box">
......@@ -101,7 +101,11 @@
</div>
</div>
</div>
<div class="empty" v-if="!state && !isSkeleton">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,没找到相关数据</div>
<div class="p2">建议调整关键词或筛选条件,重新搜索</div>
</div>
</div>
</template>
......@@ -288,7 +292,8 @@ export default {
valData4:[],
recentlyYear:{},
nextYearMap:{},
isSkeleton:true
isSkeleton:true,
state:true,
}
},
created() {
......@@ -342,336 +347,353 @@ export default {
}
regional(params).then(res => {
this.isSkeleton = false
this.recentlyYear=res.data[0].recentlyYear;
this.nextYearMap=res.data[0].nextYearMap;
this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)]
this.valData1=[this.getMoneyNum(this.nextYearMap.gdpGrowth),this.getMoneyNum(this.recentlyYear.gdpGrowth)]
this.valData2=[this.getMoneyNum(this.nextYearMap.population),this.getMoneyNum(this.recentlyYear.population)]
this.valData3=[this.getMoneyNum(this.nextYearMap.gbr),this.getMoneyNum(this.recentlyYear.gbr)]
this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)]
this.$nextTick(() => {
this.initChart()
this.initChart1()
this.initChart2()
this.initChart3()
this.initChart4()
})
if(res.data[0].recentlyYear){
this.state=true;
this.recentlyYear=res.data[0].recentlyYear;
this.nextYearMap=res.data[0].nextYearMap;
this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)]
this.valData1=[this.getMoneyNum(this.nextYearMap.gdpGrowth),this.getMoneyNum(this.recentlyYear.gdpGrowth)]
this.valData2=[this.getMoneyNum(this.nextYearMap.population),this.getMoneyNum(this.recentlyYear.population)]
this.valData3=[this.getMoneyNum(this.nextYearMap.gbr),this.getMoneyNum(this.recentlyYear.gbr)]
this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)]
this.$nextTick(() => {
this.initChart()
this.initChart1()
this.initChart2()
this.initChart3()
this.initChart4()
})
}else {
this.recentlyYear={};
this.nextYearMap={};
this.state=false;
}
})
regionalList(params).then(res => {
this.tableData=res.data;
})
},
initChart() {
let myChart = echarts.init(document.getElementById("echartsGDP"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
// right:15,
bottom:5,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#4E8EFF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echartsGDP"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
// right:15,
bottom:5,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#4E8EFF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(){
let myChartZS = echarts.init(document.getElementById("echartsZS"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData1,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData1[1] ? true : false,
position: 'top'
},
itemStyle:{
color: "#718AFF",
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#718AFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#E3E8FF",
},
{
offset: 1,
color: "#5B76FD",
},
]),
},
}
]
}
myChartZS.setOption(option);
window.addEventListener("resize", function () {
myChartZS.resize();//图表跟随页面大小变化宽度
});
this.$nextTick(() => {
let myChartZS = echarts.init(document.getElementById("echartsZS"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData1,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData1[1] ? true : false,
position: 'top'
},
itemStyle:{
color: "#718AFF",
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#718AFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#E3E8FF",
},
{
offset: 1,
color: "#5B76FD",
},
]),
},
}
]
}
myChartZS.setOption(option);
window.addEventListener("resize", function () {
myChartZS.resize();//图表跟随页面大小变化宽度
});
})
},
initChart2(){
let myChartRK = echarts.init(document.getElementById("echartsRK"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData2,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData2[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#3AD0D1",
},
itemStyle:{
color: "#3AD0D1",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#D3F3F3",
},
{
offset: 1,
color: "#60D1D1",
},
]),
},
}
]
}
myChartRK.setOption(option);
window.addEventListener("resize", function () {
myChartRK.resize();//图表跟随页面大小变化宽度
});
this.$nextTick(() => {
let myChartRK = echarts.init(document.getElementById("echartsRK"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData2,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData2[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#3AD0D1",
},
itemStyle:{
color: "#3AD0D1",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#D3F3F3",
},
{
offset: 1,
color: "#60D1D1",
},
]),
},
}
]
}
myChartRK.setOption(option);
window.addEventListener("resize", function () {
myChartRK.resize();//图表跟随页面大小变化宽度
});
})
},
initChart3(){
let myChartSR = echarts.init(document.getElementById("echartsSR"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData3,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData3[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAE35",
},
itemStyle:{
color: "#FFBE5D",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFE9C6",
},
{
offset: 1,
color: "#FFB535",
},
]),
},
}
]
}
myChartSR.setOption(option);
window.addEventListener("resize", function () {
myChartSR.resize();//图表跟随页面大小变化宽度
});
this.$nextTick(() => {
let myChartSR = echarts.init(document.getElementById("echartsSR"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:5,
},
series: [
{
data: this.valData3,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData3[1] ? true : false,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAE35",
},
itemStyle:{
color: "#FFBE5D",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFE9C6",
},
{
offset: 1,
color: "#FFB535",
},
]),
},
}
]
}
myChartSR.setOption(option);
window.addEventListener("resize", function () {
myChartSR.resize();//图表跟随页面大小变化宽度
});
})
},
initChart4(){
let myChartYE = echarts.init(document.getElementById("echartsYE"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
// left:5,
bottom:5,
},
series: [
{
data: this.valData4,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData4[1] ? true : false,
position: 'top',
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FF8935",
},
itemStyle:{
color: "#FF8935",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FEE5D2",
},
{
offset: 1,
color: "#FF8935",
},
]),
},
}
]
}
myChartYE.setOption(option);
window.addEventListener("resize", function () {
myChartYE.resize();//图表跟随页面大小变化宽度
});
this.$nextTick(() => {
let myChartYE = echarts.init(document.getElementById("echartsYE"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
// left:5,
bottom:5,
},
series: [
{
data: this.valData4,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: this.valData4[1] ? true : false,
position: 'top',
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FF8935",
},
itemStyle:{
color: "#FF8935",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FEE5D2",
},
{
offset: 1,
color: "#FF8935",
},
]),
},
}
]
}
myChartYE.setOption(option);
window.addEventListener("resize", function () {
myChartYE.resize();//图表跟随页面大小变化宽度
});
})
},
formatStatus: function(row, column, cellValue) {
if(row.title === '经济'||row.title === '财政'||row.title === '债务'){
......@@ -885,5 +907,27 @@ export default {
}
}
}
.empty{
margin: 0 auto;
height: 600px;
text-align: center;
border-top: 1px solid #EFEFEF;
.img{
width: 108px;
height: 108px;
margin-bottom: 24px;
margin-top: 150px;
}
.p1{
color: #333333;
font-size: 16px;
}
.p2{
color: #999999;
font-size: 14px;
margin-top: 8px;
}
}
}
</style>
......@@ -368,10 +368,6 @@
.table-item{
/*position: relative;*/
.empty{
/*position: absolute;*/
/*top: 50%;*/
/*left: 50%;*/
/*transform: translate(-50%,-50%);*/
margin: 0 auto;
height: 600px;
text-align: center;
......
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