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