y_colorbar v1.0.9

@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类定义变量

2.2.1.2 legend类定义方法

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)