vue 中使用echarts绘制动态数据折线图 & 解决动态数据重绘折线图时，重绘感觉特别明显的问题

 参考的文章👉 https://blog.csdn.net/zouhaodong/article/details/80974837

<template>
    <div class="chart" ref="chart" style="width: 85%; height: 450px;"></div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');
  import 'echarts/lib/chart/bar';
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  require('echarts/lib/component/legend');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/markPoint');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/dataZoom');

  Date.prototype.Format = function (fmt) {
    var o = {
      "M+": this.getMonth() + 1,                 //月份
      "d+": this.getDate(),                    //日
      "h+": this.getHours(),                   //小时
      "m+": this.getMinutes(),                 //分
      "s+": this.getSeconds(),                 //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  };
  export default {
    name: "lineChart",
    data() {
      return {
        chart: null,
        option: {}
      }
    },
    mounted() {
      this.chart = echarts.init(this.$refs.chart);
      this.drawChart();
    },
    methods: {
      getFakeData(nowTime) {
        const pointsNum = 80;
        let points = [];
        // let timeDiff = 1000 * 60 * 5; // 5min
        let timeDiff = 1000 * 2; // 2s
        for(let i = 0; i < pointsNum; i++ ) {
          let dateTime = new Date(nowTime - timeDiff * i);
          points.push({
            value: [dateTime.Format("yyyy-MM-dd hh:mm:ss") ,Math.round(Math.random() * 5)]
          });
        }
        return points.reverse();
      },
      drawChart() {
        let nowTime = Date.now();
        const colors = ['#2EC7C9', '#B6A2DE','#5AB1EF', '#FFB980', '#D87A80'];

        let option = {
          color: colors,
          title: {
            text: 'my test',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#283b56'
              }
            },
            formatter(params) {
              console.log(params);
              var result = params[0].value[0];
              params.forEach(function(item) {
                result += '<br/>';
                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                result += item.seriesName + "：";
                result += isNaN(item.value[1]) ? 0 : `${item.value[1]}M`;
              });
              return result;
            },
          },
          legend: {
            data:['服务占用内存', '文件占用内存']
          },
          toolbox: {
            show: true,
            right: 20,
            feature: {
              restore: {},
            }
          },
          xAxis: { //如果是多个图表对应了不同的x轴，用数组的形式，每一个图表为一项
            type: 'time',
            splitNumber:5, //平均分成5份
            boundaryGap: false,
          },
          yAxis: {
            type: 'value',
            name: '占用空间',
            min: 0,
            axisLabel:{
              formatter:'{value}M'       //给Y轴上的刻度加上单位
            },
            // scale: true,
            max: 10
          },
          series: [
            {
              name: '服务占用内存',
              type: 'line',
              showSymbol: false,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: colors[0]
                }, {
                  offset: 1,
                  color: '#fff'
                }])
              },
              data: this.getFakeData(nowTime)
            },
            {
              name: '文件占用内存',
              type: 'line',
              symbol: 'none',
              smooth: true,
              areaStyle: {
                // 设置颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: colors[1]
                }, {
                  offset: 1,
                  color: '#fff'
                }])
              },
              data: this.getFakeData(nowTime)
            }
          ]
        };
        this.option = option;
        this.chart.setOption(option);
        this.drawDynamicChart();
      },
      drawDynamicChart(){
        let option = this.option;
        let timer = setInterval(() => {
          let nowTime = Date.now();
          option.series[0].data.shift();
          option.series[1].data.shift();
          option.series[0].data.push({value: [new Date(nowTime).Format("yyyy-MM-dd hh:mm:ss"),Math.round(Math.random() * 5)]});
          option.series[1].data.push({value: [new Date(nowTime).Format("yyyy-MM-dd hh:mm:ss"),Math.round(Math.random() * 5)]});
           /**
            * 重绘感觉明显的解决方法 👇
            */
          option.animation = false; // 重新绘制时需要把动画效果关闭， 不关闭的话重新渲染时会有明显的重新绘制图表的感觉
          this.chart.setOption(option);
        }, 2000);
      }
    }
  }
</script>

<style scoped>
</style>