Vue Echarts实时动态图表实现
针对实时数据推送的 动态Echarts图表 解决方案。
1.效果
动态Echart图表解决方案——vue2
2.代码
created() {
this.$nextTick(() => {
this.initEchartsHandle();
});
},
methods: {
initEchartsHandle() {
var chartDom = document.getElementById("device-info-echarts");
var myChart = this.$echarts.init(chartDom);
// 基础配置代码
var option = {
title: {
text: "实时数据信息",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["磁盘占有率", "CPU使用率", "GPU使用率", "Sta曲线"],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [""],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "磁盘占有率",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [1],
},
{
name: "CPU使用率",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [1],
},
{
name: "GPU使用率",
type: "line",
stack: "Total",
label: {
show: true,
position: "top",
},
areaStyle: {},
emphasis: {
focus: "series",
},
data: [1],
},
{
name: "Sta曲线",
type: "line",
stack: "Total",
label: {
show: true,
position: "top",
},
areaStyle: {},
emphasis: {
focus: "series",
},
data: [1],
},
],
};
myChart.setOption(option);
// 页面尺寸发生变化时,echarts布局自适应
window.addEventListener("resize", function () {
myChart3.resize();
});
// 模拟推送数据————(可根据实际数据获取方式调整)
setInterval(() => {
this.getLatestData(myChart, option);
}, 2000); // 实时 两秒 获取数据
},
// 获取数据
getLatestData(myChart, option) {
// 添加最新数据项
option.series.forEach((item, index) => {
item.data.push(item.data[item.data.length - 1] + 20);
//截取最新的固定条数的数据(截取7个)
item.data = item.data.slice(-7);
});
// 如果X轴也是实时数据,可以这样更新
var NowTime = this.formatDate(new Date(), true);
//添加数据并截取最后七位最新数据
option.xAxis[0].data.push(NowTime);
option.xAxis[0].data = option.xAxis[0].data.slice(-7);
//重新配置数据
myChart.setOption(option, true);
},
//时间格式化
formatDate(date, isEchart = undefined) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const formatNumber = (n) => {
n = n.toString();
return n[1] ? n : "0" + n;
};
if (isEchart) {
return [hour, minute, second].map(formatNumber).join(":");
} else {
return (
[year, month, day].map(formatNumber).join("-") +
" " +
[hour, minute, second].map(formatNumber).join(":")
);
}
},
}
3.注意
上面代码配置项option 或option.xAxis[0].data、option.series 的数据值,并 没有 放在 Vue 组件 data选项 中,是为了避免 出现 Vue data中 对象或数组数据在后续添加时 新数据不会被响应式处理,导致出现,Echart 数据更新了但页面视图未变化的情况。
echarts配置项option中的数据当然也可以放在 data 选项中,但是 如果出现Echart 数据更新了但页面视图未变化的情况,就需要去考虑 和 处理 是不是新增的数据 没有被响应式处理。