之前公司有个绘制实时盈利率折线图的需求，实现的还不错，今天来分享下vue+echarts实现动态折线图的方法。

实现代码

<template>
    <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
    name: 'DynamicLineChart',
    data () {
        return {
        	// 实时数据数组
            date: [],
            yieldRate: [],
            yieldIndex: [],
            // 折线图echarts初始化选项
            echartsOption: {
                legend: {
                    data: ['实际收益率', '大盘收益率'],
                },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: this.date,	// 绑定实时数据数组
                },
                yAxis: {
                    name: '实际收益率',
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18
                    },
                    type: 'value',
                    scale: true,
                    boundaryGap: ['15%', '15%'],
                    axisLabel: {
                        interval: 'auto',
                        formatter: '{value} %'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name:'实际收益率',
                        type:'line',
                        smooth: true,
                        data: this.yieldRate,	// 绑定实时数据数组
                    },
                    {
                        name:'大盘收益率',
                        type:'line',
                        smooth: true,
                        data: this.yieldIndex,	// 绑定实时数据数组
                    }
                ]
            }
        }
    },
    mounted () {
        this.myChart = echarts.init(document.getElementById('myChart'), 'light');	// 初始化echarts, theme为light
        this.myChart.setOption(this.echartsOption);	// echarts设置初始化选项
        setInterval(this.addData, 3000);	// 每三秒更新实时数据到折线图
    },
    methods: {
    	// 获取当前时间
        getTime : function() {	
            var ts = arguments[] || ;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData : function() {
        	// 从接口获取数据并添加到数组
            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)));
                // 重新将数组赋值给echarts选项
                this.echartsOption.xAxis.data = this.date;
                this.echartsOption.series[].data = this.yieldRate;
                this.echartsOption.series[1].data = this.yieldIndex;
                this.myChart.setOption(this.echartsOption);
            });
        }
    }
}
</script>

<style>
// 设定宽高，不然超出windows会显示不出来
#myChart{
  width: 100%;
  height: 500px;
  margin:  auto;
}
</style>

要注意的有三点：

1. mounted中init并setOption初始化echarts
2. echartsOption里的data绑定数组
3. setInterval中要更新数组并重新将数组赋值给echarts选项

效果图

*↓喜欢文章的话，就给作者点个赞加关注吧~*