flylineChartEnhanced.md 8.2 KB
sidebarDepth: 2
飞线图增强版
配置若干飞线点后，你可以在任意两点间设置飞线，得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。
<dv-flyline-chart-enhanced :config="config" style="width:100%;height:100%;" />
基本示例
<<< @/docs/guide/codeData/flylineChartEnhanced/demo1.js
附带图标
<<< @/docs/guide/codeData/flylineChartEnhanced/demo2.js
附带文本
<<< @/docs/guide/codeData/flylineChartEnhanced/demo3.js
附带光晕
<<< @/docs/guide/codeData/flylineChartEnhanced/demo4.js
凹聚飞线
<<< @/docs/guide/codeData/flylineChartEnhanced/demo5.js
灵活配置
<<< @/docs/guide/codeData/flylineChartEnhanced/demo6.js
dev模式
组件提供了dev模式 (本页展示的Demo均已开启)，可以帮你快速确定飞线点位置，设置组件属性dev为true即可启用dev模式：
<dv-flyline-chart-enhanced :config="config" :dev="true" style="width:200px;height:100px;" />
::: tip TIP
开启dev模式后，请打开浏览器控制台，然后点击飞线图组件中你想要设置的飞线的起止点的位置，控制台会输出该点在组件中的位置信息即Point的coordinate属性：
dv-flyline-chart-enhanced DEV:
Click Position is [100, 100]
Relative Position is [0.10, 0.10]
组件默认使用相对坐标，应选用Relative Position，关闭相对坐标模式，则需要使用Click Position，如何开启和关闭相对坐标模式请查阅config属性。
:::
config属性
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
points|飞线点|Point[][1]|---|[]Point
lines|飞线|Flyline[][2]|---|[]Flyline
halo|全局光晕配置|Halo|---|halo
text|全局文本配置|Text|---|text
icon|全局图标配置|Icon|---|icon
line|全局飞线配置|Line|---|line
bgImgSrc|背景图src|String|---|''
k|飞线收束程度[3]|Number|-1 - 1|-0.5
curvature|飞线曲率[4]|Number|1 - 10|5
relative|使用相对坐标[5]|Boolean|true|false|true
Point属性
每个Point的halo、text、icon属性都会自动继承该属性的全局配置。
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
name|点名称|String|---|-
coordinate|点坐标|Number[]|---|-
halo|点光晕配置|Halo|---|halo
text|点文本配置|Text|---|text
icon|点图标配置|Icon|---|icon
Flyline属性
每个Flyline的width、color、orbitColor、duration、radius属性都会自动继承config.line下相同的属性配置。
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
source|飞线起点的点名称|String|---|-
target|飞线终点的点名称|String|---|-
width|飞线宽度|Number|---|inherit
color|飞线颜色|String|---|inherit
orbitColor|飞线轨迹颜色|String[6]|---|inherit
duration|飞线动画时长|Number[][7]|---|inherit
radius|飞线显示半径|Number[8]|---|inherit
halo属性
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
show|是否显示光晕|Boolean|---|false
duration|光晕动画时长|Number[]|---|[20, 30]
color|光晕颜色|String|---|#fb7293
radius|光晕最大半径|Number|---|120
text属性
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
show|是否显示点名称|Boolean|---|false
offset|名称位置偏移|Number[]|---|[0, 15]
color|名称颜色|String|---|#ffdb5c
fontSize|名称文字大小|Number|---|12
icon属性
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
show|是否显示点图标|Boolean|---|false
src|图标src|String|---|''
width|图标宽度|Number|---|15
height|图标高度|Number|---|15
line属性
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
width|飞线宽度|Number|---|1
color|飞线颜色|String|---|#ffde93
orbitColor|轨迹颜色|String|---|rgba(103, 224, 227, .2)
duration|飞线动画时长|Number[]|---|[20, 30]
radius|飞线显示半径|Number|---|100
相关注释
[1] 飞线图的基本点，点的完整配置参见Point属性
[2] 飞线图飞线，飞线完整配置参见Flyline属性
[3] k值决定了飞线的收束程度，其取值范围为-1 - 1，当为负值时飞线呈凸形聚合，为正值时飞线呈凹形聚合。
[4] curvature决定了飞线的弯曲程度，其取值范围为1 - 10，该值越小，飞线曲率越大，该值越大，飞线曲率越小。
[5] relative用于控制是否启用相对坐标模式，因为飞线图组件的宽高可能是自适应的，如按百分比计算宽高，使用相对坐标模式可使飞线点的位置同样按飞线图组件宽高的百分比计算。默认启用相对坐标模式，请根据情况，选用Dev模式下输出的点坐标信息。
[6] 飞线的轨迹线默认颜色为rgba(103, 224, 227, .2)，如果想要隐藏轨迹线，可以设置orbitColor为transparent。
[7] duration用于计算动画时长（10 = 1s），duration[0]用于控制动画最短时长，duration[1]用于控制动画最长时长，动画时长将在此范围随机。如果想要设置固定的动画时长可以将他们的值设为相同的。
[8] radius控制了飞线的显示区域半径，该值越大，飞线显示范围越大，飞线越长，该值越小，飞线越短。