vue3+g2plot之旭日图

于 2024-07-26 10:54:12 发布
阅读量317 收藏 3
点赞数 1
分类专栏： Vue 数据分析 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37703224/article/details/140706637
版权

概述

旭日图（Sunburst Chart）是一种现代饼图，它超越传统的饼图和环图，能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。

在实际项目中使用旭日图，可以更细分溯源分析数据，真正了解数据的具体构成。而且，旭日图不仅数据直观，而且图表用起来特别炫酷，分分钟拉高数据汇报的颜值！很多数据场景都适合用旭日图，

基础旭日图

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/ryp44nvUYZ/coffee.json')
  .then((data) => data.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
    });
    plot.render();
  });

自定义 hierarchy field

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
    });
    plot.render();
  });

设置标签布局

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.2,
      radius: 1,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      label: {
        // label layout: limit label in shape, which means the labels out of shape will be hide
        layout: [{ type: 'limit-in-shape' }],
      },
    });
    plot.render();
  });

自定义颜色通道

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      colorField: 'label',
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
    });
    plot.render();
  });

自定义旭日图颜色

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      hierarchyConfig: {
        field: 'sum',
      },
      // 取色来自于：http://zhongguose.com/
      color: ['#f26b1f', '#fc8c23', '#f97d1c'],
      interactions: [{ type: 'element-active' }],
      state: {
        active: {
          style: {
            stroke: '#fff',
            lineWidth: 2,
          },
        },
      },
    });
    plot.render();
  });

自定义旭日图样式

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';
import { last } from '@antv/util';
import chromaJs from 'chroma-js';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const colors = [
      '#5B8FF9',
      '#61DDAA',
      '#65789B',
      '#F6BD16',
      '#7262fd',
      '#78D3F8',
      '#9661BC',
      '#F6903D',
      '#008685',
      '#F08BB4',
    ];
    function getPaletteByColor(color, count) {
      const origin = chromaJs(color);
      const range = [origin.brighten(0.5), origin, origin.darken(0.5)];
      return (
        chromaJs
          // @ts-ignore
          .scale(range)
          .mode('lab')
          .cache(false)
          .colors(count)
      );
    }

    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      sunburstStyle: (datum) => {
        const depth = datum.depth;
        const nodeIndex = datum.nodeIndex;

        const ancestorIndex = last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.nodeIndex || 0;

        const colorIndex = depth === 1 ? nodeIndex : ancestorIndex;
        let color = colors[colorIndex % colors.length];

        if (depth > 1) {
          const newColors = getPaletteByColor(color, last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.childNodeCount);
          color = newColors[nodeIndex % colors.length];
        }

        return {
          fill: color,
          stroke: '#fff',
          lineWidth: 0.5,
        };
      },
    });
    plot.render();
  });

带贴图的旭日图

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
      pattern: {
        type: 'line',
      },
    });
    plot.render();
  });

指定父节点权重

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/%24ixDFx9%248M/coffee-data.json')
  .then((data) => data.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      rawFields: ['symbol'],
      meta: {
        symbol: {
          alias: '国家',
        },
      },
      hierarchyConfig: {
        // the weight of parent node depends on itself
        ignoreParentValue: false,
      },
      tooltip: {
        fields: ['path', 'symbol', 'value'],
        formatter: (datum) => ({
          name: datum.symbol ? `${datum.symbol} ${datum.path}` : datum.path,
          value: datum.value,
        }),
      },
    });
    plot.render();
  });

自定义 Tooltip items

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/Ry8PJXni0S/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      tooltip: {
        customItems: (items) =>
          items.map((item) => {
            const path = item.data[Sunburst.SUNBURST_PATH_FIELD];
            return {
              ...item,
              name: path.length > 20 ? `${path.slice(0, 10)} ... ${path.slice(-10)}` : path,
              value: item.data.value,
            };
          }),
      },
    });
    plot.render();
  });

配置激活展示的层级数

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
        // 配置展示的层级数
        activeDepth: 1,
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
      label: {
        autoRotate: false,
      },
    });
    plot.render();
  });

整合vue3

创建sunburst页面目录，新建如下页面：

  • basic：基础旭日图
  • hierachy：自定义hierachy字段
  • label：设置标签布局
  • color：设置颜色通道
  • style：设置旭日图样式
  • pattern：带贴图的旭日图
  • weight：指定父节点权重
  • tooltip：自定义提示
  • level：设置激活展示层级

