x轴数据分组效果

示例链接

image.png

1. 添加一组新x轴
   注意：这只适用于每组数据的长度一样的情况，因为这里的data会等分
2. 不能使用dataset，因为重复的数据会自动合并
   如当dataset为下例所述时，只会显示a,b,c而不是a,b,c,a,b,c

dataset: {
  source: [
    ['name', 'age'],
    ['a', 41,],
    ['b', 20,],
    ['c', 52],
    ['a', 4,],
    ['b', 2,],
    ['c', 5],
  ],  
},

基准线markline

1. markline只能在tooltip: {trigger: 'item'}才能显示移入提示效果
2. 当markline的值大于y轴数据的最大值时，是无法显示基准线的，这时需要调整yAxis的max属性，让它大于等于markline

双x轴（第二条x轴为时间）

1. 双x轴时，两条x轴没有直接的联系，所以当第一组x轴的数据和第二组x轴的数据稍有个数上的差异就会错位显示
2. 包含两条x轴信息的tooltip信息
   
   image.png
   
   如图：拖动滑块到某个范围时，第二个x轴的数据（2023-01、2023-02）是等分状态，但是他们对应的第一条x轴的数据没有被等分，因为当前1月的数据要多于2月
   原因
   第一条x轴的数据和第二条x轴的数据没有一一对应的关系，第二条x轴的数据为["2023-01","2023-02", "2023-03"]，当拖动滑块时，相当于将筛选后的数据重新渲染，这时筛选后的第二条x轴数据还剩下2023-01和2023-01，所以会整个x轴还是会被等分
   解决办法
   ● 让第二条x轴的数据与第一条x轴的数据对应上
   如第一条x轴数据为

[
  "2023-01 A",
  "2023-01 B",
  "2023-01 C",
  "2023-02 A",
  "2023-02 B",
  "2023-02 C",
  "2023-03 A",
  "2023-03 B",
  "2023-03 C",
]

第二条x轴数据就变成

[
  "",
  "2023-01",
  "",
  "",
  "2023-02",
  "",
  "",
  "2023-03",
  "",
]

示例链接

缺点：
● 第二条轴的label不一定能在中间
● 无法使用默认的分割线splitLine