echart markLine x轴两点之间或日期之间的竖线箭头

sy_yan

已于 2022-08-06 12:15:58 修改

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-08-06 12:15:04 首次发布

本文链接：https://blog.youkuaiyun.com/sy_yan/article/details/126192615

该博客介绍了如何在一个包含两个不同时间尺度的图表中实现动态月份启动线，通过调整x轴刻度并隐藏辅助轴来精确标识月份起始日期，解决了坐标间找中间位置的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求是想实现在两个月份之间的一个竖线代表月份启动日期这个竖线是动态的。
这里的难点是：x轴是日期通过坐标找不到日期之间的中间的位置。
解决方案：因此再创建有个x轴我这里新的x轴刻度放大了五倍根据比例找到你画的竖线在新的x轴的位置，最后隐藏掉新的x轴。在这里插入图片描述

option = {
  grid: {
    left: '3%',
    right: '7%',
    bottom: '7%',
    containLabel: true
  },
  tooltip: {
    // trigger: 'axis',
    showDelay: 0,
    
  },
  xAxis: [
    {
      // type: 'value',
       axisTick: {
alignWithLabel: false
},
      scale: true,
      data: ['2022/1','2022/2','2022/2','2022/2','2022/2']
    },
    {
      axisTick: {
alignWithLabel: false
},
      // type: 'category',
      scale: true,
      data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      
    }
  ],
  series: [
    
    {
      name: 'Male',
      type: 'line',
      // prettier-ignore
      data: [[174.0, 65.6]],
      xAxisIndex: 1,
      markLine: {
        lineStyle: {
          type: 'solid'
        },
        data: [{ xAxis: 10 }]
      }
    }
  ]
};