vue3版基础旭日图

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/ryp44nvUYZ/coffee.json')
  .then((data) => data.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
    });
    plot.render();
  });

效果预览：
在这里插入图片描述

核心代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {
  fetch('/coffee.json')
      .then((data) => data.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,

          innerRadius: 0.3,
          interactions: [{ type: 'element-active' }],
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版自定义 hierarchy field

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
    });
    plot.render();
  });

核心属性：

hierarchyConfig: {
   field: 'sum',
}

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3设置标签布局

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.2,
      radius: 1,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      label: {
        // label layout: limit label in shape, which means the labels out of shape will be hide
        layout: [{ type: 'limit-in-shape' }],
      },
    });
    plot.render();
  });

核心配置：

label: {
	// label layout: limit label in shape, which means the labels out of shape will be hide
	layout: [{ type: 'limit-in-shape' }],
}

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },
          label: {
            // label layout: limit label in shape, which means the labels out of shape will be hide
            layout: [{type: 'limit-in-shape'}],
          },
          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版自定义颜色通道

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      colorField: 'label',
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
    });
    plot.render();
  });

核心配置：

colorField: 'label',

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },

          colorField: 'label',

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版自定义旭日图颜色

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      hierarchyConfig: {
        field: 'sum',
      },
      // 取色来自于：http://zhongguose.com/
      color: ['#f26b1f', '#fc8c23', '#f97d1c'],
      interactions: [{ type: 'element-active' }],
      state: {
        active: {
          style: {
            stroke: '#fff',
            lineWidth: 2,
          },
        },
      },
    });
    plot.render();
  });

核心配置：

 color: ['#f26b1f', '#fc8c23', '#f97d1c'],

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },

          color: ['red', 'green', 'blue'],

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版自定义旭日图样式

核心代码：

import { Sunburst } from '@antv/g2plot';
import { last } from '@antv/util';
import chromaJs from 'chroma-js';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const colors = [
      '#5B8FF9',
      '#61DDAA',
      '#65789B',
      '#F6BD16',
      '#7262fd',
      '#78D3F8',
      '#9661BC',
      '#F6903D',
      '#008685',
      '#F08BB4',
    ];
    function getPaletteByColor(color, count) {
      const origin = chromaJs(color);
      const range = [origin.brighten(0.5), origin, origin.darken(0.5)];
      return (
        chromaJs
          // @ts-ignore
          .scale(range)
          .mode('lab')
          .cache(false)
          .colors(count)
      );
    }

    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      sunburstStyle: (datum) => {
        const depth = datum.depth;
        const nodeIndex = datum.nodeIndex;

        const ancestorIndex = last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.nodeIndex || 0;

        const colorIndex = depth === 1 ? nodeIndex : ancestorIndex;
        let color = colors[colorIndex % colors.length];

        if (depth > 1) {
          const newColors = getPaletteByColor(color, last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.childNodeCount);
          color = newColors[nodeIndex % colors.length];
        }

        return {
          fill: color,
          stroke: '#fff',
          lineWidth: 0.5,
        };
      },
    });
    plot.render();
  });

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from '@antv/g2plot';
import {last} from '@antv/util';
import chromaJs from 'chroma-js';

onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const colors = [
          '#5B8FF9',
          '#61DDAA',
          '#65789B',
          '#F6BD16',
          '#7262fd',
          '#78D3F8',
          '#9661BC',
          '#F6903D',
          '#008685',
          '#F08BB4',
        ];

        function getPaletteByColor(color, count) {
          const origin = chromaJs(color);
          const range = [origin.brighten(0.5), origin, origin.darken(0.5)];
          return (
              chromaJs
                  // @ts-ignore
                  .scale(range)
                  .mode('lab')
                  .cache(false)
                  .colors(count)
          );
        }

        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],
          hierarchyConfig: {
            field: 'sum',
          },

          
          sunburstStyle: (datum) => {
            const depth = datum.depth;
            const nodeIndex = datum.nodeIndex;

            const ancestorIndex = last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.nodeIndex || 0;

            const colorIndex = depth === 1 ? nodeIndex : ancestorIndex;
            let color = colors[colorIndex % colors.length];

            if (depth > 1) {
              const newColors = getPaletteByColor(color, last(datum[Sunburst.NODE_ANCESTORS_FIELD])?.childNodeCount);
              color = newColors[nodeIndex % colors.length];
            }

            return {
              fill: color,
              stroke: '#fff',
              lineWidth: 0.5,
            };
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版带贴图的旭日图

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
      pattern: {
        type: 'line',
      },
    });
    plot.render();
  });

