ECharts折线图 动态数据+固定x轴的平移动画问题

前言:

因为项目要求固定x轴的情况下还要数据平移效果,当我做完才发现,天坑的ECharts折线图的数据是和x轴绑定的,结果就是想要平移效果x轴就得和数据一样往前走,否则固定x轴数据就是跳跃式的.官方文档也没有实现平移的功能,网上也没有找到类似的问题,困扰2天终于想到一个解决办法.

解决办法:

设置2个x轴,一个固定的x轴显示,一个和数据一起跑的动态x轴隐藏,代码如下:

xAxis: [
    {
      //是否显示x轴
	  show: false,
      // 坐标轴类型
      type: 'category',
      // 坐标轴两边留白策略
      boundaryGap: false,
      // x轴刻度数据:横轴坐标是数组名,是外部定义的数组存放x轴的刻度数据,通过
      // push(添加)和shift(删除)实现动态效果
      data: 横轴坐标, 
      // 是否反向
      inverse: true,
      // 坐标轴单位
      name: '秒',
      // 坐标轴名称显示位置。
      nameLocation: 'start',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 10,
    },
	{
      type: 'category',
      boundaryGap: false,
			inverse: true,
			//x 轴的位置。
			position:'bottom',
      data: [0,1,2,3,4,5,6,7,8,9,10],
      // 坐标轴刻度相关设置。
     axisTick: {
      // 保证刻度线和标签对齐
        alignWithLabel: true
      }
    }
  ],