# 飞线图增强版
配置若干飞线点后,你可以在任意两点间设置飞线,得到动态飞线图,组件提供的dev模式可以帮你快速配置飞线点位置。 (React版 (opens new window))
<dv-flyline-chart-enhanced :config="config" style="width:100%;height:100%;" />
# 基本示例
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35]
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66]
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '许昌',
target: '郑州'
},
{
source: '平顶山',
target: '郑州'
},
{
source: '洛阳',
target: '郑州'
},
{
source: '周口',
target: '郑州'
},
{
source: '漯河',
target: '郑州'
},
{
source: '南阳',
target: '郑州'
},
{
source: '信阳',
target: '郑州'
},
{
source: '驻马店',
target: '郑州'
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
}
],
bgImgSrc: '/img/flylineChart/map.jpg'
}
# 附带图标
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35],
icon: {
src: '/img/flylineChart/mapCenterPoint.png',
width: 30,
height: 30
}
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66]
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '许昌',
target: '郑州'
},
{
source: '平顶山',
target: '郑州'
},
{
source: '洛阳',
target: '郑州'
},
{
source: '周口',
target: '郑州'
},
{
source: '漯河',
target: '郑州'
},
{
source: '南阳',
target: '郑州'
},
{
source: '信阳',
target: '郑州'
},
{
source: '驻马店',
target: '郑州'
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
}
],
icon: {
show: true,
src: '/img/flylineChart/mapPoint.png'
},
bgImgSrc: '/img/flylineChart/map.jpg'
}
# 附带文本
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35],
icon: {
src: '/img/flylineChart/mapCenterPoint.png',
width: 30,
height: 30
},
text: {
color: '#fb7293'
}
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66]
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '许昌',
target: '郑州'
},
{
source: '平顶山',
target: '郑州'
},
{
source: '洛阳',
target: '郑州'
},
{
source: '周口',
target: '郑州'
},
{
source: '漯河',
target: '郑州'
},
{
source: '南阳',
target: '郑州'
},
{
source: '信阳',
target: '郑州'
},
{
source: '驻马店',
target: '郑州'
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
}
],
icon: {
show: true,
src: '/img/flylineChart/mapPoint.png'
},
text: {
show: true,
},
bgImgSrc: '/img/flylineChart/map.jpg'
}
# 附带光晕
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35],
halo: {
show: true,
},
icon: {
src: '/img/flylineChart/mapCenterPoint.png',
width: 30,
height: 30
},
text: {
show: false
}
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66]
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '许昌',
target: '郑州'
},
{
source: '平顶山',
target: '郑州'
},
{
source: '洛阳',
target: '郑州'
},
{
source: '周口',
target: '郑州'
},
{
source: '漯河',
target: '郑州'
},
{
source: '南阳',
target: '郑州'
},
{
source: '信阳',
target: '郑州'
},
{
source: '驻马店',
target: '郑州'
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
}
],
icon: {
show: true,
src: '/img/flylineChart/mapPoint.png'
},
text: {
show: true,
},
bgImgSrc: '/img/flylineChart/map.jpg'
}
# 凹聚飞线
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35],
halo: {
show: true,
},
icon: {
src: '/img/flylineChart/mapCenterPoint.png',
width: 30,
height: 30
},
text: {
show: false
}
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66]
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '许昌',
target: '郑州'
},
{
source: '平顶山',
target: '郑州'
},
{
source: '洛阳',
target: '郑州'
},
{
source: '周口',
target: '郑州'
},
{
source: '漯河',
target: '郑州'
},
{
source: '南阳',
target: '郑州'
},
{
source: '信阳',
target: '郑州'
},
{
source: '驻马店',
target: '郑州'
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
}
],
icon: {
show: true,
src: '/img/flylineChart/mapPoint.png'
},
text: {
show: true,
},
k: 0.5,
bgImgSrc: '/img/flylineChart/map.jpg'
}
# 灵活配置
export default {
points: [
{
name: '郑州',
coordinate: [0.48, 0.35],
halo: {
show: true,
},
icon: {
src: '/img/flylineChart/mapCenterPoint.png',
width: 30,
height: 30
},
text: {
show: false
}
},
{
name: '新乡',
coordinate: [0.52, 0.23]
},
{
name: '焦作',
coordinate: [0.43, 0.29]
},
{
name: '开封',
coordinate: [0.59, 0.35]
},
{
name: '许昌',
coordinate: [0.53, 0.47]
},
{
name: '平顶山',
coordinate: [0.45, 0.54]
},
{
name: '洛阳',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55],
halo: {
show: true,
color: '#8378ea'
}
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南阳',
coordinate: [0.37, 0.66],
halo: {
show: true,
color: '#37a2da'
}
},
{
name: '信阳',
coordinate: [0.55, 0.81]
},
{
name: '驻马店',
coordinate: [0.55, 0.67]
},
{
name: '济源',
coordinate: [0.37, 0.29]
},
{
name: '三门峡',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鹤壁',
coordinate: [0.59, 0.18]
},
{
name: '濮阳',
coordinate: [0.68, 0.17]
},
{
name: '安阳',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新乡',
target: '郑州'
},
{
source: '焦作',
target: '郑州'
},
{
source: '开封',
target: '郑州'
},
{
source: '周口',
target: '郑州',
color: '#fb7293',
width: 2
},
{
source: '南阳',
target: '郑州',
color: '#fb7293',
width: 2
},
{
source: '济源',
target: '郑州'
},
{
source: '三门峡',
target: '郑州'
},
{
source: '商丘',
target: '郑州'
},
{
source: '鹤壁',
target: '郑州'
},
{
source: '濮阳',
target: '郑州'
},
{
source: '安阳',
target: '郑州'
},
{
source: '许昌',
target: '南阳',
color: '#37a2da'
},
{
source: '平顶山',
target: '南阳',
color: '#37a2da'
},
{
source: '洛阳',
target: '南阳',
color: '#37a2da'
},
{
source: '驻马店',
target: '周口',
color: '#8378ea'
},
{
source: '信阳',
target: '周口',
color: '#8378ea'
},
{
source: '漯河',
target: '周口',
color: '#8378ea'
}
],
icon: {
show: true,
src: '/img/flylineChart/mapPoint.png'
},
text: {
show: true,
},
k: 0.5,
bgImgSrc: '/img/flylineChart/map.jpg'
}
# dev模式
组件提供了dev模式 (本页展示的Demo均已开启),可以帮你快速确定飞线点位置,设置组件属性dev
为true
即可启用dev模式:
<dv-flyline-chart-enhanced :config="config" :dev="true" style="width:200px;height:100px;" />
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
控制了飞线的显示区域半径,该值越大,飞线显示范围越大,飞线越长,该值越小,飞线越短。