介绍 & lt; template>
& lt; div id=癿yChart"祝辞& lt;/div>
& lt;/template>
& lt; script>
从& # 39;进口echarts echarts& # 39;
出口默认{
名称:& # 39;DynamicLineChart& # 39;
数据(){
返回{//实时数据数组
日期:[],
yieldRate: [],
yieldIndex: [],//折线图echarts初始化选项
echartsOption: {
传说:{
数据:[& # 39;实际收益率& # 39;,& # 39;大盘收益率& # 39;],
},
xAxis: {
名称:& # 39;时间& # 39;,
nameTextStyle: {
fontWeight: 600,
字形大小:18
},
类型:& # 39;类别# 39;
boundaryGap:假的,
数据:这个。目前为止,//绑定实时数据数组
},
桠溪:{
名称:& # 39;实际收益率& # 39;,
nameTextStyle: {
fontWeight: 600,
字形大小:18
},
类型:& # 39;价值# 39;
规模:没错,
boundaryGap: [& # 39; 15% & # 39; & # 39; & # 39; 15%),
axisLabel: {
间隔:& # 39;汽车# 39;
格式化程序:& # 39;{value} % & # 39;
}
},
提示:{
触发:& # 39;轴# 39;
},
系列:[
{
名称:& # 39;实际收益率& # 39;,
类型:& # 39;行# 39;
平滑:没错,
数据:这个。yieldRate,//绑定实时数据数组
},
{
名称:& # 39;大盘收益率& # 39;,
类型:& # 39;行# 39;
平滑:没错,
数据:这个。yieldIndex,//绑定实时数据数组
}
]
}
}
},
安装(){
这一点。myChart=echarts.init (. getelementbyid (& # 39; myChart& # 39;), & # 39;光# 39;);//初始化echarts,主题为光
this.myChart.setOption (this.echartsOption);//echarts设置初始化选项
setInterval(这一点。addData (3000);//每三秒更新实时数据到折线图
},
方法:{//获取当前时间
取得时间:函数(){
var ts=参数[0]| | 0;
var t、h、i、s;
t=ts, # 63;新的日期(ts * 1000):日期();
h=t.getHours ();
i=t.getMinutes ();
s=t.getSeconds ();//定义时间格式
返回(h & lt;10,# 63;& # 39;0 & # 39;+ h: h) + & # 39;: & # 39;+(我& lt;10,# 63;& # 39;0 & # 39;+我:我)+ & # 39;:& # 39;+ (s & lt;10,# 63;& # 39;0 & # 39;+:年代);
},//添加实时数据
addData:函数(){//从接口获取数据并添加到数组
美元。axios.get (& # 39; url # 39;),然后((res)=比;{
this.yieldRate.push (res.data。actualProfitRate * 100) .toFixed (3));
this.yieldIndex.push (res.data。benchmarkProfitRate * 100) .toFixed (3));
this.date.push (this.getTime(数学。.getTime轮(新日期()()/1000)));//重新将数组赋值给echarts选项
this.echartsOption.xAxis。数据=https://www.yisu.com/zixun/this.date;
this.echartsOption.series [0]。数据=this.yieldRate;
this.echartsOption.series [1]。数据=this.yieldIndex;
this.myChart.setOption (this.echartsOption);
});
}
}
}> //设定宽高,不然超出窗户会显示不出来
# myChart {
宽度:100%;
身高:500 px;
保证金:0汽车;
}
本篇文章给大家分享的是有关使用vue + echarts如何实现一个动态折线图,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强>实现代码
<强>要注意的有三点:
- <李>安装中初始化并setOption初始化echarts李 <>李echartsOption里的数据绑定数组 <李> setInterval中要更新数组并重新将数组赋值给echarts选项
李,
<>强效果图
以上就是使用vue + echarts如何实现一个动态折线图,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
