vue+echarts的各种问题

echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line
1：一个页面存在多个echarts图形,resize失效，图形自适应窗口大小。
当一个页面有两个echarts图形，想要页面大小发生改变，重新绘制图形如果还写为
myChart.setOption(option);
window.onresize = myChart.resize;
则只有一个图形可自适应窗口大小，另外一个则不能随窗口大小而改变图形大小，

解决办法为在每一个echarts图形页面将上面代码改为如下代码：
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
例如：

//这个设置echart的自适应高度，切记一定要给id的父级设置宽高，不然无法渲染图标的高度。
<div class="chartBorderBox"> 
	<!-- <div id='yieldChart' style='height:250px'></div> -->//官网是直接设置固定高度
	<div id='yieldChart' class="board-border"></div>
</div>
css: 
.chartBorderBox{width:100%;height:100%};//如果图标外部有标题，需要减去标题的高度比如1.5rem的高度：height: calc(100% - 1.5rem)
.board-border { width: 100%; height: 100%; border: 1px solid #0d2451; position: relative; overflow: hidden; // background: #151456; }
 //以上2个盒子的设置即可自适应窗口高度的变化。 
js:
OeeChart(dataText, data1, data2, data3) {
				// 温度趋势数据开始------------------------
				let yieldChart = this.$echarts.init(document.getElementById('yieldChart'))
				let option = {
					title: {
						text: '',
						textAlign: 'center',
						textStyle: {
							color: '#80FFFF',
							fontSize: 12
						}
					},
					legend: {
						data: ['OEE', '时间移动', '性能稼动'],
						textStyle: {
							color: "white"
						}
					},
					grid: {
						left: '2%',
						right: '2%',
						top: '20%',
						bottom: '5%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis' //鼠标悬浮提示
					},
					xAxis: {
						type: 'category',
						data: dataText,
						axisLine: { //这是x轴文字颜色
							lineStyle: {
								color: "#ccc",
							}
						},
						axisLabel: {
							interval: 0,
							rotate: 40,
							show: true,
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed' //分割线为虚线
							}
						},
						axisLabel: {
							formatter: '{value}',
							textStyle: {
								color: '#ccc'
							}
						}
					},
					series: [{
							name: 'OEE',
							data: data1,
							type: 'line',

							itemStyle: {
								normal: {
									color: '#54AAFB',
									lineStyle: {
										color: "#54AAFB" //折线的颜色
									},
								}
							},
							label: {
								show: true
							},

						},
						{
							name: '时间移动',
							data: data2,
							type: 'line',
							symbol: 'emptyCircle',
							symbolSize: 8,
							itemStyle: {
								normal: {
									color: 'green',
									lineStyle: {
										color: "green" //折线的颜色
									},
								}
							},
							label: {
								show: true
							},

						}, {
							name: '性能稼动',
							data: data3,
							type: 'line',
							symbol: 'emptyCircle',
							symbolSize: 8,
							itemStyle: {
								normal: {
									color: 'yellow',
									lineStyle: {
										color: "yellow" //折线的颜色
									},
								}
							},
							label: {
								show: true
							},

						}
					]
				};
				// 绘制图表
				yieldChart.setOption(option);
				// 温度趋势数据结束------------------------

				setTimeout(function() {
					window.onresize = function() {
						yieldChart.resize();
					}
				}, 300)
			}

--------------------2022/3/29更新------------------------------------------------------------------------------------------------------------

以上问题只能改变浏览器窗户的大小改变而自适应，同样现实场景还有可能通过页面某个按钮点击来改变内部窗口大小，这个时候就不完全实用了，所以以下：
首先自定义指令：

在main.js里引用：import './utils/btnDirectives' 
btnDirectives.js:
import Vue from 'vue'
import router from '../router/index'

Vue.directive('resize', {
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        // console.log(el, "绑定", binding);
        let width = '', height = '';
        function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
                binding.value({ width: style.width, height: style.height });  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) { 
        clearInterval(el.__vueSetInterval__);
    }
})
// 按钮权限自定义指令 =============== 使用方法
// 页面组件上 v-resize= 'monResize'

应用：

<template>
	<div id="top5Chart"  v-resize='monResize'></div>
</template>
methods:{
monResize(){
		let completedRate=localStorage.getItem("completedRate")
		this.progressChart(completedRate)//这个方法就是重新调用一下能够渲染图表的方法，比如也可以直接调用请求后台接口的方法（若渲染图标是在请求接口后直接调用渲染方法progressChart的时候）
},
progressChart(data) {
				let progressChart = this.$echarts.init(document.getElementById('progressChart'))
				let option = {
					series: [{
						type: 'gauge',
						radius: "90%",
						center: ['50%', '50%'],
						axisLine: {
							lineStyle: {
								width: 20,
								color: [
									[0.3, '#67e0e3'],
									[0.7, '#37a2da'],
									[1, '#fd666d']
								]
							}
						},
						pointer: {
							width: 5,
							itemStyle: {
								color: 'auto',
							}
						},
						axisTick: {
							distance: 10,
							length: 8,
							lineStyle: {
								color: '#fff',
								width: 2
							}
						},
						splitLine: {
							distance: -10,
							length: 10,
							lineStyle: {
								color: '#fff',
								width: 4
							}
						},
						axisLabel: {
							color: 'auto',
							distance: 15, //内盘距离
							fontSize: 10
						},
						detail: {
							valueAnimation: true,
							fontSize: 20, //表盘数据
							formatter: '{value} %',
							color: 'auto'
						},
						data: [{
							value: data
						}]
					}]
				};
				// 绘制图表
				option && progressChart.setOption(option);
				progressChart.resize();
				
			},
			
}

以上即可实现
--------------------2022/9/9更新------------------------------------------------------------------------------------------------------------

主要是为了解决折线图、柱状图数据大小差距过大，导致图形高低差距太大的问题以及相关展示问题，当使用不均匀刻度后，出现Y轴数据不正确的情况，主要是因为
log轴要求横坐标数据大于0，这是由对数函数性质决定的。所以对于数据中含有0图形会出现上面的异常：
解决思路：将返回的数据0.1全部遍历修改为0.1，然后再echart中将0.1处理为0，同时悬浮的数字也相对应处理：
参考：https://blog.csdn.net/yanxiaomu/article/details/104557851

for(let i=0;i<y_zkData.length;i++){
					if(y_zkData[i]==0){
						y_zkData[i]=0.1
					}
				}
this.getChart3('zkID', y_zkData, x_data)
tooltip: {
						trigger: 'axis',
						formatter:function(params){
								    let html = params[0].name
								    params.forEach((item,index)=>{
								        html+=(`<br/>${item.marker+item.seriesName}: ${item.value===0.1 ? 0 : item.value}`)
								    })
								    return html;
								}
					},
yAxis: [{
						// type: 'value',
						type: 'log', //value是均匀分布的，log是根据数据差别太大设置的
						axisLabel: {
							        formatter: function (value) {
							            return value === 0 ? 0.1 : value;
						            }
								},
						// name: '1区设定温度',
						
					}],
					dataZoom: { // x轴数据量大的时候放大和缩放
						type: 'inside'
					},