DataV - Vue3

Appearance

飞线图 ​

飞线图

基础用法 ​

查看代码
vue
<template>
  <div w200 h160 flex justify-center items-center bg-dark>
    <div w740px h600px>
      <dv-flyline-chart :config="config" :dev="true" style="width:100%;height:100%;" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import mapImg from '../../assets/img/map.jpg'
import mapPoint from '../../assets/img/mapPoint.png'
import mapCenterPoint from '../../assets/img/mapCenterPoint.png'

const config = reactive({
  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: mapImg,
  centerPointImg: {
    url: mapCenterPoint,
  },
  pointsImg: {
    url: mapPoint,
  },
})
</script>

dev模式 ​

组件提供了dev模式 (本页展示的Demo均已开启)，可以帮你快速确定飞线点位置，设置组件属性dev为true即可启用dev模式：

html
<dv-flyline-chart :config="config" :dev="true" style="width:100%;height:100%;" />

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

html
dv-flyline-chart 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]Number1 - 105
flylineRadius飞线显示半径[5]Number---100
duration飞线动画时长Array<Number>---[20, 30] [6]
relative使用相对坐标[7]Booleantrue/falsetrue
bgImgUrl背景图urlString---''
text文本配置项Object---见下方text属性
halo光晕环配置项Object---见下方halo属性
centerPointImg中心点图片配置Object---见下方centerPointImg属性
pointsImg飞线点图片配置Object---见下方pointsImg属性

config相关注释 ​

  • [1] 飞线起始点数据的子元素可以为数组或对象，当为数组时，即点坐标数据；当为对象时，该对象包涵点坐标位置和文本信息。两种示例如下：
js
// 子元素为数组
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图片urlString---''

pointsImg属性 ​

参数说明类型可选值默认值
width图片宽度Number---15
height图片高度Number---15
url图片urlString---''