Skip to content

G
GaoQuIncubator
Commit be1b3c80 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

hightchart reflow

parent 54f6972d
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 90 deletions
src/views/Screen/index.vue
View file @ be1b3c80
......@@ -274,13 +274,17 @@ emptyFlag4byqyndsjsfbhqs:false,
this.infoWindow.setContent(content);
this.infoWindow.open(this.map, marker.getPosition());
},
async getAllApi(){
await this.sjzl()
await this.srph();
await this.qycxcysjfx();
await this.byqyjnzsrphb();
await this.byqyndsjsfbhqs();
getAllApi(){
this.$nextTick(async() => {
await this.sjzl()
await this.qycxcysjfx();
await this.srph();
await this.byqyjnzsrphb();
await this.byqyndsjsfbhqs();
await this.zfqyndsjsfbhqs();
})
},
sjzl() {
// 孵化数据总览
......@@ -303,6 +307,7 @@ emptyFlag4byqyndsjsfbhqs:false,
},
qycxcysjfx() {
//企业创新创业数据分析
return new Promise((resolve, reject) => {
request({
url: "api/homePage/enterpriseInnovationAnalysis",
method: "get",
......@@ -319,6 +324,20 @@ emptyFlag4byqyndsjsfbhqs:false,
});
var seriesData = seriesFormat.seriesData;
var opts = {
chartCallback:function(c){
if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
console.error('图表渲染问题出现,重新渲染.')
// c.reflow()
// 重新初始话
setTimeout(() => {
Highchart.template.rich(
document.querySelector(".qycxcysjfxWrapper"),
list,
opts
);
}, 900);
}
},
chartConfig: {
chart: {
backgroundColor: "transparent",
......@@ -404,9 +423,12 @@ emptyFlag4byqyndsjsfbhqs:false,
list,
opts
);
resolve('ok')
})
});
},
srph() {
return new Promise((resolve, reject) => {
// 在孵企业今年总收入排行榜
request({
url: "api/homePage/incubatorIncomeRanking",
......@@ -428,6 +450,18 @@ emptyFlag4byqyndsjsfbhqs:false,
colors: colors,
});
var opts = {
chartCallback:function(c){
if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
console.error('图表渲染问题出现,重新渲染.')
setTimeout(() => {// 重新初始渲染图表
Highchart.template.rich(
document.querySelector(".srphWrapper"),
list,
opts
);
}, 900);
}
},
chartConfig: {
chart: {
type: "bar",
......@@ -511,10 +545,14 @@ emptyFlag4byqyndsjsfbhqs:false,
list,
opts
);
resolve('ok')
})
});
},
byqyjnzsrphb() {
return new Promise((resolve, reject) => {
// 毕业企业今年总收入排行榜
request({
url: "api/homePage/graduatedIncomeRanking",
......@@ -538,6 +576,18 @@ emptyFlag4byqyndsjsfbhqs:false,
colors: colors,
});
var opts = {
chartCallback:function(c){
if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
console.error('图表渲染问题出现,重新渲染.')
setTimeout(() => {// 重新初始渲染图表
Highchart.template.rich(
document.querySelector(".byqyjnzsrphbWrapper"),
list,
opts
);
}, 900);
}
},
chartConfig: {
chart: {
type: "bar",
......@@ -622,11 +672,15 @@ emptyFlag4byqyndsjsfbhqs:false,
list,
opts
);
resolve('ok')
})
});
},
zfqyndsjsfbhqs() {
return new Promise((resolve, reject) => {
// 在孵企业年度上缴税费变化趋势
request({
url: "api/homePage/incubatorTaxTrend",
......@@ -646,6 +700,18 @@ emptyFlag4byqyndsjsfbhqs:false,
var categories = chartData.categories;
var series = chartData.series;
var opts = {
chartCallback:function(c){
if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
console.error('图表渲染问题出现,重新渲染.')
setTimeout(() => {// 重新初始渲染图表
Highchart.template.rich(
document.querySelector(".zfqyndsjsfbhqsWrapper"),
list,
opts
);
}, 900);
}
},
chartConfig: {
chart: {
marginTop: getPxByRem(0.4),
......@@ -714,99 +780,119 @@ emptyFlag4byqyndsjsfbhqs:false,
list,
opts
);
resolve('ok')
})
});
},
byqyndsjsfbhqs() {
//毕业企业年度上缴税费变化趋势
request({
url: "api/homePage/graduatedTaxTrend",
method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => {
this.emptyFlag4byqyndsjsfbhqs = res.body.list.length > 0 ? false : true
return new Promise((resolve, reject) => {
let list = res.body || [];
var chartData = Highchart.seriesDataFormat(list, {
datekey: "date",
dataReverse: true,
});
var categories = chartData.categories;
var series = chartData.series;
var opts = {
chartConfig: {
chart: {
marginTop: getPxByRem(0.4),
marginLeft: getPxByRem(0.5),// 50,
marginBottom: getPxByRem(0.45),
marginRight: getPxByRem(0.2),
},
xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
type: "category",
categories: categories,
labels: {
rotation: -20, // 设置轴标签旋转角度
align: "center",
style: {
fontSize: "0.17rem",
},
//毕业企业年度上缴税费变化趋势
request({
url: "api/homePage/graduatedTaxTrend",
method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => {
this.emptyFlag4byqyndsjsfbhqs = res.body.list.length > 0 ? false : true
let list = res.body || [];
var chartData = Highchart.seriesDataFormat(list, {
datekey: "date",
dataReverse: true,
});
var categories = chartData.categories;
var series = chartData.series;
var opts = {
chartCallback:function(c){
if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
console.error('图表渲染问题出现,重新渲染.')
setTimeout(() => {// 重新初始渲染图表
Highchart.template.rich(
document.querySelector(".byqyndsjsfbhqsWrapper"),
list,
opts
);
}, 900);
}
},
},
yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线
title: {
text: "万元",
margin: 0,
style: {
color: "#eee",
fontSize: "0.17rem",
},
rotation: 0,
align: "high",
y: getPxByRem(-0.15),
x: getPxByRem(0.4),
chartConfig: {
chart: {
marginTop: getPxByRem(0.4),
marginLeft: getPxByRem(0.5),// 50,
marginBottom: getPxByRem(0.45),
marginRight: getPxByRem(0.2),
},
labels: {
style: {
fontSize: "0.17rem", // 设置 Y 轴文字大小
},
xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
type: "category",
categories: categories,
labels: {
rotation: -20, // 设置轴标签旋转角度
align: "center",
style: {
fontSize: "0.17rem",
},
},
},
},
plotOptions: {},
series: [
{
type: "area",
keys: ["y", "rotation"], // rotation is not used here
data: series[0].data,
color: "#19c4fa",
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "#2aadf3"],
[1, "rgba(25,201,255,0)"],
],
},
yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线
title: {
text: "万元",
margin: 0,
style: {
color: "#eee",
fontSize: "0.17rem",
},
rotation: 0,
align: "high",
y: getPxByRem(-0.15),
x: getPxByRem(0.4),
},
labels: {
style: {
fontSize: "0.17rem", // 设置 Y 轴文字大小
},
},
},
],
},
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(
document.querySelector(".byqyndsjsfbhqsWrapper"),
list,
opts
);
plotOptions: {},
series: [
{
type: "area",
keys: ["y", "rotation"], // rotation is not used here
data: series[0].data,
color: "#19c4fa",
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "#2aadf3"],
[1, "rgba(25,201,255,0)"],
],
},
},
],
},
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(
document.querySelector(".byqyndsjsfbhqsWrapper"),
list,
opts
);
resolve('ok');
});
});
},
getIncubatorMarkers() {
request({
url: "api/homePage/incubatorLocation",
method: "get",
......@@ -852,7 +938,7 @@ emptyFlag4byqyndsjsfbhqs:false,
this.getAllApi()
this.showSreen = true
}, 3000);
}, 1000);
});
},
......
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