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

<div :id='"myChart"+id' :ref="'myChart'+id" style="width: 90%;min-width: 950px;height: 165px;margin: 0 auto;"></div>

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也一样。
Logo

前往低代码交流专区

更多推荐