vue 中 Echarts 视图动态更新

需求：父组件中数据跟新，子组件视图更新。
思路：子组件watch监听 props数据的变更，当监听到变更时，重新加载 options配置。
所以父组件只需要更新数据，子组件来接收监听

<template>
  <div>
    <div :id="id" style="width:100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  name: 'barCharts',
  props: {
      id: {
      type: String
    },
    data: {
      type: Array
    },
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        console.log('newValue', newValue)
        console.log('oldValue', oldValue)
        this.initLine() // 数据更新触发
      },
      deep: true // 深度监听
    }
  },

  data() {
    return {}
  },
  methods:{
	initLine() {
	let option = {
		...... // 视图配置项，这里简单写一些
		grid: {
          	top: 20,
          	bottom: 30,
          	left: 0,
          	right: 0
        },
        tooltip: {
        	show：false
        },
        xAxis: {
        	type: 'category'
        },
        yAxis:{
        	type: 'value'
        },
        series:{
        	data:this.data, // 监听这里 更改视图
        	type: 'bar', // 这里举例为柱状图
        }
        
	}
	let myChart = this.$echarts.init(document.getElementById('视图id，动态传入'), null, { renderer: 'svg' });
	myChart.setOption(option)
	}
   },
	
	
  mounted() {
    this.initLine();
  }
}
</script>

完美解决，可封装为组件，供多个同时调用，这里就不贴出来了😊