vue+echarts绘制多个折线图并自适应宽度

偏执的太偏执、 2023-02-26 05:19 24阅读 0赞

问题描述：在绘制多个折线图时，虽然在初始化echarts实例的dom上设置了宽度（宽度百分比，最小宽度像素值），但是折线图并没有按照宽度自适应。  
解决方法：  
html：

js:

drawLine(chartxData, chartyData, xName){ 
    		        // 基于准备好的dom，初始化echarts实例
    		        
    		        let myChart = echarts.init(document.getElementById('myChart'+this.id));
    		        // 绘制图表
    		        myChart.setOption({ 
    		        	tooltip: { 
    			            trigger: 'axis',   //显示提示框
    			            formatter: '{b}<br/>总调用量:{c}' // b为x轴数据，c为y轴数据
    			        },
    			        // grid官方解释为grid 组件离容器的距离，具体得要自己调
    				    grid:{ 
    	                   	left: 60,
    				        right: 60,
    				        top: 30,
    				        bottom: 30,
    	                },
    				   	xAxis: { 
    				   		name: xName,// x轴单位
    				        type: 'category',// 坐标轴类型，category类目轴，适用于离散的类目数据。
    				        boundaryGap: false,   //标签和数据显示在刻度下面
    				        data: chartxData
    				    },
    				    yAxis: { 
    				    	name: '调用量',// y轴单位
    				        type: 'value',// 坐标轴类型， value数值轴，适用于连续数据。
    				        axisLine: { 
    			              show: true,   //显示刻度线
    			              lineStyle: { 
    			                type: 'solid',   //实线
    			              }
    			            }
    				    },
    				    series: [{ 
    				        data: chartyData,
    				        type: 'line',// 图标类型，折线图
    				        itemStyle : { 
    			                normal : { 
    			                  color:'#5B8FF9',   //折点的颜色
    			                  lineStyle:{ 
    			                    color:'#5B8FF9'   //折线的颜色
    			                  },
    			                }
    			            }
    				    }]
    		      	});
    		      	// 修复echarts设置百分比宽度90%后实际宽度只有90px,动态直接对echarts设置宽度，但是也不能设置百分比宽度，只能设置像素宽度
    		      	let that = this;
    		      	// 定时为了chart能够先初始化
    		      	setTimeout(function(){ 
    		      		console.log(that.id+'offsetWidth'+that.$refs[`myChart${ that.id}`].offsetWidth)
    		      		// $refs[`myChart${that.id}`]为动态获取元素ref
    		        	document.getElementById('myChart'+that.id).style.width=that.$refs[`myChart${ that.id}`].offsetWidth+'px';
    		        	// 改变宽度后chart自适应
    		        	myChart.resize();
    		        	// echarts根据浏览器窗口大小改变自适应，改变浏览器宽度后chart自适应
    		        	window.addEventListener("resize", () => {  myChart.resize(); });
    		      	},20)
    		   	}
    		   	// chartxData数据为数组格式，例如：['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']。chartyData也一样。