概述
旭日图(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私教~
领取专属 10元无门槛券
私享最新 技术干货