安装

npm install @xintao1105/rose-pie

or

yarn add @xintao1105/rose-pie

示例代码

import RosePie from '@xintao1105/rose-pie';
import type { interProps } from '@xintao1105/rose-pie';

const ars:interProps = {
    onClick: (e) => { console.log("onClick", e) }
  }

<RosePie {...ars}/>

参数类型

interface dataProps {
  s: string | number;
  y: number;
}

interface offset {
  x: number;
  y: number;
}
/**
 * 类目 + 占比 + 真实值
 */
interface labelProps {
  /**
   * 类目
   */
  category?:
    | boolean
    | {
        /**
         * 文本样式
         */
        textStyle?: style;
      };
  /**
   * 占比值
   */
  proportion?:
    | boolean
    | {
        /**
         * 小数位数
         */
        decimalPlaces?: number;
        /**
         * 间距
         */
        spacing?: number;
        /**
         * 颜色跟随 设置为 true 时textStyle设置不生效
         */
        colorFollow?: boolean;
        /**
         * 文本样式 colorFollow = true 时不生效；
         */
        textStyle?: style;
      };
  /**
   * 真实值
   */
  trueValue?:
    | boolean
    | {
        /**
         * 后缀
         */
        suffix?:
          | boolean
          | {
              /**
               * 内容
               */
              content: string;
              /**
               * 字体大小
               */
              fontSize: number;
              /**
               * 偏移
               */
              deviation: offset;
            };
        /**
         * 间距
         */
        spacing?: number;
        /**
         * 颜色跟随 设置为 true 时textStyle设置不生效
         */
        colorFollow?: boolean;
        /**
         * 文本样式 colorFollow = true 时不生效；
         */
        textStyle?: style;
      };
}
/**
 * 数值标签
 */
interface valueLabel extends labelProps {
  /**
   * 线长 line1：第一线长；line2：第二线长
   */
  lineLength: {
    line1: number;
    line2: number;
  };
  /**
   * 布局 上下 | 水平
   */
  layout: string | "vertical" | "horizontal";
  /**
   * 偏移
   */
  deviation: offset;
}
/**
 * 图例布局
 */
interface legendLayout {
  /**
   * 列数
   * @default layoutNumberColumns = 1
   */
  layoutNumberColumns?: number;
  /**
   * 间距
   * @default layoutSpacing = {row: 25,column: 10}
   */
  layoutSpacing?: {
    row: number;
    column: number;
  };
  /**
   * 位置
   * @default legendPosition = 5
   */
  legendPosition?: number;
  /**
   * 偏移
   * @default layoutDeviation = {x:-10,y:0}
   */
  layoutDeviation?: offset;
}
/**
 * 图例
 */
export interface legend extends labelProps, legendLayout {
  /**
   * 展示顺序 "数据返回顺序" | "从大到小" | "从小到大"
   * @default order = "asc"
   */
  order?: "" | "desc" | "asc";
  /**
   * 图形类型
   * @default legendType = "legendTypePreset"
   */
  legendType?: "legendTypePreset" | "legendTypeCustom";
  /**
   * 图例Icon 当legendType = "legendTypeCustom" 时生效；
   * @default legendIcon = ""
   */
  legendIcon?: string;
  /**
   * 图例Icon尺寸 当legendType = "legendTypeCustom" 时生效；
   * @default legendIconSize = {width:20,height:20}
   */
  legendIconSize?: {
    width: number;
    height: number;
  };
  /**
   * 图例图形尺寸 当legendType = "legendTypePreset" 时生效；
   * @default legendGraphicalSize = {width:10,height:10}
   */
  legendGraphicalSize?: {
    width: number;
    height: number;
  };
  /**
   * 图形圆角
   * @default graphicFillet = 0
   */
  graphicFillet?: number;
  /**
   * 间距
   * @default legendSpacing = 5
   */
  legendSpacing?: number;
}
/**
 * 系列
 */
export interface dataSeriesProps {
  /**
   * 映射
   */
  seriesMapping?: {
    fieldName: string | number;
    displayName: string | number;
  };
  /**
   * 颜色
   */
  seriesColor?: {
    startVal: string;
    endVal: string;
    direction: number;
  };
  /**
   * 图例Icon
   */
  seriesLegendIcon?: string;
}

export interface style {
  fontFamily?: string;
  fontSize?: number;
  color?: string;
  fontWeight?: string | number;
  letterSpacing?: number;
  lineHeight?: number;
  fontStyle?: string;
}

interface margin {
  top: number;
  bottom: number;
  left: number;
  right: number;
}
/**
 * 提示框类型
 */
export interface promptBoxTabsProps extends labelProps {
  /**
   * 悬停触发
   * @default hoverTrigger = true
   */
  hoverTrigger?: boolean;
  /**
   * 边距
   * @default margin = { "top": 15,"bottom": 15, "left": 10,"right": 10 }
   */
  margin?: margin;
  /**
   * 图形类型
   * @type {string}
   * @default tipType = "Preset"
   */
  tipType?: "Preset" | "Custom";
  /**
   * 图例Icon 当tipType = "Custom" 时生效;
   * @default tipIcon = ""
   */
  tipIcon?: string;
  /**
   * 图标尺寸 当tipType = "Custom" 时生效;
   * @default tipIconSize = {width:20,height:20}
   */
  tipIconSize?: {
    width: number;
    height: number;
  };
  /**
   * 图标尺寸 当tipType = "Preset" 时生效;
   * @default tipGraphicalSize = {width:10,height:10}
   */
  tipGraphicalSize?: {
    width: number;
    height: number;
  };
  /**
   * 图形圆角
   * @default tipgraphicFillet = 0
   */
  tipgraphicFillet?: number;
  /**
   * 间距
   * @default tipSpacing = 5
   */
  tipSpacing?: number;
  /**
   * 指示器颜色
   * @default bgColor = "rgba(45,51,61,0.8)"
   */
  bgColor?: string;
}

export interface interProps {
  /**
   * 基础配置
   */
  base?: {
    width: number;
    height: number;
  };
  /**
   * 边距
   * @default margin = { "top": 10,"bottom": 0,"left": 0,"right": 115 }
   */
  margin?: margin;
  /**
   * 数值标签
   * @default valueLabel = false | {}
   */
  valueLabel?: boolean | valueLabel;
  /**
   * 图例
   * @default legend = true | {}
   */
  legend?: boolean | legend;
  /**
   * 半径 取值范围 0-1
   * @default innerRadius = 0.42
   */
  innerRadius?: number;
  /**
   * 外半径 取值范围 0-1
   * @default outerRadius = 1
   */
  outerRadius?: number;
  /**
   * 圆角
   * @default fillet = {radius:2}
   */
  fillet?: {
    radius: number;
  };
  /**
   * 间距 间隔角度0~20度
   * @default graphicalSpacing = 4
   */
  graphicalSpacing?: number;
  /**
   * 展示顺序 "数据返回顺序" | "从大到小" | "从小到大"
   * @default seriesOrder = "asc"
   */
  seriesOrder?: "" | "desc" | "asc";
  dataSeries?: dataSeriesProps[];
  promptBoxTabs?: promptBoxTabsProps;
  /**
   * 数据
   */
  data?: dataProps[];
  /**
   * 点击回调
   */
  readonly onClick?: (e: any) => void;
}