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

问题描述:在绘制多个折线图时,虽然在初始化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也一样。
Vue Echarts 是一个基于Vue.js框架的图表库,用于绘制各种类型的图表,包括 k 线图。 要使用 Vue Echarts 绘制 k 线图,首先需要在项目中引入 EchartsVue Echarts,可以通过 npm 或者通过 CDN 引入。 在 Vue 组件中,可以创建一个 div 元素作为容器,将其绑定到 Echarts 实例上。代码类似于以下形式: ```html <template> <div ref="chart"></div> </template> <script> import echarts from 'echarts'; import VueECharts from 'vue-echarts'; export default { components: { VueECharts }, mounted() { this.chart = echarts.init(this.$refs.chart); this.renderChart(); }, methods: { renderChart() { // 设置图表配置项和数据 const option = { // ... }; // 调用 setOption 方法,将配置项应用到图表中 this.chart.setOption(option); } } } </script> ``` 在上述代码中,mounted 钩子函数中初始化了 Echarts 实例,并将其绑定到 ref 为 "chart" 的 div 元素上。然后,在 renderChart 方法中,设置图表的配置项和数据,并使用 setOption 方法将配置项应用到图表中。 绘制 k 线图的具体配置项和数据根据需求和数据源的格式而定,可能包括 x 轴和 y 轴的设置、k 线图的样式设置等。 在配置项中,需要指定 k 线图的类型为 "candlestick",并根据实际情况设置相关参数。 以上是使用 Vue Echarts 绘制 k 线图的基本流程,通过设置配置项和数据,可以实现自定义的 k 线图效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值