echarts 柱状图、折线图 markLine 不显示的解决方案

柯里化2025-03-18 17:40

当markLine的值超出y轴的最大刻度时，markline不显示了。柱状图和折线图的解决方式不一样。

网上看了两种解决办法：

加上markline的值，再计算yAxis的max值，文章链接blog.csdn.net/baobao_1234...
设置yAxis的max值，取series.data的值加上markline的值，取最大值，设置成yAxis.max，y轴显示不符合需求，舍弃。

柱状图

思路：xAxis.data数据不变，series.data.push(markline的值)。但是有一个问题，当xAxis.data中只有一个值时，会把markline的值也显示在图中，如下图：(不是堆积，xAxis只有Mon，series.data为 $12, 142$ )

修改思路：将series.data中markline的值，itemStyle设置成透明，缺点是鼠标hover到上边那一截会变成小手，不过一般不会出现x轴只有一条数据的时候，产品也能接受。

实现效果

完整代码

js 复制代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [12, 20, 15, 8, 7, 11, 13, { value: 142, label: { show: false }, itemStyle: { color: 'transparent' } }],
      type: 'bar',
      barWidth: 16,
      label: {
        show: true,
      },
      markLine: {
        symbol: ['none', 'none'],
        data: [{ name: '人数', yAxis: 142 }],
        lineStyle: { color: '#999999' },
        label: {
            position: 'insideEndTop',
            formatter: '{b}：{c}',
            color: '#999999',
        },
        emphasis: {
            disabled: true,
        },
      },
    }
  ]
};

折线图

本来以为和柱状图是一样的代码就可以了，但是在最后会有个问题，多出来一段线，如图：

思路：还是要把最后一段线设置成透明，但是series.data中的itemStyle是修改小圆圈的，没有lineStyle的设置。最后就搜怎么修改折线图一段线的颜色，找到了visualMap，但是不知道为什么，最后一个不能用大于**，必须得同时有大于、小于。

实现效果

完整代码

js 复制代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        lte: 6,
        color: 'blue'
      },
      {
        gt: 6,
        lte: 7,
        color: 'transparent'
      }
    ]
  },
  series: [
    {
      data: [15, 23, 22, 21, 13, 14, 26, 142],
      type: 'line',
      markLine: {
        symbol: ['none', 'none'],
        data: [{ name: '全校', yAxis: 142 }],
        lineStyle: { color: '#999999' },
        label: {
            position: 'insideEndTop',
            formatter: '{b}：{c}',
            color: '#999999',
        },
        emphasis: {
            disabled: true,
        },
      },
    }
  ]
};

其实还是有问题的，如果折线图只有一个点时，会变成竖着的一条线，哎！！！只能加一个判断，如果xAxis只有一条数据时，在series中设置 lineStyle: { color: 'transparent' }。

总结

其实在万不得已的情况下，不要搞的这么复杂，如果一开始就这样实现：如果markline的值大于series.data中的值，就设置yAxis.max为markline的值。产品估计也不会说啥，他自己可能都想不到。我就是一开始给自己挖坑，非要y轴刻度均匀，然后一路填坑、挖坑、填坑。。。