# 飞线图

TIP

设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev 模式可以帮你快速配置飞线点位置。（Vue版）

<FlylineChart config={config} style={{width: '100%', height: '100%'}} />

点击复制

# 基本示例

点击以展示/隐藏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 模式：

<FlylineChart config={config} dev={true} style={{width: '200px', height: '100px'}} />

点击复制

TIP

开启 dev 模式后，请打开浏览器控制台，然后点击飞线图组件中你想要设置的飞线的起始点位置或中心点位置，控制台会输出该点在组件中的位置信息：

FlylineChart DEV:

Click Position is [100, 100]

Relative Position is [0.10, 0.10]

组件默认使用相对坐标，应选用Relative Position，关闭相对坐标模式，则需要使用Click Position，如何开启和关闭相对坐标模式请查阅 config 属性。

# config 属性

属性	说明	类型	可选值	默认值
centerPoint	中心点坐标	`Array<Number>`	---	`[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<Number>`	---	`[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<Number>`	---	`[0, 15]`
color	文本颜色	`String`	---	`#ffdb5c`
fontSize	文本文字大小	`Number`	---	`12`

# halo 属性

属性	说明	类型	可选值	默认值
show	是否显示光晕环	`Boolean`	---	`true`
duration	动画时长	`Number`	---	`30`
color	光晕颜色	`String`	---	`#fb7293`
radius	光晕最大半径	`Number`	---	`120`

# centerPointImg 属性

属性	说明	类型	可选值	默认值
width	图片宽度	`Number`	---	`40`
height	图片高度	`Number`	---	`40`
url	图片url	`String`	---	`''`

# pointsImg 属性

属性	说明	类型	可选值	默认值
width	图片宽度	`Number`	---	`15`
height	图片高度	`Number`	---	`15`
url	图片url	`String`	---	`''`

← 进度池飞线图增强版 →