vue+echarts 实现动态折线图

之前公司有个绘制实时盈利率折线图的需求，实现的还不错，今天来分享下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