气泡图-自定义 shape - AntV

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

踏实的汉堡包 · 广州地化所揭示印度大陆早期俯冲几何学特征-- ...· 5 月前 ·

鼻子大的炒粉 · 跳过谷歌开机引导 - 百度· 8 月前 ·

狂野的伏特加 · windows11内置微软copilot国内 ...· 8 月前 ·

冷静的热带鱼 · c++ 随机字符串生成_Code· 9 月前 ·

爱看球的太阳 · /usr/include/c++/8/cst ...· 1 年前 ·

其他

气泡图-自定义 shape

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>气泡图-自定义 shape</title>
    <style>::-webkit-scrollbar{;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  // 自定义 shape, 支持图片形式的气泡
  var Shape = G2.Shape;
  Shape.registerShape('point', 'image', {
    drawShape: function drawShape(cfg, container) {
      cfg.points = this.parsePoints(cfg.points);
      var coord = this._coord;
      container.addShape('line', {
        attrs: {
          x1: cfg.points[0].x,
          y1: cfg.points[0].y,
          x2: cfg.points[0].x,
          y2: coord.start.y,
          stroke: '#ccc',
          lineWidth: 1,
          lineDash: [4, 2]
      return container.addShape('image', {
        attrs: {
          x: cfg.points[0].x - 12 * cfg.size / 2,
          y: cfg.points[0].y - 12 * cfg.size,
          width: 12 * cfg.size,
          height: 12 * cfg.size,
          img: cfg.shape[1]
  var data = [{
    name: 'Internet Explorer',
    value: 26
    name: 'Chrome',
    value: 40
    name: 'Firefox',
    value: 30
    name: 'Safari',
    value: 24
    name: 'Opera',
    value: 15
    name: 'Undetectable',
    value: 8
  var imageMap = {
    'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png',
    'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png',
    'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png',
    'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png',
    'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png',
    'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png'
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 20, 90]
  chart.source(data, {
    value: {
      nice: false,
      max: 60,
      min: 0
  chart.legend(false);
  chart.axis('value', false);
  chart.point().position('name*value').size('value').color('name').shape('name', function(name) {
    return ['image', imageMap[name]]; // 根据具体的字段指定 shape
  }).label('value', {
    offset: -20,
    textStyle: {
      fontSize: 16 // 文本大小
  chart.render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>气泡图-自定义 shape</title>
    <style>::-webkit-scrollbar{;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  // 自定义 shape, 支持图片形式的气泡
  var Shape = G2.Shape;
  Shape.registerShape('point', 'image', {
    drawShape: function drawShape(cfg, container) {
      cfg.points = this.parsePoints(cfg.points);
      var coord = this._coord;
      container.addShape('line', {
        attrs: {
          x1: cfg.points[0].x,
          y1: cfg.points[0].y,
          x2: cfg.points[0].x,
          y2: coord.start.y,
          stroke: '#ccc',
          lineWidth: 1,
          lineDash: [4, 2]
      return container.addShape('image', {
        attrs: {
          x: cfg.points[0].x - 12 * cfg.size / 2,
          y: cfg.points[0].y - 12 * cfg.size,
          width: 12 * cfg.size,
          height: 12 * cfg.size,
          img: cfg.shape[1]
  var data = [{
    name: 'Internet Explorer',
    value: 26
    name: 'Chrome',
    value: 40
    name: 'Firefox',
    value: 30
    name: 'Safari',
    value: 24
    name: 'Opera',
    value: 15
    name: 'Undetectable',
    value: 8
  var imageMap = {
    'Internet Explorer': 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png',
    'Chrome': 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png',
    'Firefox': 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png',
    'Safari': 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png',
    'Opera': 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png',
    'Undetectable': 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png'
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 20, 90]
  chart.source(data, {
    value: {
      nice: false,
      max: 60,
      min: 0
  chart.legend(false);
  chart.axis('value', false);
  chart.point().position('name*value').size('value').color('name').shape('name', function(name) {
    return ['image', imageMap[name]]; // 根据具体的字段指定 shape
  }).label('value', {
    offset: -20,
    textStyle: {
      fontSize: 16 // 文本大小

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用