yisoft-legend

区块介绍

yisoft图例介绍 根据传入对应类型获取图例

预览图

下载

npm install --save-dev yisoft-legend

二、属性

属性	类型	默认值	说明
type	String	'block'	gradient-渐变 generally-大致色块 block-具体色块
colors	string[]	''	色阶值
levels	number[]	''	色阶等级
title	String	'图例'	图例标题
background	String	'#fff'	背景色
textColor	String	'#333'	色阶等级文字颜色

二、示例使用

const componentAll = {
  'radar':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '雷达(dbz)',
    type: 'gradient',
    colors: ['#FFFFFF','#ECE2F3','#C0A0DB','#CD3BE1','#A2056C','#990306','#D90A00','#F74D07','#EE9505','#F6E504','#55B200','#0EB501','#02F500','#017585'],
    levels: ['16','21','26','31','36','41','46','51','56','61','66','71','75'].reverse(),
  },
  'temp':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '气温(℃)',
    gap:'12px',
    type: 'gradient',
    colors: ['#DD1401','#F36901','#F1A101','#CCB804','#9BC90A','#4FCA18','#29C842','#3EC295','#56BCF5'],
    levels: ['35','30','25','20','15','10','5','0','-5'],
  },
  'ps':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '气压(hPa)',
    gap:'20px',
    type: 'gradient',
    colors: ['#DC1201','#F98001','#9AAF0E','#1CBB34','#024FCA','#2779E8','#53B3FC'],
    levels: ['1060','1040','1025','1010','995','980','960'],
  },
  'lightning':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '闪电(kA)',
    type: 'block',
    width:'25px',
    height:'300px',
    lineHeight:2.8,
    colors: ['#010101','#680100','#F60400','#CB6733','#FE9830','#FFE327','#6BBB74'],
    levels: ['78','65','52','39','26','13','0'],
  },
  'rain':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '降水(mm)',
    type: 'block',
    width:'25px',
    height:'300px',
    colors: ['#800040','#FA01FA','#0000FF','#61B8FF','#2C8B2E','#73D86E','#B8F4AA','#FFFFFF'],
    levels: ['250','100','80','50','20','15','5','0.1','0'],
  },
  'wind':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '风(m/s)',
    type: 'block',
    width:'25px',
    height:'300px',
    colors: ['#800040','#FF27FF','#FF1900','#FF5200','#FF8700','#FFBE00','#FEF100','#0011FF','#5788FA'],
    levels: ['51','32.7','28.5','24.5','20.7','17.2','13.9','10.8','8','5.5'],
  },
  'visibile':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '能见度(km)',
    type: 'block',
    width:'33px',
    height:'300px',
    colors: ['#CBEAFF','#A0DEF8','#87FC24','#FCFD03','#F5B34E','#EE5C0A','#E91A10','#9217FC','#6B2904'],
    levels: ['30','20','10','5','3','2','1','0.5','0.2','0'],
  },
  'rh':{
    textColor: '#4867A0',
    legendTitleColor: '#4867A0',
    title: '湿度(%)',
    type: 'gradient',
    width:'30px',
    colors: ['#394E79','#265A72','#3690A9','#709E4B','#AA6E3C','#AD5D3A'],
    levels: ['100','80','60','40','20','0'],
  },
  'fog':{
    colors:['#52F700', '#39A400','#1E1E1E','#FCD1A9','#FF8C00'],
    levels:['轻雾（1-10）','大雾（0.5-1）','浓雾（0.2-0.5）','强浓雾（0.05-0.2）','特强浓雾（0-0.05）'],
    type: 'generally',
    width:'33px',
  },
  'convection':{
    colors:['#FF7A7B', '#FE0104','#B20002','#FBCEA4'],
    levels:['5%','10%','30%','雷暴'],
    type: 'generally',
    width:'33px',
  },
  'freezingRain':{
    colors:['#05AAE6'],
    levels:['冻雨区'],
    type: 'generally',
    width:'33px',
  },
  "temperature":{
    title:'气温(℃)',
    colors:['#002C7A', '#175395','#1B68BC','#378ED1','#7FD5F7','#ABE6F7', '#D0F9FF','#F3FEEF','#D0FECE','#B8FF92','#F9FF96','#FEF3C3','#FECE9A','#FD9581','#FE5600','#E80001'],
    levels:['<-12','-12~-8','-8~-4','-4~0','0~4','4~8','8~12','12~16','16~20','20~24','24~28','28~32','32~35','35~37','37~40','>40'],
    type: 'generally',
    width:'30px',
    height:'200px',
    borderColor:'#000'
  }

}