前端 - 漏斗图转化层的样式如何修改？

Question

在漏斗图中转化层用于描述不同阶段或步骤之间的转化过程。
漏斗图的转化层的背景颜色通常默认为单一颜色，如何修改漏斗图转化层的背景颜色，以提高可视化的效果和可读性？

Answer 1

解决方案 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 (    <div      ref={containerRef}      style={{        width: 520,        height: 520,        border: "1px solid #ccc",      }}    />  );};

结果展示 Results

在线示例：https://codesandbox.io/s/funnel-chart-transform-c7s9fk?file=/...

相关文档

VChart Github

漏斗图转化层 示例

漏斗图配置项 文档