I first thought of writing the interface into a method and then calling it somewhere else, but I didn"t know how to start
methods: {
/* */
getData() {
this.$http.get(this.$api.dataChart).then(rsp => {
this.data = rsp.data.data; // tab
console.log("555555", window.data);
});
},
/* */
createChartOne() {
this.$http
.get(this.$api.dataChart)
.then(rsp => {
console.log(rsp);
if (rsp.status == 200) {
window.data = this.data;
this.resData = rsp.data.data.device_1;
let key = "_1";
let xAxisData = this.resData[key].names;
let seriesData = this.resData[key].values; //
let yMin = Math.min.apply(null, seriesData);
let yMax = Math.max.apply(null, seriesData);
var home_echarts = echarts.init(
document.getElementById("home_echarts")
);
var option = {
grid: {
left: 60
},
xAxis: {
type: "category",
data: xAxisData,
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
axisLine: {
lineStyle: {
color: "-sharp285555"
}
}
},
yAxis: {
type: "value",
min: yMin - 5,
max: yMax + 5,
// splitNumber:5,
// interval:parseInt((yMax- yMin)/5),
axisLine: {
show: true,
lineStyle: {
color: "-sharp275454"
}
},
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
splitLine: {
lineStyle: {
color: ["-sharp0a3435"]
}
}
},
series: [
{
data: seriesData,
type: "line",
smooth: true
}
]
};
var resize = {
width: 415,
height: 290
};
home_echarts.resize(resize);
home_echarts.setOption(option);
} else {
throw rsp.message;
}
})
.catch(err => {
console.log("createChartOne", err);
});
},
/* */
createChartTwo() {
this.$http
.get(this.$api.dataChart)
.then(rsp => {
if (rsp.status == 200) {
let resData = rsp.data.data.device_1; // tab
let key = "_1"; // echarts
let xAxisData = resData[key].names; // X
let seriesData = resData[key].values; //
let yMin = Math.min.apply(null, seriesData); //
let yMax = Math.max.apply(null, seriesData); //
var home_echarts_speed = echarts.init(
document.getElementById("home_echarts_speed")
);
var speed = {
grid: {
left: 60
},
xAxis: {
type: "category",
data: xAxisData,
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
axisLine: {
lineStyle: {
color: "-sharp285555"
}
}
},
yAxis: {
type: "value",
min: yMin - 5,
max: yMax + 5,
axisLine: {
lineStyle: {
color: "-sharp275454"
}
},
axisLabel: {
show: true,
textStyle: {
color: "-sharpfff"
}
},
splitLine: {
lineStyle: {
color: ["-sharp0a3435"]
}
}
},
lineStyle: {
color: "-sharp0066ff"
},
series: [
{
data: seriesData,
type: "line",
smooth: true
}
]
};
var resize = {
width: 415,
height: 290
};
home_echarts_speed.resize(resize);
home_echarts_speed.setOption(speed);
} else {
throw rsp.message;
}
})
.catch(err => {
console.log("createChartOne", err);
});
}
}