漏斗图转化层的样式如何修改？-灵析社区
东三环在漏斗图中转化层用于描述不同阶段或步骤之间的转化过程。 漏斗图的转化层的背景颜色通常默认为单一颜色，如何修改漏斗图转化层的背景颜色，以提高可视化的效果和可读性？
颜如玉你信不信解决方案 Solution
VChart的漏斗图已经提供了对应的功能，允许用户在"transform"配置中设置转化层的图元样式。
若要改变漏斗图转化层的背景颜色，可以通过配置"transform.style.fill" 修改转化层的背景色。
代码示例 Code Example
import { useEffect, useRef } from "react";
import VChart from "@visactor/vchart";
export const Chart = () => {
const containerRef = useRef(null);
useEffect(() => {
const spec = {
type: "funnel",
maxSize: "75%",
minSize: "10%",
isTransform: true,
shape: "rect",
transform: {
style: {
fill: "#44b15920",
lineWidth: 4,
stroke: "white",
},
},
label: {
visible: true,
},
outerLabel: {
visible: true,
position: "right",
style: {
text: (datum) => {
return `${datum.percent * 100}%`;
},
},
},
transformLabel: {
visible: true,
style: {
fill: "#000000",
},
},
data: [
{
name: "funnel",
values: [
{
value: 100,
name: "Resume Screening",
percent: 1,
},
{
value: 80,
name: "Resume Evaluation",
percent: 0.8,
},
{
value: 50,
name: "Evaluation Passed",
percent: 0.5,
},
{
value: 30,
name: "Interview",
percent: 0.3,
},
{
value: 10,
name: "Final Pass",
percent: 0.1,
},
],
},
],
categoryField: "name",
valueField: "value",
};
const vchart = new VChart(spec, {
dom: containerRef.current,
});
vchart.renderAsync();
return () => vchart.release();
}, []);
return (
);
};
结果展示 Results
https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241216/66bbcc710d4bd090cf721ed81d951f7f.png
在线示例："https://codesandbox.io/s/funnel-chart-transform-c7s9fk?file=/..." (https://link.segmentfault.com/?enc=%2B5wv35CYc%2BeKhHUTzFJ%2BcQ%3D%3D.fNb05tHwDT7kc4BufpD5mIDrobijW7Kb9d9iRYjn4qk0%2FI14lzI7EOUFQv3prxnt27LaEz2rIV465FugEZKGukpEPQLDAtQxCZoaNMqkRNw%3D)
相关文档
"VChart
Github" (https://link.segmentfault.com/?enc=MpIEAVXcIvy7i5Gl2V325w%3D%3D.HoNAO3LoV%2FcLRBR%2FZaUyQUsbrV1Tb9edRvx2Zrs36vXesYJ5hC0QF9dW738DebEA)
"漏斗图转化层
示例" (https://link.segmentfault.com/?enc=x0CC6jmTwfCZn%2BaYcbyBBA%3D%3D.9VdSfrJxWywPtbCGcFar0djiuYguxlgpTQBsLXbi%2BckYYuPTxwO9zOMpUZ2VTakAt3wdNfH1eT%2Biu%2Fpgc9gEJ7Q8SXPptQWTmCVYtUjk2Yg%3D)
"漏斗图配置项
文档" (https://link.segmentfault.com/?enc=Fxf82zDBiv9HwN%2FGMY2qdQ%3D%3D.9xh%2FPztdXvghIlsuq222mZswcOypquUQRw3Wl%2FYnINwZnPuOzQnT2e9Gv9T2nF%2B777I4WDCysUN5slQMP1KHPw%3D%3D)