echarts v4.9.0柱形图怎么设置分割线？

Question

如果我用同样的柱形图，他每次都会把原有的柱形图覆盖掉，能不能单独设置一列分割线出来，像图里这样的。
也就类似于xy同时设置柱形图。
linemark也会覆盖在原有的柱形图之上，有无办法让其反过来呢？柱形图压着linemark。

Answer 1

自定义：

var option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'custom',
      renderItem: function (params, api) {
        var xValue = api.value(0);
        var yValue = api.value(1);
        var start = api.coord([xValue, 0]);
        var size = api.size([0, yValue]);
        var rectShape = echarts.graphic.clipRectByRect(
          {
            x: start[0] - size[0] / 2,
            y: start[1] - size[1],
            width: size[0],
            height: size[1]
          },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        );

        return rectShape && {
          type: 'rect',
          shape: rectShape,
          style: api.style()
        };
      },
      data: [
        ['A', 5],
        ['B', 10],
        ['C', 15],
        ['D', 20],
        ['E', 25]
      ],
      z: 1
    },
    {
      type: 'custom',
      renderItem: function (params, api) {
        if (api.value(0) === 'D') {
          var xValue = api.value(0);
          var start = api.coord([xValue, 0]);
          var end = api.coord([xValue, api.value(1)]);

          return {
            type: 'line',
            shape: {
              x1: start[0],
              y1: start[1],
              x2: end[0],
              y2: end[1]
            },
            style: api.style({
              stroke: 'black',
              lineWidth: 2
            })
          };
        }
      },
      data: [
        ['A', 25],
        ['B', 25],
        ['C', 25],
        ['D', 25],
        ['E', 25]
      ],
      z: 0
    }
  ]
};

Answer 2

在配置项中设置z即可，大的在上。