echarts 折线图带动画

<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100'
    },
    height: {
      type: String,
      default: '100'
    },
    datalist: {
      type: Object,
      default: () => {
        return {}
      }
    },
    animation: {
      type: Boolean,
      default: false
    },
    showTool: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      subject: [],
      value: [],
      colors: ['#558BFF', '#A1D4FF'],
      remWidth: '',
      remHeight: '',
      scale: 1,
      fontSize: 14,
      lineWidth: 6,
      pieData: []
    }
  },
  watch: {
    datalist: {
      handler: function(newData, oldData) {
        this.initChart()
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    const html = document.getElementsByTagName('html')[0]
    const width = html.clientWidth
    this.fontSize = this.fontSize / 1920 * width
    this.lineWidth = this.lineWidth / 1920 * width
    this.initChart()
    this._animation()
  },
  methods: {
    _animation() {
      if (this.animation) {
        const arr = this.datalist.data[1]
        let selectIndex = 0
        setInterval(() => {
          this.chart.dispatchAction({
            type: 'showTip', // 默认显示提示框
            seriesIndex: 0, // 这行不能省
            dataIndex: selectIndex
          })
          this.chart.dispatchAction({
            type: 'downplay',
            // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
            seriesIndex: 0, // 这行不能省
            dataIndex: selectIndex === 0 ? arr.length - 1 : selectIndex - 1
          })
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: selectIndex
          })
          selectIndex = selectIndex + 1
          if (selectIndex >= arr.length) {
            selectIndex = 0
          }
        }, 5000)
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
      const data = this.datalist.data
      this.pieData = this.datalist.data
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: `{b0}<br />{a}: {c0}${this.datalist.until}`,
          extraCssText: 'box-shadow: 0 0 15px rgba(33,116,146,1) inset'
        },
        toolbox: {
          show: this.showTool,
          feature: {
            magicType: { type: ['line', 'bar'] },
            myTool1: {
              show: true,
              title: '导出excel',
              icon: 'path://M676.571 896H54.857V164.571h914.286V896H676.57zM640 859.429V713.143H384v146.286h256zM384 493.714h256V347.43H384v146.285z m0 36.572V676.57h256V530.286H384zM91.429 859.429h256V713.143h-256v146.286z m256-182.858V530.286h-256V676.57h256z m0-182.857V347.43h-256v146.285h256zM932.57 347.43h-256v146.285h256V347.43z m0 182.857h-256V676.57h256V530.286z m-256 182.857v146.286h256V713.143h-256z',
              onclick: () => {
                alert('暂无下载链接')
              }
            }
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#233e64'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.fontSize,
              fontFamily: 'SourceHanSansCN-Light'
            }
            // interval: 0
          },
          axisTick: { show: false },
          data: data[1]
        }],
        yAxis: [{
          type: 'value',
          name: this.datalist.yAxisName,
          nameTextStyle: {
            color: '#fff'
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#233e64'
            }
          },
          splitArea: {
            show: false// 去除网格区域
          },
          axisLine: { show: true },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.fontSize,
              fontFamily: 'SourceHanSansCN-Light'
            }
          },
          axisTick: { show: false }
        }],
        series: [{
          name: this.datalist.type,
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          symbolSize: 0,
          lineStyle: {
            normal: {
              color: 'rgba(26,214,226,1)', // 线条颜色
              width: this.lineWidth
            }
          },
          data: data[0]
        }],
        backgroundColor: 'rgba(0,0,0,0)'
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
    .chart {
        margin: 1rem 0.4rem 0 0.4rem;
    }
</style>