utils-echart/dist/types/utils-echarts/create-echarts/funnel.ts

Echart component

import { getSingleDataWithName, val, adaptiveS } from "../methods/methods";
import { defaultSingleDataWithName } from "../assets/common";

/** 漏斗 */
export class Funnel {
  /**
   * 获取漏斗数据
   * @param name 名称
   * @param range 数据范围
   * @returns arr
   */
  static getFunnelData(name: string[], range?: number[]) {
    return getSingleDataWithName(name, range);
  }
  /**
   * 漏斗0
   * @param data 数据
   * @param colorArr 颜色组
   * @returns option
   */
  static funnel0(data?: any, colorArr?: any[]) {
    const d = data ? data : defaultSingleDataWithName;
    const color_arr = colorArr ? colorArr : val("colorData");
    const option = {
      color: color_arr,
      backgroundColor: val("backgroundColor"),
      grid: val("grid"),
      tooltip: {
        trigger: "item",
      },
      legend: val("legend"),
      series: [
        {
          name: "Funnel",
          type: "funnel",
          left: "10%",
          top: 60,
          bottom: 60,
          width: "80%",
          min: 0,
          max: 100,
          minSize: "0%",
          maxSize: "100%",
          sort: "descending",
          gap: 2,
          label: {
            show: true,
            position: "inside",
          },
          labelLine: {
            length: adaptiveS(10),
            lineStyle: {
              width: adaptiveS(1),
              type: "solid",
            },
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: adaptiveS(1),
          },
          emphasis: {
            label: {
              fontSize: adaptiveS(20),
            },
          },
          data: d,
        },
      ],
    };
    return option;
  }
}