WindProfile
1. 使用方式
import { WindProfileSvg, demoData } from 'WindProfileSvg'
const options = {
overlay: true,
tooltip: { show: true },
styleConfig:
{
backgroundColor: '#fff',
color: '#000',
tooltip: {
fontSize: 14,
color: 'orange',
background: 'rgba(0, 0, 0, 0.8)'
}
}
};
const boxModel = { width: 1200, height: 600, margin: {
top: 30,
left: 60,
bottom: 30,
right: 80
} };
const windProfileSvg = new WindProfileSvg(demoData, options, boxModel);
document.querySelector('#app').append(windProfileSvg.containerElement);
2. 数据结构 data
[{
"station": "xxxx",
"stationId": "YW0001",
"time": "20210520175420",
"gv": "0.00",
"gd": "78.77",
"gt": "0.00",
"gh": "0.00",
"metricList": [
{
"hei": "0",
"vh": "0.00",
"dir": "0.00",
"vv": "0.00",
"cn2": "0.00e+00",
"chop": "0.0137"
},
{
"hei": "100",
"vh": "1.37",
"dir": "9.63",
"vv": "0.15",
"cn2": "4.84e-12",
"chop": "0.0109"
},
...
{
"hei": "5300",
"vh": "0.50",
"dir": "122.47",
"vv": "-4.76",
"cn2": "4.86e-09",
"chop": "0.0000"
}
],
"dateFormat": "YYYYMMDDHHmmss",
"groundTime": "2021-05-20 17:54:20"
}]
3. 配置内容
| 参数名 | 类型 | 默认值 | 描述 | 例子 |
|---|
| overlay | boolean | false | 是否叠加cn2、风切变 | -- |
| overlayType | number | 11 | 叠加产品的类型 （0 风羽图，1 垂直气流， 2 CN2, 11 风切变） | -- |
| windValueFunction | function | undefined | 回调函数映射风羽图风矢图Path路径对应索引 | (item)=> { return +item.vh | 0; } |
| windValueFunction | function | undefined | 回调函数映射cn2、风切变色卡对应索引 | (item)=> { return +item.cn2 * 1e10 | 0;} |
| altitudeListLabel | string | metricList | 对应数据中metricList字段，可根据自定义数据结构修改 | -- |
| altitudeLabel | string | hei | 对应数据中metricList数组内hei字段，可根据自定义数据结构修改 | -- |
| timeStampLabel | string | timeStamp | 对应数据中timeStamp字段，可根据自定义数据结构修改 | -- |
| directionLabel | string | dir | 对应数据中metricList数组内dir字段，可根据自定义数据结构修改 | -- |
| tooltip.show | boolean | false | 是否显示tooltip | -- |
| windColors | Array | '#00ff00', '#00ff00', '#00ff00', '#00ff00','#0000ff', '#0000ff', '#0000ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff00ff', '#ff0000', '#ff0000', '#ff0000', '#ff0000' | 风羽图、风矢图色卡 | -- |
| rectColors | Array | '#FFF', '#C7FFC7', '#94FF93', '#5DFF5D', '#26FF26', '#0CF219', '#43BB86', '#7A84F4', '#9780E7', '#B180CD', '#CD80B1', '#E78097', '#FF8080' | 叠加图色卡 | -- |
| windPaths | Array | svg path2D 数组 | 风羽路径 | -- |
| styleConfig | Object | -- | styleConfig | -- |
styleConfig
| 参数名 | 默认值 | 描述 |
|---|
| backgroundColor | #0b1f21 | 画布背景颜色 |
| fontSize | 12 | 全局字号 |
| color | white | 全局字体颜色 |
| tooltip.fontSize | 12 | tooltip字号 |
| tooltip.color | white | tooltip字体颜色 |
| tooltip.background | rgba(0, 0, 0, 0.8) | tooltip背景颜色 |
4. boxModel 盒子模型
| 参数名 | 默认值 | 描述 |
|---|
| width | 1200 | 盒子宽度 |
| height | 600 | 盒子高度 |
| margin.top | 30 | 盒子marginTop |
| margin.right | 80 | 盒子marginRight |
| margin.bottom | 30 | 盒子marginBottom |
| margin.left | 60 | 盒子marginLeft |