UNPKG

@linkdesign/screen

Version:

屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏

82 lines (55 loc) 2.35 kB
# 高德天气 Weather ## 使用场景 大盘/屏的天气状况展示 ## 预览 ![高德天气 Weather](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580719377413-bec5b897-76f7-4a0a-ad6e-78609806a5fc.png) ## 演示 <!--before-content--> ## 基础用法 ```js import { Text, config } from '@linkdesign/screen'; const { Weather } = Text; const { _cssPrefix } = config; const header = { backgroundColor: "#1f3b6d", display: "flex", alignItem: "center", height: 56, padding: "0 24px", }; class App extends React.Component { render() { return ( <div data-theme="dark" className={`${_cssPrefix}main-body`} style={header}> <Weather params={{ key: '56a763fbaeb1992f6f00a7c4eed3cc82', city: '110101', }} /> </div> ); } } ReactDOM.render(<App />); ``` <!--after-content--> ### API | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ----------------- | ------------------------ | ---- | ------ | ------------------------------------ | ------------------------------------------------------------ | | className | 类名 | N | String | - | | | textOptions | 文本配置 | N | Array | ```{textStyle: {fontWeight: 400}}``` | | | [params](#params) | 高德天气服务请求参数配置 | Y | Object | - | [高德天气查询 api文档](https://lbs.amap.com/api/webservice/guide/api/weatherinfo) | #### params ```typescript // 高德天气服务请求参数配置 params: { key: string; // 请求服务权限标识 用户在高德地图官网申请web服务API类型KEY city: string; // 城市编码 输入城市的adcode,adcode信息可参考城市编码表 extensions?: 'base' | 'all'; // 气象类型 可选值:base/all base: 返回实况天气 all: 返回预报天气 output?: 'JSON' | 'XML'; // 返回格式 可选值:JSON,XML interval?: number; // 请求频率 单位毫秒 默认20分钟 }; ``` ## TODO List - [ ] ......