vue+echars动态渲染折线图

<template>
  <div class="tm-card">
    <div class="card-body">
      <div class="chart-box">
        <div id="traffic_line_chart" style="height:300px; width:100%" />
      </div>
    </div>
  </div>

</template>

<script>
import echarts from 'echarts'
import { EleResize } from '@/utils/esresize.js'
import { getRealtimeflowApi } from '@/api/dashboard'

export default {
  name: 'RealTimeTraffic',
  props: {
    index: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 图表初始化
    initChart() {
      const chartOption = {
        color: ['#3398DB'],
        title: {
          show: false,
          text: '实时流量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
          data: ['实时流量']
        },
        toolbox: {
          show: false
        },
        grid: {
          top: '3%',
          right: '3%',
          bottom: '3%',
          left: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '实时流量',
            type: 'line',
            symbol: 'none',
            stack: '总量',
            data: []
          }
        ]
      }
      this.chart = echarts.init(document.getElementById('traffic_line_chart'))
      this.chart.setOption(chartOption)
      const resizeDiv = document.getElementById('traffic_line_chart')
      var that = this
      const listener = function() {
        that.chart.resize()
      }
      EleResize.on(resizeDiv, listener)
      getRealtimeflowApi({ DataView: '每60秒刷新一次' }).then(res => {
        res.data.series.data = res.data.series.map((item, index) => {
          return {
            data: item
          }
        })
        this.chart.setOption({
          xAxis: {
            data: res.data.xAxis
          },
          series: res.data.series
        })
      })
    }
  }
}
</script>