vue3+g2plot之旭日图

概述

旭日图（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) => {