vue3+g2plot之旭日图

概述

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

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

基础旭日图

效果预览：

核心代码：

自定义 hierarchy field

效果预览：

核心代码：

设置标签布局

效果预览：

核心代码：

自定义颜色通道

效果预览：

核心代码：

自定义旭日图颜色

效果预览：

核心代码：

自定义旭日图样式

效果预览：

核心代码：

带贴图的旭日图

效果预览：

核心代码：

指定父节点权重

效果预览：

核心代码：

自定义 Tooltip items

效果预览：

核心代码：

配置激活展示的层级数

效果预览：

核心代码：

整合vue3

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

basic：基础旭日图

hierachy：自定义hierachy字段

label：设置标签布局

color：设置颜色通道

style：设置旭日图样式

pattern：带贴图的旭日图

weight：指定父节点权重

tooltip：自定义提示

level：设置激活展示层级

vue3版基础旭日图

核心代码：

效果预览：

核心代码：

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();

});

})

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

vue3版自定义 hierarchy field

核心代码：

核心属性：

hierarchyConfig: {

field: 'sum',

}

效果预览：

完整代码：

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();

});

})

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

vue3设置标签布局

核心代码：

核心配置：

label: {

// label layout: limit label in shape, which means the labels out of shape will be hide

layout: [{ type: 'limit-in-shape' }],

}

效果预览：

完整代码：

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();

});

})

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

vue3版自定义颜色通道

核心代码：

核心配置：

colorField: 'label',

效果预览：

完整代码：

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();

});

})

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

vue3版自定义旭日图颜色

核心代码：

核心配置：

效果预览：

完整代码：

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();

});

})

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

vue3版自定义旭日图样式

核心代码：

效果预览：

完整代码：

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();

});

})

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

vue3版带贴图的旭日图

核心代码：

核心配置：

pattern: {

type: 'line',

},

效果预览：

完整代码：

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();

});

})

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

vue3版指定父节点权重

核心代码：

效果预览：

完整代码：

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();

});

})

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

在这里插入图片描述vue3版自定义 Tooltip items

核心代码：

核心配置：

效果预览：

完整代码：

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();

});

})

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

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

效果预览：

核心代码：

核心配置：

hierarchyConfig: {

field: 'sum',

// 配置展示的层级数

activeDepth: 1,

},

效果预览：

完整代码：

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();

});

})

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

总结

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

在这里插入图片描述

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

本教程还配套了完整的视频教程。

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