漏斗图转化层的样式如何修改？-灵析社区

## 解决方案 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://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)