核心配置：

pattern: {
  type: 'line',
},

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },

          pattern: {
            type: 'line',
          }
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版指定父节点权重

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/%24ixDFx9%248M/coffee-data.json')
  .then((data) => data.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      rawFields: ['symbol'],
      meta: {
        symbol: {
          alias: '国家',
        },
      },
      hierarchyConfig: {
        // the weight of parent node depends on itself
        ignoreParentValue: false,
      },
      tooltip: {
        fields: ['path', 'symbol', 'value'],
        formatter: (datum) => ({
          name: datum.symbol ? `${datum.symbol} ${datum.path}` : datum.path,
          value: datum.value,
        }),
      },
    });
    plot.render();
  });

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {
  fetch('/coffee-data.json')
      .then((data) => data.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{ type: 'element-active' }],
          rawFields: ['symbol'],
          meta: {
            symbol: {
              alias: '国家',
            },
          },
          hierarchyConfig: {
            // the weight of parent node depends on itself
            ignoreParentValue: false,
          },
          tooltip: {
            fields: ['path', 'symbol', 'value'],
            formatter: (datum) => ({
              name: datum.symbol ? `${datum.symbol} ${datum.path}` : datum.path,
              value: datum.value,
            }),
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

在这里插入图片描述

vue3版自定义 Tooltip items

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antfincdn/Ry8PJXni0S/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
      },
      tooltip: {
        customItems: (items) =>
          items.map((item) => {
            const path = item.data[Sunburst.SUNBURST_PATH_FIELD];
            return {
              ...item,
              name: path.length > 20 ? `${path.slice(0, 10)} ... ${path.slice(-10)}` : path,
              value: item.data.value,
            };
          }),
      },
    });
    plot.render();
  });

核心配置：

tooltip: {
  customItems: (items) =>
    items.map((item) => {
      const path = item.data[Sunburst.SUNBURST_PATH_FIELD];
      return {
        ...item,
        name: path.length > 20 ? `${path.slice(0, 10)} ... ${path.slice(-10)}` : path,
        value: item.data.value,
      };
    }),
},

效果预览：

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
          },

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },

          tooltip: {
            customItems: (items) =>
                items.map((item) => {
                  const path = item.data[Sunburst.SUNBURST_PATH_FIELD];
                  return {
                    ...item,
                    name: path.length > 20 ? `${path.slice(0, 10)} ... ${path.slice(-10)}` : path,
                    value: item.data.value,
                  };
                }),
          },
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

vue3版配置激活展示的层级数

效果预览：
在这里插入图片描述

核心代码：

import { Sunburst } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
  .then((res) => res.json())
  .then((data) => {
    const plot = new Sunburst('container', {
      data,
      innerRadius: 0.3,
      interactions: [{ type: 'element-active' }],
      hierarchyConfig: {
        field: 'sum',
        // 配置展示的层级数
        activeDepth: 1,
      },
      drilldown: {
        breadCrumb: {
          rootText: '起始',
        },
      },
      label: {
        autoRotate: false,
      },
    });
    plot.render();
  });

核心配置：

hierarchyConfig: {
  field: 'sum',
  // 配置展示的层级数
  activeDepth: 1,
},

效果预览：
在这里插入图片描述

完整代码：

<script setup>
import {onMounted} from "vue";
import {Sunburst} from "@antv/g2plot";


onMounted(async () => {

  fetch('/sunburst.json')
      .then((res) => res.json())
      .then((data) => {
        const plot = new Sunburst('container', {
          data,
          innerRadius: 0.3,
          interactions: [{type: 'element-active'}],

          hierarchyConfig: {
            field: 'sum',
            // 配置展示的层级数
            activeDepth: 3,
          },

          drilldown: {
            breadCrumb: {
              rootText: '起始',
            },
          },

          pattern: {
            type: 'line',
          }
        });
        plot.render();
      });
})

</script>

<template>
  <div id="container"></div>
</template>

总结

本教程主要讲解了vue3+g2plot如何绘制旭日图，并给出了多个实战案例，完整代码如下。

在这里插入图片描述

打赏20元可以获取完整代码。

本教程还配套了完整的视频教程。
在这里插入图片描述

人生苦短，我用Python，我是您身边的Python私教~

