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

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

漏斗图转化层 示例

漏斗图配置项 文档