TIP
建议使用飞线图增强版。
设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。 （React版 (opens new window)）
点击复制 # 基本示例 点击以展示/隐藏config数据 export default { centerPoint: [0.48, 0.35], points: [[0.52, 0.23],[0.43, 0.29],[0.59, 0.35],[0.53, 0.47],[0.45, 0.54],[0.36, 0.38],[0.62, 0.55],[0.56, 0.56],[0.37, 0.66],[0.55, 0.81],[0.55, 0.67],[0.37, 0.29],[0.20, 0.36],[0.76, 0.41],[0.59, 0.18],[0.68, 0.17],[0.59, 0.10] ], bgImgUrl: '/img/flylineChart/map.jpg'} # 附带图标 点击以展示/隐藏config数据 export default { centerPoint: [0.48, 0.35], points: [[0.52, 0.23],[0.43, 0.29],[0.59, 0.35],[0.53, 0.47],[0.45, 0.54],[0.36, 0.38],[0.62, 0.55],[0.56, 0.56],[0.37, 0.66],[0.55, 0.81],[0.55, 0.67],[0.37, 0.29],[0.20, 0.36],[0.76, 0.41],[0.59, 0.18],[0.68, 0.17],[0.59, 0.10] ], bgImgUrl: '/img/flylineChart/map.jpg', centerPointImg: {url: '/img/flylineChart/mapCenterPoint.png' }, pointsImg: {url: '/img/flylineChart/mapPoint.png' }} # 附带文本 点击以展示/隐藏config数据 export default { centerPoint: [0.48, 0.35], points: [{ position: [0.52, 0.235], text: '新乡'},{ position: [0.43, 0.29], text: '焦作'},{ position: [0.59, 0.35], text: '开封'},{ position: [0.53, 0.47], text: '许昌'},{ position: [0.45, 0.54], text: '平顶山'},{ position: [0.36, 0.38], text: '洛阳'},{ position: [0.62, 0.55], text: '周口'},{ position: [0.56, 0.56], text: '漯河'},{ position: [0.37, 0.66], text: '南阳'},{ position: [0.55, 0.81], text: '信阳'},{ position: [0.55, 0.67], text: '驻马店'},{ position: [0.37, 0.29], text: '济源'},{ position: [0.20, 0.36], text: '三门峡'},{ position: [0.76, 0.41], text: '商丘'},{ position: [0.59, 0.18], text: '鹤壁'},{ position: [0.68, 0.17], text: '濮阳'},{ position: [0.59, 0.10], text: '安阳'} ], bgImgUrl: '/img/flylineChart/map.jpg', centerPointImg: {url: '/img/flylineChart/mapCenterPoint.png' }, pointsImg: {url: '/img/flylineChart/mapPoint.png' }} # 凹聚飞线 点击以展示/隐藏config数据 export default { centerPoint: [0.48, 0.35], points: [{ position: [0.52, 0.235], text: '新乡'},{ position: [0.43, 0.29], text: '焦作'},{ position: [0.59, 0.35], text: '开封'},{ position: [0.53, 0.47], text: '许昌'},{ position: [0.45, 0.54], text: '平顶山'},{ position: [0.36, 0.38], text: '洛阳'},{ position: [0.62, 0.55], text: '周口'},{ position: [0.56, 0.56], text: '漯河'},{ position: [0.37, 0.66], text: '南阳'},{ position: [0.55, 0.81], text: '信阳'},{ position: [0.55, 0.67], text: '驻马店'},{ position: [0.37, 0.29], text: '济源'},{ position: [0.20, 0.36], text: '三门峡'},{ position: [0.76, 0.41], text: '商丘'},{ position: [0.59, 0.18], text: '鹤壁'},{ position: [0.68, 0.17], text: '濮阳'},{ position: [0.59, 0.10], text: '安阳'} ], k: 0.5, bgImgUrl: '/img/flylineChart/map.jpg', centerPointImg: {url: '/img/flylineChart/mapCenterPoint.png' }, pointsImg: {url: '/img/flylineChart/mapPoint.png' }} # dev模式组件提供了dev模式 (本页展示的Demo均已开启)，可以帮你快速确定飞线点位置，设置组件属性dev为true即可启用dev模式：
点击复制TIP
开启dev模式后，请打开浏览器控制台，然后点击飞线图组件中你想要设置的飞线的起始点位置或中心点位置，控制台会输出该点在组件中的位置信息：
dv-flyline-chart DEV:
Click Position is [100, 100]
Relative Position is [0.10, 0.10]
组件默认使用相对坐标，应选用Relative Position，关闭相对坐标模式，则需要使用Click Position，如何开启和关闭相对坐标模式请查阅config属性。
# config属性 属性 说明 类型 可选值 默认值 centerPoint 中心点坐标 Array --- [0, 0] points 飞线起始点数据 Array[1] --- [] lineWidth 飞线宽度 Number --- 1 orbitColor 轨迹颜色 String --- [2] flylineColor 飞线颜色 String --- #ffde93 k 飞线收束程度[3] Number -1 - 1 -0.5 curvature 飞线曲率[4] Number 1 - 10 5 flylineRadius 飞线显示半径[5] Number --- 100 duration 飞线动画时长 Array --- [20, 30][6] relative 使用相对坐标[7] Boolean true|false true bgImgUrl 背景图url String --- '' text 文本配置项 Object --- text halo 光晕环配置项 Object --- halo centerPointImg 中心点图片配置 Object --- centerPointImg pointsImg 飞线点图片配置 Object --- pointsImg # config相关注释[1] 飞线起始点数据的子元素可以为数组或对象，当为数组时，即点坐标数据；当为对象时，该对象包涵点坐标位置和文本信息。两种示例如下：
// 子元素为数组points = [ // 飞线起始点的坐标 [10, 10], [100, 100]]// 子元素为对象points = [ {position: [0.33, 0.52],// 飞线图自动显示该点文本信息text: '飞线点A' }][2] 飞线的轨迹线默认颜色为rgba(103, 224, 227, .2)，如果想要隐藏轨迹线，可以设置orbitColor为transparent。
[3] k值决定了飞线的收束程度，其取值范围为-1 - 1，当为负值时飞线呈凸形聚合，为正值时飞线呈凹形聚合。
[4] curvature决定了飞线的弯曲程度，其取值范围为1 - 10，该值越小，飞线曲率越大，该值越大，飞线曲率越小。
[5] flylineRadius控制了飞线的显示区域半径，该值越大，飞线显示范围越大，飞线越长，该值越小，飞线越短。
[6] duration用于计算每一条飞线的动画时长（10 = 1s），duration[0]用于控制动画最短时长，duration[1]用于控制动画最长时长，飞线的动画时长将在此范围随机。如果想要每一条飞线的动画时长都相等可以将他们的值设为相同的。
[7] relative用于控制是否启用相对坐标模式，因为飞线图组件的宽高可能是自适应的，如按百分比计算宽高，使用相对坐标模式可使飞线点的位置同样按飞线图组件宽高的百分比计算。默认启用相对坐标模式，请根据情况，选用Dev模式下输出的点坐标信息。
# text属性 属性 说明 类型 可选值 默认值 offset 文本位置偏移 Array --- [0, 15] color 文本颜色 String --- #ffdb5c fontSize 文