DataV - Vue3

Appearance

飞线图增强版 ​

配置若干飞线点后，你可以在任意两点间设置飞线，得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。

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

基础用法 ​

查看代码
vue
<template>
  <div w200 h160 flex justify-center items-center bg-dark>
    <div w740px h600px>
      <dv-flyline-chart-enhanced :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({
  points: [
    {
      name: '郑州',
      coordinate: [0.48, 0.35],
      halo: {
        show: true,
      },
      icon: {
        src: mapCenterPoint,
        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: mapPoint,
  },
  text: {
    show: true,
  },
  k: 0.5,
  bgImgSrc: mapImg,
})
</script>

dev模式 ​

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

html
<dv-flyline-chart-enhanced :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属性。

属性 ​

参数说明类型可选值默认值
points飞线点Point[][1]---[]Point
lines飞线Flyline[][2]---[]Flyline
halo全局光晕配置Halo---halo
text全局文本配置Text---text
icon全局图标配置Icon---icon
line全局飞线配置Line---line
bgImgSrc背景图srcString---''
k飞线收束程度[3]Number-1 - 1-0.5
curvature飞线曲率[4]Number1 - 105
relative使用相对坐标[5]Booleantrue/falsetrue

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图标srcString---''
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控制了飞线的显示区域半径，该值越大，飞线显示范围越大，飞线越长，该值越小，飞线越短。