echarts随记

1、echarts获取不到dom元素的几种情况
1）echarts在子组件中，根据父子组件生命周期，子组件渲染比父组件快
解决办法：
父组件

  beforeMount() {
    window.parentMounted = this._isMounted; // _isMounted是当前实例mounted()是否执行 此时为false
  },
  mounted() {
    window.parentMounted = this._isMounted; // _isMounted是当前实例mounted()是否执行 此时为true
  }

子组件

  mounted() {
    let pMountedTimer = window.setInterval(() => {
      if (window.parentMounted) {
        window.clearInterval(pMountedTimer);
        // 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）
        let graph = this.$echarts.init(this.$refs.graph);
      }
    }, 1);
  },

2）echarts在弹窗等里面，页面初始化加载的时候不会渲染到dom树上，应该在弹窗显示的时候再调用echarts渲染方法，并用this.$nextTick等待页面渲染完
2、echarts大小随屏幕大小变化
在setOption之后调用resize()

myChart.setOption(option)
window.onresize=()=>{
	myChart.resize()
}

3、点击echarts后更改颜色
定义一个变量保存点击时的变量，点击echarts后重新渲染echarts

data(){
	return{
		clickValue:'',
		myChart:{}
	}
},
mounted(){
	this.myChart=this.$echarts.iinit(this.$refs.myChart)
	this.createEcharts()
},
methods:{
	createEcharts(){
		let xData=[];
		let yData=[];
		let myClickValue=this.clickValue
		let option={
			xAxis:{
				type:'category',
				data:xData
			},
			yAxis:{
				type:'value'
			},
			series:[
				{
					data:yData,
					type:line,
					smmoth:true,
					itemStyle:{
						normal:{
							color:function(params){
								//逻辑处理
								if(params.name==this.myClickValue){return 'red'}
								else{
									return 'green'
								}
							}
						}
					}
				}
			]
		}
	}
	this.myChart.setOption(option)
	this.myChart.on('click',param=>{
		this.clickValue=param.name
		this.createEcharts()
	})
}