ECharts实现带有顶部横杠的柱状图

效果图

实现（使用markPoint属性）

let xLength = 15;
let dataAxis = Array.from({ length: xLength }, (item, index) => index);
let data = [];
let rodData = [];
dataAxis.forEach((item, index) => {
  // 设置基础bar数据
  data.push(item + 10);
  // 设置markPoint数据
  rodData.push({
    symbol: 'rect',
    symbolSize: [20, 4],
    xAxis: item,
    yAxis: data[index], // 对应每列基础bar的值
    itemStyle: {
      color: 'rgba(0,222,255,1)'
    }
  });
});
option = {
  xAxis: {
    data: dataAxis,
    axisLabel: {
      color: '#999'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  series: [
    {
      // 基础bar
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0,222,255,0.3)' },
          { offset: 1, color: 'rgba(0,222,255,0.8)' }
        ])
      },
      data,
      barWidth: 20,
      markPoint: {
        data: rodData
      }
    }
  ]
};复制

ps: 本来是觉得有四种实现方式 【bar、pictorialBar、scatter：这三种方式的data值都为基础bar的data值➗设计稿尺寸比例 ，但是实现起来发现每个柱子顶部的横杠高度会有一些微小的差别，就只有markPoint能完美实现这个效果了==】（不知道是不是还有其他实现方式👀）