echarts父组件传子组件值动态获取数据改变

点击会调取接口进行更改数据

进行赋值

然后传给子组件

props: { 
    echartStyle: {  // 样式 - 1
      type: Object,
      default() {
        return {}
      }
    },
    
    titleText: {   //标题文本 - 1
      type: String,
      default: ''
    },
    
    opinion: {    //区域名称 - 1
      type: Array,
      default() {
        return []
      }
    },
    
    opinionData: {   // 区域数据 - 1
      type: Array,
      default() {
        return []
      }
    },
    
    x: {  // x 轴
      type: Array,
      default() {
        return []
      }
    },
	TodyNumbr: {   // 区域数据 - 1
	  type: Array,
	  default() {
	    return []
	  }
	},
	zuotODYNumber: {   // 区域数据 - 1
	  type: Array,
	  default() {
	    return []
	  }
	},
	
	
  },

子组件进行取值

 data () {
    return {
		DASD:[],
		zuotODY:[],
		tody:[],
    }
  },

mounted(){
		if(this.DASD != undefined){
			this.drawLine()
		}
  },
  watch:{
	  
	  x:{
		  immediate:true,
		  handler: function(value) {
			  this.DASD = value;
		  }
	  },
	  TodyNumbr:{
		  immediate:true,
		  handler: function(value) {
		  			  this.zuotODY = value;
		  }
	  },
	  zuotODYNumber:{
	  		  immediate:true,
	  		  handler: function(value) {
				  this.tody = value;
	  		  }
	  },
	  DASD: function (){
		 if(this.DASD.length >0){
			 this.drawLine()
		 }
	  }
  },

取值过后对值进行一个监听，以便于数据更改时候，视图进行更新
我这个进行了判断DASD有值的时候才调取方法

drawLine(){
		let that = this
        let myCharts = echarts.init(this.$refs.barchart)
        myCharts.setOption({
          title: {
            left: 'center',
            // text: this.titleText, 
            },
			color:['#3995FF','#ff6600'],
			
            tooltip: {
                trigger: 'axis'
            },
            legend: {
				show:true,
				left: 'right',
				icon: "roundRect",
				data: that.opinion // 区域名称
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {   // x 轴
								
                
                data: that.DASD
            },
            yAxis: {   // y 轴
                type: 'value'
            },
            //series: that.opinionData  // 区域数据
			series:[{
					name: '今天',
					type: 'line',
					symbol: 'none',
					stack: '总量',
					lineStyle: {
						color: '#3995FF'
					}, //折现颜色
					data: this.tody
				},
				{
					name: '昨天',
					type: 'line',
					symbol: 'none', //去掉点
					stack: '总量',
					lineStyle: {
						color: '#FF7878'
					},
					data: this.zuotODY
				}
			]
        })
      }

<template>
  <div>
    <div
     ref='barchart'
     :style="echartStyle"
    >
    </div>
  </div>
</template>

<script>
//在 echarts.vue 中
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')