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大小随屏幕大小变化

参考文章
1）只有一个echart
在setOption之后调用resize()

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

2）有多个echart

window.addEventLisener(‘resize’,()=>{
	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()
	})
}

4、解决树形图兄弟节点重叠

参考文章

data(){
	return{
		myChart:null
	}
},
init(){
	this.myChart=this.$echarts.init(this.$refs.myChart)
	let option={
		width:chartWidth,
		height:chartHeight
	}
},
resize(){
	/**
	* 以纵向树形图为例
	* 如果是横向属性图，交换chartHeight和chartWidth即可
	*/
	let elesArr = Array.from(new Set(this.myChart._chartsViews[0]._data._graphicEls));
	let dep=this.myChart._chartsViews[0]._data.tree.root.height;//获取树高
	let layer_height=100;// 纵向-层级之间的高度；横向-层级之间的宽度
	let currentHeight = layer_height * (dep+1) || layer_height;
	let newHeight = Math.max(currentHeight, layer_height);
	this.chartHeight=newHeight+'px';//横向-可把chartHeight写成chartWidth
	let layer_width = 100; // 兄弟节点之间的距离
	let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
	let newWidth = Math.max(currentWidth, layer_width);
	this.chartWidth=newWidth+'px';//横向-可把chartWidth写成chartHeight
	this.myChart.resize();
 }

5、使用v-if时echarts不渲染

参考文章

使用$nextTick()回调echarts函数

6、ECharts调节节点大小以及线条粗细

参考文章