musixnotmusic/wind-profile

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
windValueFunction	function	undefined	回调函数映射cn2、风切变色卡对应索引	(item)=> { return +item.cn2 * 1e10
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