之前公司有個(gè)繪制實(shí)時(shí)盈利率折線圖的需求，實(shí)現(xiàn)的還不錯(cuò)，今天來分享下vue+echarts實(shí)現(xiàn)動態(tài)折線圖的方法。

實(shí)現(xiàn)代碼

<template> <div id='myChart'></div></template><script>import echarts from ’echarts’export default { name: ’DynamicLineChart’, data () { return { // 實(shí)時(shí)數(shù)據(jù)數(shù)組 date: [], yieldRate: [], yieldIndex: [], // 折線圖echarts初始化選項(xiàng) echartsOption: { legend: { data: [’實(shí)際收益率’, ’大盤收益率’], }, xAxis: { name: ’時(shí)間’, nameTextStyle: { fontWeight: 600, fontSize: 18 }, type: ’category’, boundaryGap: false, data: this.date,// 綁定實(shí)時(shí)數(shù)據(jù)數(shù)組 }, yAxis: { name: ’實(shí)際收益率’, nameTextStyle: { fontWeight: 600, fontSize: 18 }, type: ’value’, scale: true, boundaryGap: [’15%’, ’15%’], axisLabel: { interval: ’auto’, formatter: ’{value} %’ } }, tooltip: { trigger: ’axis’, }, series: [ { name:’實(shí)際收益率’, type:’line’, smooth: true, data: this.yieldRate,// 綁定實(shí)時(shí)數(shù)據(jù)數(shù)組 }, { name:’大盤收益率’, type:’line’, smooth: true, data: this.yieldIndex,// 綁定實(shí)時(shí)數(shù)據(jù)數(shù)組 } ] } } }, mounted () { this.myChart = echarts.init(document.getElementById(’myChart’), ’light’);// 初始化echarts, theme為light this.myChart.setOption(this.echartsOption);// echarts設(shè)置初始化選項(xiàng) setInterval(this.addData, 3000);// 每三秒更新實(shí)時(shí)數(shù)據(jù)到折線圖 }, methods: { // 獲取當(dāng)前時(shí)間 getTime : function() { var ts = arguments[0] || 0; var t, h, i, s; t = ts ? new Date(ts * 1000) : new Date(); h = t.getHours(); i = t.getMinutes(); s = t.getSeconds(); // 定義時(shí)間格式 return (h < 10 ? ’0’ + h : h) + ’:’ + (i < 10 ? ’0’ + i : i) + ’:’ + (s < 10 ? ’0’ + s : s); }, // 添加實(shí)時(shí)數(shù)據(jù) addData : function() { // 從接口獲取數(shù)據(jù)并添加到數(shù)組 this.$axios.get(’url’).then((res) => { this.yieldRate.push((res.data.actualProfitRate * 100).toFixed(3)); this.yieldIndex.push((res.data.benchmarkProfitRate * 100).toFixed(3)); this.date.push(this.getTime(Math.round(new Date().getTime() / 1000))); // 重新將數(shù)組賦值給echarts選項(xiàng) this.echartsOption.xAxis.data = this.date; this.echartsOption.series[0].data = this.yieldRate; this.echartsOption.series[1].data = this.yieldIndex; this.myChart.setOption(this.echartsOption); }); } }}</script><style>// 設(shè)定寬高，不然超出windows會顯示不出來#myChart{ width: 100%; height: 500px; margin: 0 auto;}</style>

要注意的有三點(diǎn)：

mounted中init并setOption初始化echarts echartsOption里的data綁定數(shù)組 setInterval中要更新數(shù)組并重新將數(shù)組賦值給echarts選項(xiàng)

效果圖

總結(jié)

到此這篇關(guān)于vue+echarts實(shí)現(xiàn)動態(tài)折線圖的文章就介紹到這了,更多相關(guān)vue+echarts動態(tài)折線圖內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！