Echarts柱状图渐变色问题变通

滕米2023-10-26 20:09

问题背景

设计稿中给出了如下图的效果，在柱状图的最上面给出了一个白色的小块，起初我一直在思考亦或者搜索相关的问题：如何在Echarts柱状图顶部实现一个24*4的白色矩形块。始终不得其解，在一个吃饭的瞬间冒出来一个想法是否可以用渐变色变相替代？然后就产生了此文。

演示代码

可以把以下代码，复制到官方示例中查看效果

javascript 复制代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        barBorderRadius: [1, 1, 0, 0], //柱体圆角
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: "#163E52" }, //柱图渐变色
          { offset: 0.92, color: "#369CCC" },
          { offset: 1, color: "#6EBADE" },//-------看这两行，就是顶部白色方块的实现
        ]),
      },
    }
  ]
};

解决方案

其实也是使用主状图渐变色的属性，在0.92处到1(最顶部)实现白色的渐变，变相实现了白色块。这个方案也存在一个问题就是这个方块会根据柱状图的高度改变而改变，不过这点影响在实际的效果图中可以忽略(最怕遇见较真的设计o(╥﹏╥)o)。