echars解决多条折线图x轴与数据不对应的情况

在使用Echarts绘制多条折线图时,若各条折线数据长度不一致,可能导致x轴数据错位。通过官方文档发现,可以将series中的data以键值对方式填充,确保x轴数据正确对应。这样,即使不同折线的数据长度不同,Echarts也能自动调整。需要注意的是,x轴数据会以第一次添加到series中的最长数据为准。
摘要由CSDN通过智能技术生成

以前画单条折线图的时候会直接将x轴data,series中data分开来填充如下:
xAxis

	xAxis: [{
		type: 'category',
		boundaryGap: false,
		axisLabel: {
			color: '#30eee9'
		},
		axisLine: {
			show: false,
			lineStyle: {
				color: '#397cbc'
			}
		},
		axisTick: {
			show: false,
		},
		splitLine: {
			show: false,
			lineStyle: {
				color: '#195384'
			}
		},
		data:[]
	}],

series:

{
   
								name:key,
								type: 'line',
								yAxisIndex:1,
								symbol: 'circle',
								symbolSize: 1,
								itemStyle: {
   
									normal: {
   
										lineStyle: {
   
											width: 2
										}
									}
								},
								markPoint: {
   
									itemStyle: {
   
										normal
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值