原始数据获取
//原始数据
_this.chartYData = [
{ name: "视在功率", type: "line", data: [] },
];
for (let item of res.data) {
_this.chartXData.push(item.dbtime.substring(11, 19));//X轴数据
_this.chartYData[0].data.push(item.s);//Y轴数据
}
console.log(_this.chartXData);//曲线x轴的数据源
console.log(_this.chartYData[0].data);//曲线y轴的数据源
坐标轴数据:
(1)X轴数据:
(2)Y轴数据
绘制过程:
// 折线图
drawTransformerHistoryLine() {
let myChart1 = this.$echarts.init(
document.getElementById("zhexiantu"),
"light"
),
option = {};
myChart1.clear();
myChart1.showLoading({ text: "正在加载数据" }); //增加等待提示
option = {
title: {
text:
this.startTime +
" " +
"@尔嵘" +
" " +
"333",
x: "center",
y: "top",
textAlign: "center",
},
grid: {
left: "2%",
right: "2%",
bottom: "10%",
containLabel: true,
},
// legend: {
// data: this.legendData,
// padding: 40,
// },
// dataZoom: [
// {
// start: 95, //滚动条开始位置(共若干份)
// },
// {
// type: "inside",
// },
// ],
toolbox: {
feature: {
saveAsImage: { show: true },
dataView: { show: true, readOnly: false }
},
// itemGap: 10,
// left: '85%',
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
// boundaryGap: false,
data: this.chartXData,
axisLabel: {
interval: "auto",
// rotate: 60, //横坐标倾斜60°
},
},
yAxis: {
type: "value",
name: this.$t("trsfMonitoring.unit") + "(" + this.danwei + ")"
},
series: this.chartYData
};
myChart1.setOption(option, true);
setTimeout(() => {
myChart1.hideLoading();
}, 500);
window.onresize = function () {
myChart1.resize();
};
},
效果:
参考:
[1].Echarts官网