G2 - 圆角层叠柱状图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>圆角层叠柱状图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
      var Shape = G2.Shape;
      var Util = G2.Util;
      function getFillAttrs(cfg) {
        var attrs = Util.mix({
          fill: cfg.color,
          fillOpacity: cfg.opacity
        }, cfg.style);
        return attrs;
      }
      function getRectPath(points) {
        var path = [];
        for (let i = 0; i < points.length; i++) {
          var point = points[i];
          if (point) {
            var action = i === 0 ? 'M' : 'L';
            path.push([action, point.x, point.y]);
          }
        }
        var first = points[0];
        path.push(['L', first.x, first.y]);
        path.push(['z']);
        return path;
      }
      // 定边带圆角
      Shape.registShape('interval', 'top', {
        drawShape(cfg, container) {
          var points = cfg.points;
          var attrs = getFillAttrs(cfg);
          let path = getRectPath(cfg.points);
          path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标
          var radius = (path[2][1] - path[1][1]) / 2;
          var temp = [];
          temp.push(['M', path[0][1], path[0][2]]);
          temp.push(['L', path[1][1], path[1][2] + radius]);
          temp.push(['A', radius, radius, 90, 0, 1, path[1][1] + radius, path[1][2]]);
          temp.push(['L', path[2][1] - radius, path[2][2]]);
          temp.push(['A', radius, radius, 90, 0, 1, path[2][1], path[2][2] + radius]);
          temp.push(['L', path[3][1], path[3][2]]);
          temp.push(['Z']);
          return container.addShape('path', {
            attrs: Util.mix(attrs, {
              path: temp,
            })
          });
        }
      });
      // 底边带圆角
      Shape.registShape('interval', 'bottom', {
        drawShape(cfg, container) {
          var points = cfg.points;
          var attrs = getFillAttrs(cfg);
          let path = getRectPath(cfg.points);
          path = this.parsePath(path);
          var radius = (path[2][1] - path[1][1]) / 2;
          var temp = [];
          temp.push(['M', path[0][1] + radius, path[0][2]]);
          temp.push(['A', radius, radius, 90, 0, 1, path[0][1], path[0][2] - radius]);
          temp.push(['L', path[1][1], path[1][2]]);
          temp.push(['L', path[2][1], path[2][2]]);
          temp.push(['L', path[3][1], path[3][2] - radius]);
          temp.push(['A', radius, radius, 90, 0, 1, path[3][1] - radius, path[3][2]]);
          temp.push(['Z']);
          return container.addShape('path', {
            attrs: Util.mix(attrs, {
              path: temp,
            })
          });
        }
      });

      var data = [
        {year: '2014', type: 'Sales', sales: 1000},
        {year: '2015', type: 'Sales', sales: 1170},
        {year: '2016', type: 'Sales', sales: 660},
        {year: '2017', type: 'Sales', sales: 1030},
        {year: '2014', type: 'Expenses', sales: 400},
        {year: '2015', type: 'Expenses', sales: 460},
        {year: '2016', type: 'Expenses', sales: 1120},
        {year: '2017', type: 'Expenses', sales: 540},
        {year: '2014', type: 'Profit', sales: 300},
        {year: '2015', type: 'Profit', sales: 300},
        {year: '2016', type: 'Profit', sales: 300},
        {year: '2017', type: 'Profit', sales: 350}
      ];
      var chart = new G2.Chart({
        id: 'c1',
        height: 300,
        forceFit: true,
        plotCfg: {
          margin: [20, 80, 80, 80]
        }
      });
      chart.source(data, {
        sales: {
          max: 2400,
          tickInterval: 600
        }
      });
      var axisCfg = {
        title: null,
        labels: {
          label: {
            fontFamily: 'Monospace',
            fontWeight: 700,
            fontSize: 14,
            fill: '#666'
          }
        },
        grid: {
          line: {
            lineDash: [0, 0],
            stroke: '#ddd'
          }
        }
      };
      chart.axis('year', axisCfg);
      chart.axis('sales', Util.mix({},axisCfg, {
        line: null
      }));
      chart.legend({
        position: 'bottom'
      });
      chart.intervalStack().position('year*sales').color('type', ['#468DF1', '#CD5744', '#EDB430'])
        .size(35)
        .shape('type', function(val) {
        if (val === 'Profit') { // 顶部圆角
          return 'bottom';
        } else if (val === 'Sales') { // 底部圆角
          return 'top';
        } else {
          return; // 其他默认
        }
      }).style({
        stroke: '#333',
        lineWidth: 2
      });
      chart.render();
</script>

      </body>
    </html>
          
圆角层叠柱状图