@TOC

1 包含功能

• 渐变和非渐变；
• 可拖动和静态；

2 代码说明

2.1 接口

2.1.1 Data

图例参数： : data : 图例的颜色和值，类型为 LabelValue : options : 图例的可配置参数，类型为Option : styleOptions : 图例的可配置样式 : onComplete : 回调函数

export interface Data {
  data: Array<LabelValue>;
  options: Option;
  styleOptions: {
    backgroundColor: string;
    color: string;
    fontSize: string;
  },
  onComplete: (limitInfo: object) => void
}

2.1.2 LabelValue

data类型： : color : 图例颜色 : value : 图例颜色对应的数值 : icon : 如果是卡片类型的图例，有可能需要icon

export interface LabelValue {
  color: string;
  value: Array<number> | string | number;
  icon?: string;
}

2.1.3 Option

options类型： : label : 图例名称 : unit : 图例单位 : type : 图例类型，卡片类型和轴向 : iconType : 如果是卡片类型的图例， icon的类型 : id : 图例id标识 : i'sGradient: 是否渐变，0：渐变； 1不渐变 : isToggle : 是否可拖动 : borderType: 直角和圆角 0： 圆角， 1 直角

export interface Option {
  label: string;
  unit?: string;
  type: string;
  iconType?: string;
  id: number;
  isGradient: number;
  isToggle: Boolean;
  borderType: number
}

2.1.4 LabelValueDis

拖动时候用来记录每个legend的移动距离： : id : 图例id, : startLeft : 左边按钮移动距离 : endLeft : 右边按钮移动距离

export interface LabelValueDis {
  id: number;
  startLeft: number;
  endLeft: number;
}

2.2类

2.2.1 Legend

2.2.1.1 legend类定义变量

| 变量| 描述| 类型| |:-----------:|--------:|-----:|----------:| |allLegendData|所有legend数据|Array| |curData|当前legend数据|Data| |itemWidth |图例每一格宽度|number| |disList |所有legend移动距离|LabelValueDis| |legendsMap|内置legend数据|map| |legendLabels| 内置legend键值|Array|

2.2.1.2 legend类定义方法

|方法| 描述| 传参1|传参2| |:----:|:--------:|:-----:|:----------:| |addLegend|添加图例|legendId|curLegend| ||添加图例|containDom| |show |根据图例类型调用对应的方法显示| |axisLegend |轴向图例调用| |iconLegend |卡片类型图例调用| |handleSliderDistance|保存每个图例的移动距离|id|legendWidth| |bindEvent | 拖动事件|curLimitNode|flagNode（移动标识，start or end）| | | 拖动事件|id|border(当前图例border)| |deleteLegend |删除图例|id| |clearAll |清空图例|

3 项目中使用

使用步骤 : npm 安装 : new legend实例 : 定义图例的参数 : 调用addLegend方法

let legend1 = document.getElementById("legendone");
let legend2 = document.getElementById("legendtwo");
let legend3 = document.getElementById("legendthree");

let legend = new Legend();
legend.addLegend(legend1 as HTMLDivElement, "",{
...wendu, onComplete: function () {
console.log(arguments);
}
});
legend.addLegend(legend2 as HTMLDivElement,"",wenduTwo)
legend.addLegend(legend3 as HTMLDivElement, "",wenduThree)