两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)

问题大致需求背景如下:

  • echarts 中有两条折线,两条折线对应两个时间数组,但是显示在同一个坐标系里面;
  • 大概是这个样子,两条折线,共用x轴,但他们的时间可能有交叉,可能没有;
  • 如果想让他们只有一个x轴,y轴,两条折线分别对应自己的x轴数据数组,y轴数据数组,两者的数据可能有交叉,可能没交叉,
直接铺代码了,小伙伴勿怪,一会赶火车去

特意截了图,看着重点吧:
  • 之前的X轴数据都是写死的,现在X轴不传data,它会根据你传入的Y轴中的data的Key值,自动生成时间数据,等分的效果;

    两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)
    文章图片
  • 下图是传入的Y轴的两组data,使用数组形式,以key-value形式;

    两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)
    文章图片
  • 效果图,这样的话,两条折线,虽然在同一坐标系下,但是数据并无交叉,各自对应各自的(x,y)即它自己对应的(key,value);
    • 这个时间点,只有充值的数据,没有消费的数据;

      两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)
      文章图片

    • 在另一个时间点,只有消费的数据,没有充值的数据;

      两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)
      文章图片

【两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x|两条折线,共用X轴,自动生成X轴数据,分别对应自己的(x,y)】先自己看吧,代码,效果图,我先回家收拾家当跑路了。。。。

    推荐阅读