Python私教
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vite+vue3+ts 手把手教你创建一个vue3项目
weixin_59916662的博客
10-17 6万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+antd+g2plot快速入门
Python私教
07-12 1133
选择vue和JavaScript。
vue3使用g2plot图表
weixin_45767637的博客
07-24 673
【代码】vue3使用g2plot图表。
vue3+ts使用g2
m0_45236510的博客
01-21 3290
安装g2 npm install @antv/g2plot --save 引入并使用 在需要使用的页面引入g2，记住要在onMounted中使用哦，不然节点还没渲染出来，没有容器。 下面提供一个例子，引入折线图： <div class="pr-3 pl-3"> <p>近一年收益情况：</p> <div class="d-flex m-btn-wrapper pt-2"> <button class="w-50 btn ac
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
热门推荐
编程知识分享，主打前端
07-18 6万+
大家好，我是yma16，本文分享利用inscode搭建vue3(ts)+antd前端模板。认识vite_vue3 初始化项目到打包。
vue3中如何使用G2Plot
weixin_52772897的博客
08-12 1828
vue3中如何使用G2Plot。
vue3 G2Plot图表记录 Mix多图层图表
2301_76513773的博客
03-14 379
在项目中碰到的需求，多个图表在同一个坐标系中，个别日期需要特别标记，需要用三角形进行标记。这次拿到的数据，每张图的X轴完全一致，没有做额外处理。Y轴数据量级有差距，需要手动处理。从接口拿回数据后，算出4张图同属的最大Y值和最小Y值，对图表进行设置。，才能保证拿到数据后每个图的X轴和Y轴对齐。】来解决，引入的图层类型有【面积图。个人觉得需要用到【多图层图表。里的每个对象代表图层。
关于前端数据库可视化库的选择，vue3+antd+g2plot录课计划
Python私教
07-10 419
现在：g2plot https://g2plot.antv.antgroup.com/manual/introduction。后面按照上面的顺序录制课程，穿插一些实战案例。
基于Vue+ElementUI+Echarts+G2Plot的大屏设计器，代码完全开源
萌级小菜鸟的博客
08-02 797
🔥DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏设计、预览、资源管理、组件管理等能力，支持JSON、MySQL、Oracle、PostgreSQL、HTTP、JavaScript、Groovy等数据集接入，使用简单，完全免费，代码开源。
【Vue3+ts+OL+Plot】地图绘制多边形、还原多边形等
Emma_Hui的博客
07-04 2127
整理一下vue3+ts+openlayer+plot实现多边形绘制的功能代码
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
Vue3+TS图片裁切组件
08-02
Vue3+TS图片裁切组件，在main.ts中全局引入 import ImageCrop from "@/components/image-crop/" const app = createApp(App) app.use(ImageCrop); app.mount('#app ') 在对应的页面使用 裁切比例，不用此参数自由...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 242
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 983
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 929
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 521
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
vue2 使用G2Plot
10-19
Vue2可以使用G2Plot进行数据可视化。G2Plot是一个基于G2的可视化库，它提供了多种图表类型，包括柱状图、折线图、饼图等等。使用G2Plot可以方便地实现数据可视化，同时也可以自定义图表样式和交互效果。在Vue2中使用G2Plot需要先安装G2Plot和G2，然后在Vue组件中引入相关的模块即可。下面是一个使用G2Plot绘制饼图的示例代码： ``` <template> <div id="pie"></div> </template> <script> import { defineComponent } from 'vue'; import { Pie } from '@antv/g2plot'; export default defineComponent({ mounted() { const pieData = [ { type: '分类一', value: 27 }, { type: '分类二', value: 25 }, { type: '分类三', value: 18 }, { type: '分类四', value: 15 }, { type: '分类五', value: 10 }, { type: '其他', value: 5 } ]; const piePlot = new Pie('pie', { appendPadding: 10, data: pieData, angleField: 'value', colorField: 'type', radius: 1, innerRadius: 0, label: { type: 'inner', offset: '-30%', content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, style: { fontSize: 14, textAlign: 'center' } }, interactions: [{ type: 'element-active' }] }); piePlot.render(); } }); </script> ``` 在这个示例中，我们使用了G2Plot的Pie模块来绘制饼图。首先定义了一个id为pie的div元素作为图表容器，然后在mounted钩子函数中创建了一个Pie实例，并传入了相关的配置项和数据源。最后调用render方法将图表渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Python私教

创业不易，请打赏支持我一点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值