vue+echarts动态更新数据及数据变化重新渲染方式

npm install echarts --save

npm install echarts@4.9.0 --save

// 全局引入echarts组件用于绘制图表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<template>
  <div>
    <div id="chartLineBox" style="width: 100%;height: 360px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'FreshmenManageAdmitted',
  data () {
    return {
      // 指定图表的配置项和数据
      option: {
        tooltip: { // 设置tip提示
            trigger: 'axis'
        },
        legend: { // 设置区分（哪条线属于什么）
        },
        xAxis: { // 设置x轴
            type: 'category',
            boundaryGap: false, // 坐标轴两边不留白
            data: ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7'],
            name: '日期', // X轴 name
            nameTextStyle: { // 坐标轴名称的文字样式
                fontSize: 16,
                padding: [0, 0, 0, 20]
            }
        },
        yAxis: {
            name: '正确率',
            nameTextStyle: {
                fontSize: 16,
                padding: [0, 0, 10, 0]
            },
            type: 'value'
        },
        series: [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90], type: 'line' },
                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50], type: 'line' }]
      }
    }
  },
  mounted () {
    this.chartChange()
  },
  methods: {
    chartChange () {
      const myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(this.option, true)
    }
  }
}
</script>

// 三种样式表，可以选择一种使用
import 'assets/css/macarons.js'
import 'assets/css/customed.js'
import 'assets/css/vintage.js'
 
 
this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
this.myEcharts.setOption(this.option, true)

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

export default {
  name: 'StudentCourseDataChart',
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    'xData': function (val) {
      this.chartChange()
    },
    'yData': function (val) {
      this.chartChange()
    }
  },
  methods: {
    chartChange () {
      this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      this.option.xAxis.data = this.xData
      for (var i = 0; i < this.yData.length; i++) {
        this.yData[i]['type'] = 'line'
      }
      this.option.series = this.yData
      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.setOption(this.option, true)
    }
  }

const StudentCourseChartDataX = ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7']
const StudentCourseChartDataY = [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90] },
                                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50] }]