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 gapWidth = 3;
var Shape = G2.Shape;
var Util = G2.Util;
function getFillAttrs(cfg) {
  var attrs = {
    fill: cfg.color,
    fillOpacity: cfg.opacity,
  };
  return attrs;
}
function getRectPath(points) {
  var path = [];
  for (var 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);
    var path = getRectPath(cfg.points);
    path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标

    var realInterval = container.addShape('path', {
      attrs: Util.mix(attrs, {
        path,
      }),
    });
    var radius = (path[2][1] - path[1][1]) / 2;
    var temp = [];
    temp.push(['M', path[1][1], path[1][2]]);
    temp.push(['A', radius, radius, 90, 0, 1, (path[2][1] + path[1][1]) / 2, path[2][2] - radius]);
    temp.push(['A', radius, radius, 90, 0, 1, path[2][1], path[2][2]]);
    temp.push(['L', path[2][1], path[2][2]]);

    var topShape = container.addShape('path', {
      attrs: {
        path: temp,
        fill: '#fff',
        stroke: '#000',
      },
    });

    return realInterval;
  },
});
// 中间带边的矩形
Shape.registShape('interval', 'other', {
  drawShape(cfg, container) {
    var points = cfg.points;
    var attrs = getFillAttrs(cfg);
    var path = getRectPath(cfg.points);
    path = this.parsePath(path); // 将 0 - 1 的值转换为画布坐标

    var intervalPath = [];
    intervalPath.push(['M', path[0][1] + gapWidth, path[0][2]]);
    intervalPath.push(['L', path[1][1] + gapWidth, path[1][2]]);
    intervalPath.push(['L', path[2][1] - gapWidth, path[2][2]]);
    intervalPath.push(['L', path[3][1] - gapWidth, path[3][2]]);
    intervalPath.push(['Z']);
    var intervalShape = container.addShape('path', {
      attrs: Util.mix(attrs, {
        path: intervalPath,
      }),
    });

    container.addShape('line', {
      attrs: {
        x1: path[0][1],
        y1: path[0][2],
        x2: path[1][1],
        y2: path[2][2],
        stroke: '#000',
        lineWidth: 1,
      },
    });
    container.addShape('line', {
      attrs: {
        x1: path[2][1],
        y1: path[2][2],
        x2: path[3][1],
        y2: path[3][2],
        stroke: '#000',
        lineWidth: 1,
      },
    });
    return intervalShape;
  },
});
  // 底边带圆角
Shape.registShape('interval', 'bottom', {
  drawShape(cfg, container) {
    var points = cfg.points;
    var attrs = getFillAttrs(cfg);
    var path = getRectPath(cfg.points);
    path = this.parsePath(path);

    var circleStartY = path[1][2] + (path[0][2] - path[1][2]) / 3;
    var h = path[0][2] - circleStartY;
    var w = (path[2][1] - path[1][1]) / 2;
    var radius = (Math.pow(w, 2) + Math.pow(h, 2)) / (2 * h);
    var temp1 = [];
    temp1.push(['M', path[1][1], path[1][2]]);
    temp1.push(['L', path[1][1], circleStartY]);
    temp1.push(['A', radius, radius, 0, 1, 0, path[2][1], circleStartY]);
    temp1.push(['L', path[2][1], path[2][2]]);

    var temp2 = [];
    temp2.push(['M', path[1][1] + gapWidth, path[1][2]]);
    temp2.push(['L', path[1][1] + gapWidth, circleStartY + gapWidth]);
    temp2.push(['A', radius - gapWidth, radius - gapWidth, 0, 1, 0, path[2][1] - gapWidth, circleStartY + gapWidth]);
    temp2.push(['L', path[2][1] - gapWidth, path[2][2]]);

    container.addShape('path', {
      attrs: Util.mix({
        path: temp1,
        stroke: '#000',
        lineWidth: 1,
      }),
    });

    return container.addShape('path', {
      attrs: Util.mix(attrs, {
        path: temp2,
      }),
    });
  },
});
var colors = ["#CECA9B","#B1C753","#3CA6DF","#459E96","#2E6936","#52AD3B","#90C320","#F7B632","#F39831","#EA452F"];
var data = [
    { name: '个人奢侈品', value: 2490 },
    { name: '豪华车', value: 4380 },
    { name: '豪华酒店', value: 1830 },
    { name: '优质葡萄酒和烈酒', value: 660 },
    { name: '优质食品', value: 460 },
    { name: '艺术精品', value: 390 },
    { name: '设计师家具', value: 330 },
    { name: '私人飞机', value: 180 },
    { name: '游艇', value: 70 },
    { name: '豪华游轮', value: 20 },
];
var Frame = G2.Frame;
var frame = new Frame(data);
frame.addCol('type', obj => '1');
frame = Frame.sortBy(frame, (obj1, obj2) => obj1.value > obj2.value);
var max = Frame.max(frame, 'value');
var min = Frame.min(frame, 'value');

var chart = new G2.Chart({
  id: 'c1',
  width: 500,
  height: 450,
  plotCfg: {
    margin: [20, 150, 80, 80]
  }
});
chart.source(frame);
chart.axis(false);
chart.legend({
  title: null,
  mode: false // 不可点击
});
chart.tooltip({
  title: null,
});
chart.intervalStack().position('type*value').color('name', colors).size(40)
    .shape('name*value', (name, val) => {
      var value = val[1] - val[0];
      if (value === min) {
        return 'top';
      } else if (value === max) {
        return 'bottom';
      }

      return 'other';
    });
chart.render();

</script>

      </body>
    </html>
          
        
层叠柱状图（温度计隐喻）