天气插件和antv图表组件库的使用

目录

天气插件

 antv组件库

特性

数据映射

data 

xField

yField

图形样式

point

state

图表组件

label

tooltip

图表交互

添加交互

---

天气插件

 

网站:天气预报代码_天气预报插件_免费天气预报代码(插件)调用——天气网 (tianqi.com)

挑选想要的样式，点击

 首次使用会跳出这个界面

此处有个二维码，截图会违规显示不出来 

我们在使用域名和网站领域中输入百度网址即可

https://www.baidu.com

邮箱使用自己的，扫码关注微信公众号，回复天气插件获取密码，将密码输入调用密码中，提交。

这样我们就可以使用相应的天气组件代码了。

 效果图:

 antv组件库

网址:简介 | G2Plot (antgroup.com)

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。

特性

• 开箱即用、默认好用的高质量统计图表

• 提炼自企业级产品的视觉语言和设计规范

• 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题

• 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性

我们既可以直接引用在线资源，也可以将其下载到本地使用

这里举例引入在线资源

我们通过打印G2Plot可以查看图表组件库的信息：

其中有很多方法，我们要去创建某个图表，必须使用这些构造函数去创建。

数据映射

data 

设置图表数据源。数据源为对象集合。

xField

图形在 x 方向对应的数据字段名，一般是横向的坐标轴对应的字段。

yField

图形在 y 方向对应的数据字段名，一般是纵向的坐标轴对应的字段。

图形样式

point

折线数据点图形样式。

细分配置	类型	功能描述
color	string | string[] | Function	数据点颜色，也可以支持回调的方式设置，回调参数为 color: (datum: object) => string
shape	string | Function	数据点形状，也可以支持回调的方式设置，回调参数为 shape: (datum: object) => string
size	number | Function	数据点大小，也可以支持回调的方式设置，回调参数为 size: (datum: object) => number
style	object | Function	数据点样式，也可以支持回调的方式设置，回调参数为 style: (datum: object) => object
state	object	数据点状态样式，设置对应状态的样式。详细参考 state

state

设置对应状态的样式，开放的状态有：'default' | 'active' | 'inactive' | 'selected' 四种。

图表组件

label

文本标签的配置项，null 表示不展示。

属性名	类型	介绍
type	string	当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner
offset	number	label 的偏移量
offsetX	number	label 相对于数据点在 X 方向的偏移距离
offsetY	number	label 相对于数据点在 Y 方向的偏移距离
content	string | IGroup | IShape | GeometryLabelContentCallback	展示的文本内容，如果不声明则按照参与映射的第一字段的值进行显示
style	ShapeAttrs	label 文本图形属性样式
autoRotate	string	是否自动旋转，默认 true
rotate	number	文本旋转角度，弧度制。顺时针旋转。
labelLine	null | boolean | LabelLineCfg	用于设置文本连接线的样式属性，null 表示不展示。
labelEmit	boolean	只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭
layout	'overlap' | 'fixedOverlap' | 'limitInShape'	文本布局类型，支持多种布局函数组合使用。
position	'top' | 'bottom' | 'middle' | 'left' | 'right'	指定当前 label 与当前图形的相对位置 ( 注意：只对 geometry 为 interval 的柱条形图生效)
animate	boolean | AnimateOption	动画配置。
formatter	Function	格式化函数
autoHide	boolean	是否自动隐藏，默认 false

tooltip

指定 tooltip 中显示的字段，默认不同图表有不同的默认字段列表。

图表交互

添加交互

// 开启「鼠标移入图表元素（柱状图的柱子、点图的点等）时触发 active」的交互
interactions: [{ type: 'element-active' }]

// 开启多个交互
interactions: [{ type: 'element-active' }, { type: 'brush' }]

效果：